<app-root>没有被填满 [英] <app-root> is not getting filled
问题描述
我是 Angular 2 的初学者，已经开始了一个由这些文件组成的小项目:
I am a beginner with Angular 2 and have started with a small project consisting of these files:
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 {
}
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';
}
app.component.html
<span>Welcome to {{title}}</span>
另外，我的 index.html 看起来像这样:
Also, my index.html looks like this:
<!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>
我遇到的问题是，即使一切都编译正常，结果页面中的 <app-root> 标记仍然为空，并且我的模板 HTML 没有被添加.我已经通过更改模板 URL 测试了模板加载是否有问题，但它无法找到我的模板文件并且编译失败.这意味着这不是问题.
The problem I am experiencing is that even though everything compiles fine, the <app-root> tag stays empty in the resulting page and my template HTML is not getting added. I've tested if it is a problem with template loading by altering the template URL, but it fails to find my template file and compilation fails. This means that this can't be the problem.
这里有什么我遗漏的吗?
Is there anything I am missing here?
推荐答案
您已将 NgModule 装饰器和 AppComponent 类添加到 importscode> 模块的部分，这是错误的.从 imports 部分删除 NgModule 装饰器.还要从模块的 imports 中删除 AppComponent.
You've added the NgModule decorator and the AppComponent class to the imports section of your module, which is wrong. Remove the NgModule decorator from your imports section. Also remove the AppComponent from the imports of your module.
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
imports 属性应该只包含用 NgModule 修饰的类.
The imports attribute should only contain classes which are decorated with NgModule.
这篇关于<app-root>没有被填满的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
