Error: NgModule metadata not found for 'AppModule'

Question

I have a problem with the Angular 2 application that I am creating. I exercise my copy / paste skills from different places and eliminate all build errors, but when I run it in the browser, I have an error in the browser. I looked at this post , but it did not solve my problem.

My AppModule as follows:

 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 download the following:

 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 Unfixed error: no NgModule metadata for "AppModule".

How to solve this?

Update

Now my code looks like this, but still generates 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 am getting now:

Fault: no NgModule metadata for "AppComponent"

Is this a bug with the AppComponent or bootstrap, or module declaration and metadata? The documentation is fuzzy.

Answer 1

There are three errors in your code.

The first is that you are a bootstraping component, this is wrong - you have to use the bootstrap module, in your case AppModule and in AppModule you have to choose the component that will be loaded.

Second , you specify the AppModule as the component to be loaded:

 bootstrap: [ AppModule ] 

You cannot boot module, you can boot component, for example HomeComponent . From what I see, this is the only component that you have.

Third , you add the AppModule to your ads:

 declarations: [ AppModule, HomeComponent ] 

You simply cannot do this, you must add components, directives, and pipes to module declarations, and even if you can declare modules, why do you declare an AppModule within yourself? 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);