Error: No NgModule metadata found for 'AppModule'

Question

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.

Answer 1

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);