角内容未显示

Question

因此，我创建了一个新组件，将其导入并声明为AppModule，并为标签使用了适当的选择器名称。但是以某种方式没有显示内容，这是怎么回事？

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

控制台错误 GET https://run.plnkr.co/preview/ckgj32p39001k3a6cujj3nr87/app.component.html 404

未处理的承诺拒绝：无法加载app.component.html；区域：任务：Promise.then;值：无法加载app.component.html zone.js@0.6.25？main = browser：357

错误：未捕获（承诺）：无法加载app.component.html

Answer 1

我无法在plunker上调试，所以我尝试了stackblitz。

我在根目录下的hello文件夹中创建了一个简单的hello组件。

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() {}
}

在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 {}

然后在app.component.html

中添加了hello组件

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

，它工作正常。您可以在此处查看working demo

预览-

如果您有任何疑问，请告诉我。