角度内容不显示

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.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>

它工作正常。 你可以在这里查看工作演示

预览 -

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