typescript 错误：未找到“AppModule”的 NgModule 元数据

Error: No NgModule metadata found for 'AppModule'

提问by serlingpa

I have a problem with an Angular 2 app that I am building. I have been exercising my copy/paste skills from various locations, and have eliminated all of the build errors, but when I launch it in the browser I have an error in the browser. I have looked at this postbut it hasn't solved my problem.

我正在构建的 Angular 2 应用程序有问题。我一直在从不同的位置练习我的复制/粘贴技能，并消除了所有构建错误，但是当我在浏览器中启动它时，我在浏览器中出现错误。我看过这篇文章，但它没有解决我的问题。

My AppModulelooks like this:

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

I'm bootstrapping like this:

我是这样引导的：

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

platformBrowserDynamic().bootstrapModule(AppModule);

But in my browser, I get this error:

但是在我的浏览器中，我收到此错误：

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

ng_module_resolver.js:34 未捕获的错误：未找到“AppModule”的 NgModule 元数据。

How do I solve this?

我该如何解决这个问题？

Update

更新

My code looks like this now, but still generate an error:

我的代码现在看起来像这样，但仍然会产生错误：

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

And bootstraping:

和引导：

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

platformBrowserDynamic().bootstrapModule(AppComponent);

This is the error I'm getting now:

这是我现在得到的错误：

Uncaught Error: No NgModule metadata found for 'AppComponent'

未捕获的错误：未找到“AppComponent”的 NgModule 元数据

Is this an error with AppComponent, or the bootstrapping, or the module declaration and metadata? The documentation is vague.

这是一个错误AppComponent，还是引导程序，或者模块声明和元数据？文档含糊不清。

采纳答案by Stefan Svrkota

There are three mistakes at least in your code.

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

First- you are bootstraping component, this is wrong - you should bootstrap module, in your case AppModuleand in AppModuleyou should choose the component that is going to be bootstrapped.

首先- 你是引导组件，这是错误的 - 你应该引导模块，在你的情况下AppModule，AppModule你应该选择将被引导的组件。

Second- you are specifying AppModuleas a component that's going to be bootstrapped:

其次- 您指定AppModule为将被引导的组件：

bootstrap: [ AppModule ]

You can't bootstrap module, you can bootstrap component, for example HomeComponent. From what I can see, that's the only component you have.

你不能引导模块，你可以引导组件，例如HomeComponent。据我所知，这是您拥有的唯一组件。

Third- you are adding AppModuleto its declarations:

第三- 您正在添加AppModule其声明：

declarations: [
  AppModule,
  HomeComponent
]

You simply cannot do this, you should only add components, directives and pipes to module's declarations and even if you could declare modules, why would you declare AppModuleinside itself? Try this code:

你根本不能这样做，你应该只在模块的声明中添加组件、指令和管道，即使你可以声明模块，你为什么要在AppModule内部声明？试试这个代码：

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

export class AppModule {
}

And then bootstrap AppModule:

然后引导AppModule：

platformBrowserDynamic().bootstrapModule(AppModule);