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

I just had the same issue with a lazy-loaded module. It turns out that the name of the module was incorrect.

Check the names of all your modules for possible typos.

Answer 2

Try to remove node_modules rm -rf node_modules and package-lock.json rm -rf package-lock.json, after that run npm install.

Answer 3

This error says necessary data for your module can't be found. In my case i missed an @ symbol in start of NgModule.

Correct NgModule definition:

 @NgModule ({ 
    ... 
 })
 export class AppModule {

 }

My case (Wrong case) :

NgModule ({ // => this line must starts with @
   ... 
})
export class AppModule {

}

Answer 4

If you are having this issue in Angular 8 or Angular 9 (like I was), after:

• Clearing your npm cache
• reinstalling all node_modules
• checking your "include" and "files" tsconfig setting etc

and you're still having issues, and you are Lazy Loading Modules check your angularCompilerOptions in your tsconfig.json or tsconfig.app.json, and make sure that "strictMetadataEmit" is set to false or is removed.

"angularCompilerOptions": {
    "preserveWhitespaces": false,
    "strictInjectionParameters": true,
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    // "strictMetadataEmit": true <-- remove this setting or set to false
},

The setting is to help library creators which should never have lazy loaded modules built in. I had previously (using Angular 7) set all "strict" options to true...

Answer 5

We've faced this issue on Angular Cli 1.7.4 at times. Initially we've got

Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null

And fixing this lead to the above issue.

We've removed package-lock.json

npm remove webpack

npm cache clean --force

You can also remove your node_modules folder. And then clean the cache. re-installed angular cli:

npm install @angular/cli@1.7.4

And then you can do npm install again, just to make sure if everything is installed.

Then run

npm ls --depth 0

To make sure if all your node_modules are in sync with each other. If there are any dependency mismatching, this is the opportunity for us to figure out.

Finally run npm start/ng serve. it should fix everything.

This is out cheat code that we'll follow if we run into any issues with cli, before we dig deeper. 95% of times it fixes all the issues.

Hope that helps.

Answer 6

If Nothing else works try following

if (environment.production) {
        // there is no need of this if block, angular internally creates following code structure when it sees --prod
        // but at the time of writting this code, else block was not working in the production mode and NgModule metadata
        // not found for AppModule error was coming at run time, added follow code to fix that, it can be removed probably 
        // when angular is upgraded to latest version or if it start working automatically. :)
        // we could also avoid else block but building without --prod saves time in building app locally.
        platformBrowser(extraProviders).bootstrapModuleFactory(<any>AppModuleNgFactory);
    } else {
        platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
    }