2017-10-15 32 views
0

我與角2個初學者,並已開始與包括這些文件的一個小項目:<app-root>是沒有得到填充

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看起來是這樣的:

<!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來測試模板加載是否存在問題,但它無法找到我的模板文件並且編譯失敗。這意味着這不是問題。

有什麼我在這裏失蹤?

回答

4

您已將NgModule修飾符和AppComponent類添加到模塊的imports部分,這是錯誤的。從您的imports部分刪除NgModule裝飾器。同時從模塊的imports中刪除AppComponent

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

imports屬性應只包含裝飾有NgModule類。