简体   繁体   中英

Angular Content Not Showing Up

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 zone.js@0.6.25?main=browser:357

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM