錯誤：找不到'AppModule'的NgModule元數據

Question

我遇到了我正在構建的Angular 2應用程序的問題。我一直在不同位置使用我的複製/粘貼技巧，並消除了所有構建錯誤，但是當我在瀏覽器中啓動它時，瀏覽器中出現錯誤。我看過this post，但它沒有解決我的問題。

我AppModule看起來是這樣的：

import { NgModule, ApplicationRef } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { ROUTES } from './app.routes'; 
import { HomeComponent } from '../index'; 

@NgModule({ 
    bootstrap: [ AppModule ], 
    declarations: [ 
    AppModule, 
    HomeComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(ROUTES, { useHash: true }) 
    ] 
}) 
export class AppModule { 
} 

我自舉這樣的：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './index'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

但在我的瀏覽器中，我得到這個錯誤：

ng_module_resolver.js:34 Uncaught Error: No NgModule metadata found for 'AppModule'.

怎麼辦我解決這個問題？

更新

我的代碼看起來現在這個樣子，但還是產生錯誤：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { ROUTES } from './app.routes'; 
import { HomeComponent } from '../index'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    declarations: [ 
     HomeComponent, 
     AppComponent 
    ] 
}) 
export class AppModule { 
} 

而且的Bootstrap：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './index'; 

platformBrowserDynamic().bootstrapModule(AppComponent); 

這是現在我得到的錯誤：

Uncaught Error: No NgModule metadata found for 'AppComponent'

這是否與AppComponent錯誤，或引導，或模塊聲明和元數據？該文件含糊不清。

Answer 1

至少在你的代碼中有三個錯誤。

首先 - 你的Bootstrap組件，這是錯誤的 - 你應該引導模塊，你的情況AppModule和AppModule你應該選擇將要被自舉的組件。

二 - 您指定AppModule因爲那將自舉一個組件：

bootstrap: [ AppModule ] 

你不能引導模塊，可以引導組件，例如HomeComponent。從我所看到的，這是您擁有的唯一組件。

三 - 要添加AppModule其聲明：

declarations: [ 
    AppModule, 
    HomeComponent 
] 

你根本無法做到這一點，你應該只添加組件，指令和管道模塊的聲明，即使你可以聲明模塊，爲什麼你會在裏面聲明AppModule嗎？試試這個代碼：

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    declarations: [ HomeComponent ], 
    bootstrap: [ HomeComponent ] 
}) 

export class AppModule { 
} 

然後引導AppModule：

platformBrowserDynamic().bootstrapModule(AppModule);