Error: No NgModule metadata found for 'AppModule'

angular, typescript

Solution

There are three mistakes at least in your code.

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

Second - you are specifying `AppModule` as a component that's going to be bootstrapped:

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.

Third - you are adding `AppModule` to its declarations:

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 `AppModule` inside itself? Try this code:

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

export class AppModule {
}

And then bootstrap `AppModule`:

platformBrowserDynamic().bootstrapModule(AppModule);

Problem

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 post but it hasn't solved my problem. My `AppModule` looks like this: ``` 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'. 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' Is this an error with `AppComponent`, or the bootstrapping, or the module declaration and metadata? The documentation is vague.

Original source

Related problems