Angular 2 : No NgModule metadata found

Question

I\'m brand new to Angular 2 and attempting to follow along with a video tutorial I found. Despite following all of the steps, Angular just won\'t work; I get the following e

Answer 1

The problem is in your main.ts file.

const platform = platformBrowserDynamic();
platform.bootstrapModule(App);

You are trying to bootstrap App, which is not a real module. Delete these two lines and replace with the following line:

platformBrowserDynamic().bootstrapModule(AppModule);

and it will fix your error.

Answer 2

There are more reasons for getting this error. This means your application failed to build as expected.

Check for the following..

• Check whether the node_modules version are not changed, this is the primary reason.
• If you are moving from Some other Build tool to webpack, For example Systemjs to Webpack, If some of your dependencies are not modular in nature you may get this error, check for that too.
• Check for Obsolete features of the framework, Ex: "HTTP_PROVIDERS" in angular 2 and remove them.
• If you are upgrading, then make sure you are following the current syntax of the Framework, for Ex: routing syntax has been changed in Angular2..
• Check the Bootstraping process and make sure you are loading the correct Module.

Answer 3

I found that the cause of this problem in my case, was that I've combined my Angular app with a node.js application in the same source tree, and in the root tsconfig.json I had:

"files": [ "./node_modules/@types/node/index.d.ts" ]

I changed this to

"compilerOptions": { "types": ["node"] }

And then to prevent node types being uses in your angular app, add this to tsconfig.app.json:

"compilerOptions": { "types": [] }

Answer 4

After upgrading to Angular 6, I encountered the "ERROR in No NgModule metadata found for 'AppModule'." with the angular-bootstrap-md package, which requires a tsconfig.json "include" as follows:

"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],

After days of troubleshooting and hair pulling, the solution was to arrange the list so that the app.module.ts was located first, under "src/**/*.ts". An Angular bug, perhaps?

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

I genuinely hope this helps somebody, as I tried everything in this posting and nothing helped. After this change, everything compiles and works beautifully, as expected.

Answer 5

Late answer, but this might help someone. I got the same error, tried out all the previously mentioned suggestions, banged my head against the wall, but nothing worked.

On careful observation, I noticed the following in app.module.ts:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpClientModule,, // Redundant comma 
  CoreModule
];

So I banged my head some more. The extra comma, very innocently higlighted, by WebStorm, as a mild warning, wreaked havoc by inserting an empty slot in the Array. Watchout fot the elision trap ;)

Answer 6

Hope it can help. In my case, I work with lazy-load module and I found this mistake lead to ERROR in No NgModule metadata found for 'MyModule'.

in app-routing.module.ts
{ path: 'mc3', loadChildren: 'app/module/my/my.module#MxModule' },

If I run ng serve --aot chrome dev tool can tell me Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'