<app-root>没有被填满

Question

<app-root>没有被填满

fus*_*cat 3 typescript angular-components angular

我是Angular 2的初学者,并开始使用由这些文件组成的小项目:

app.module.ts

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

import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

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

Run Code Online (Sandbox Code Playgroud)

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'App Title';
}

Run Code Online (Sandbox Code Playgroud)

app.component.html

<span>Welcome to {{title}}</span>

Run Code Online (Sandbox Code Playgroud)

另外,我的index.html看起来像这样:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我遇到的问题是,即使所有内容编译都很好,<app-root>标签在结果页面中保持为空,我的模板HTML也没有添加.我通过更改模板URL测试了模板加载是否存在问题,但是无法找到我的模板文件并且编译失败.这意味着这不是问题所在.

这里有什么我想念的吗？

Answer 1

cyr*_*r_x 7

您已将NgModule装饰器和AppComponent类添加到imports模块的部分,这是错误的.NgModule从您的imports部分中删除装饰器.同时AppComponent从imports模块中删除.

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

Run Code Online (Sandbox Code Playgroud)

该imports属性应仅包含用其修饰的类NgModule.

归档时间：	8 年，7 月前
查看次数：	8411 次
最近记录：	8 年，7 月前