Angular Content Not Showing Up

Question

So I have created a new component, imported it and declared into AppModule, and used the appropriate selector name for the tags. But somehow the content is not showing up, what is wrong?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HelloComponent } from "./hello/hello.component";

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    HelloComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

}

https://plnkr.co/edit/JfBoe38MZqRlvTLB?preview

Error in console GET https://run.plnkr.co/preview/ckgj32p39001k3a6cujj3nr87/app.component.html 404

Unhandled Promise rejection: Failed to load app.component.html ; Zone: ; Task: Promise.then ; Value: Failed to load app.component.html [email protected]?main=browser:357

Error: Uncaught (in promise): Failed to load app.component.html

can you please provide stackblitz url ? is there any error in console ? — Piyush Jain
generally i use the cli to create a component. was trying to do some Angular Exercises for practice here jcoop.io/angular-practice-exercises but doesn't seem like it is working. i am unable to see the preview on stackblitz due to some firewall i think — J. Wilshere

Piyush Jain Piyush Jain · Accepted Answer · 2020-10-21T04:14:45

I am not able to debug on plunker so I tried on stackblitz.

I created a simple hello component inside hello folder on root.

hello/hello.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-hello",
  templateUrl: "./hello.component.html",
  styleUrls: ["./hello.component.css"]
})
export class HelloComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

added this in app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello/hello.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

then added hello component in app.component.html

<p>
  Start editing to see some magic happen :)
</p>
<app-hello></app-hello>

and it is working fine. you can check working demo here

Preview -

Let me know if you have any doubt.

Angular Content Not Showing Up

1 Answers