角度內容不顯示

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>

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

預覽 -

如果您有任何疑問，請告訴我。