错误：找不到'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);