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 error   compiler umd js 13854 Uncaught Error  No NgModule metadata found for  App     and the component doesn t load at all   Here are my files   package json        name    retain      version    1 0 0      description          main    index js      scripts          test    webpack --config webpack spec ts --progress --color  amp  amp  karma start        start    webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base src          author          license    ISC      dependencies           angular common    2 0 0         angular compiler    2 0 0         angular core    2 0 0         angular forms    2 0 0         angular http    2 0 0         angular platform-browser    2 0 0         angular platform-browser-dynamic    2 0 0         angular router    3 0 0        core-js    2 4 1        lodash    4 16 1        rxjs    5 0 0-beta 12        zone js    0 6 25          devDependencies           types core-js    0 9 33         types lodash    4 14 35         types node    6 0 39        awesome-typescript-loader    2 2 4        css-loader    0 23 1        jasmine-core    2 4 1        karma    1 1 1        karma-chrome-launcher    1 0 1        karma-jasmine    1 0 2        karma-mocha-reporter    2 0 4        raw-loader    0 5 1        to-string-loader    1 1 4        ts-helpers    1 1 1        typescript    2 0 2        webpack    1 13 1        webpack-dev-server    1 14 1          index html    lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset UTF-8 gt       lt title gt Retain lt  title gt       lt link rel  icon  href  data  base64 iVBORw0KGgo   gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt link href  https   cdnjs cloudflare com ajax libs normalize 4 1 1 normalize min css  rel  stylesheet  type  text css  gt       lt link rel  stylesheet  href  https   cdn jsdelivr net flexboxgrid 6 3 0 flexboxgrid min css  type  text css  gt       lt link href  https   fonts googleapis com icon family Material Icons        rel  stylesheet  gt       lt link href  global css  rel  stylesheet  gt       lt base href     gt     lt  head gt     lt body gt        lt app gt            before angular loads       lt  app gt        lt script src  polyfills bundle js  gt  lt  script gt       lt script src  vendor bundle js  gt  lt  script gt       lt script src  main bundle js  gt  lt  script gt      lt  body gt   lt  html gt    main ts   import   platformBrowserDynamic   from   angular platform-browser-dynamic   import   AppModule   from    app app module     import   App   from    app app    const platform   platformBrowserDynamic    platform bootstrapModule App    platformBrowserDynamic   bootstrapModule AppModule     app ts   import   Component   from   angular core   import   NgModule        from   angular core     Component     selector   app     template         lt div gt         lt h3 gt          Yo  world         lt  h3 gt       lt  div gt            export class App      app module ts   import   NgModule   from   angular core    import   BrowserModule   from   angular platform-browser    import   App   from    app      NgModule      imports   BrowserModule      declarations   App      bootstrap   App        export class AppModule       Thanks for your time

User · Answer

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...

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try to remove node modules rm -rf node modules and package-lock json rm -rf package-lock json  after that run npm install

User · Answer

I would recommend restarting the application  Most of the cases editor won t be able to detect the changes in the lazy loaded module

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In your main ts  you are bootstrapping both your AppModule and your App  It should just be the AppModule  which then bootstraps the App   If you compare your main ts to the docs you ll see the difference - just remove all references to App from main ts

User · Answer

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

User · Answer

I had this issue when i cloned from a git repository and I had it resolved when I created a new project and re-inserted the src folder from the old project   The src folder is the only folder needed when deploying your angular application but you must reconfigure the dev environment  using this solution

User · Answer

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         gt  this line must starts with              export class AppModule

User · Answer

I had the same problem but none of all those solutions worked for me  After further investigation  I found out that an undesired import was in one of my component   I use setTimeout function in app component but for any reason Visual Studio added import   setTimeout   from  timer   where it was not needed  Removing this line fixed the issue   So remember to check your imports before going further  Hope it may help someone

User · Answer

I had the same problem and couldn t solve it after reading all the above answers  Then I noticed that an extra comma in declarations was creating a problem  Removed it  problem solved    NgModule       imports            PagesRoutingModule          ThemeModule          DashboardModule             declarations               PAGES COMPONENTS

User · Answer

I had the same issue and I resolved it by closing the editor i e  Visual Studio Code  started it again  run ng serve and it worked

User · Answer

In my case  I had defined a couple of  private  static methods in one of my components and was using them in the same component

User · Answer

I had this error even though I had everything that the answers above suggested in place  A simple edit in the app module ts file   like delete a bracket and put it back  did the trick

User · Answer

In my case  I was trying to upgrade my angular 6 project using ng update after that the entire universe collapse   I was trying to update my project using this commands    ng update  angular cli ng update  angular core ng update  angular material   And then I found a problem with rxjs package and I run also this command  - npm install --save rxjs  And then I get the error      No NgModule metadata found   I solve this by deleting my node modules folder in the project root and then I run    npm install   That s is  all works nice

User · Answer

I finally found the solution    Remove webpack by using following command    npm remove webpack    Install cli by using following command    npm install --save-dev  angular cli latest   after successfully test app  it will work     If not then follow below steps    Delete node module folder   Clear cache by using following command    npm cache clean --force    Install node packages by using following command    npm install    Install angular cli by using following command    npm install --save-dev  angular cli latest   Note  If failed  try step 4 again  It will work

User · Answer

The issue is fixed only when re installed angular cli manually  Follow following steps   run all command under Angular project dir   1 Remove webpack by using following command   npm remove webpack   2 Install cli by using following command   npm install --save-dev  angular cli latest   after successfully test app  it will work     if not then follow below steps   1  Delete node module folder   2  Clear cache by using following command   npm cache clean --force   3  Install node packages by using following command   npm install   4 Install angular cli by using following command   npm install --save-dev  angular cli latest   Note  if failed try again     5  Celebrate

User · Answer

I ll give you few suggestions Remove all these as mentioned below  1  lt script src  polyfills bundle js  gt  lt  script gt  index html      lt  lt  lt    not sure as Angular2 0 final version doesn t require this   2 platform bootstrapModule App    main ts   3 import   NgModule   from   angular core    app ts

User · Answer

With Angular 5  I solved a similar problem by ugrading to  angular cli 1 6 1 from 1 5 5    devDependencies         angular cli    1 6 1      During ng serve the error I got was   ERROR in Error  No NgModule metadata found for  AppModule       at NgModuleResolver resolve   path to project app node modules  angular compiler bundles compiler umd js 20247 23

User · Answer

I ve encountered this problem twice now  Both times were problems with how I was implementing my lazy loading  In my routing module I had my routes defines as           path   game       loadChildren       gt  import    game game module   then m   gt   m GameModule         But this is wrong  After the second    you don t need curly braces  it should look like this           path   game       loadChildren       gt  import    game game module   then m   gt  m GameModule

User · Answer

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

User · Answer

Using ngcWebpack Plugin I got this error when not specifying a mainPath or entryModule

User · Answer

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  lt any gt AppModuleNgFactory         else           platformBrowserDynamic extraProviders  bootstrapModule AppModule

User · Answer

you need to enable the ngModel directive  This is done by adding the FormsModule to the imports   array in the AppModule   You then also need to add the import from  angular forms in the app module ts file  import   FormsModule   from   angular forms

[angular] Angular 2 : No NgModule metadata found

Examples related to angular

Examples related to typescript

Examples related to webpack