angular - 错误 : No NgModule metadata found for 'AppModule'

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 {
}

和引导:

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

platformBrowserDynamic().bootstrapModule(AppComponent);

这是我现在遇到的错误:

Uncaught Error: No NgModule metadata found for 'AppComponent'

这是 AppComponent 错误，还是 Bootstrap 错误，或者是模块声明和元数据错误？文档含糊不清。

Answer 1

您的代码中至少存在三个错误。

首先 - 你是引导组件，这是错误的 - 你应该引导模块，在你的情况下 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);