serlingpa serlingpa - 1 month ago 69
TypeScript Question

Error: No NgModule metadata found for 'AppModule'

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


and my bootstrapping like this:

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

platformBrowserDynamic().bootstrapModule(AppModule);


but in my browser, I get this message:

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

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

platformBrowserDynamic().bootstrapModule(AppComponent);


Generating this new error:

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

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.

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