Angular-cli: "No NgModule metadata found for 'AppModule'" after Upgrade to Angular 5.1.0 and AngularCli 1.6.0

Created on 8 Dec 2017  ·  81Comments  ·  Source: angular/angular-cli

Versions

Angular CLI: 1.6.0
Node: 8.9.1
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0
@angular/cli: 1.6.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0
@ngtools/json-schema: 1.1.0
@schematics/schematics: 0.0.10
typescript: 2.5.0
webpack: 3.10.0

Repro steps

  • Upgrade @angular from 5.0.2 to 5.1.0
  • Upgrade @angular/cli from 1.5.2 to 1.6.0
  • Run ng serve

Observed behavior

After doing the upgrade, the following error arises.
I was able to resolve the issue as described here.

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\compiler\bundles\compiler.umd.js:20249:23)
    at CompileMetadataResolver.getNgModuleMetadata (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\compiler\bundles\compiler.umd.js:15218:60)
    at visitLazyRoute (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\compiler\bundles\compiler.umd.js:31063:104)
    at AotCompiler.listLazyRoutes (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\compiler\bundles\compiler.umd.js:31031:20)
    at AngularCompilerProgram.listLazyRoutes (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\compiler-cli\src\transformers\program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\angular_compiler_plug
in.js:247:66)
    at Promise.resolve.then.then (C:\Users\volkende\WebstormProjects\project-name\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:561:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Desired behavior

  • Since no real changes have been made in app.module.ts, as a developer I don't want to have to take this step

Mention any other details that might be useful (optional)

  • Before _this_ issue occured, I had to explicitly npm i --save-dev webpack to be able to run ng serve at all (#7334)
2 (required)

Most helpful comment

I got the same error. The issue is fixed only when i manually re installed angular/cli. The webpack should come as a part of @angular/cli.

npm remove webpack
npm install --save-dev @angular/cli@latest.

This should fix your issue.
If this didn't, clear the whole node_modules folder
then

npm cache clean --force
npm install
npm install --save-dev @angular/cli@latest

If @angular/cli install fails
Retry npm install --save-dev @angular/cli@latest again.

All 81 comments

I got the same error. The issue is fixed only when i manually re installed angular/cli. The webpack should come as a part of @angular/cli.

npm remove webpack
npm install --save-dev @angular/cli@latest.

This should fix your issue.
If this didn't, clear the whole node_modules folder
then

npm cache clean --force
npm install
npm install --save-dev @angular/cli@latest

If @angular/cli install fails
Retry npm install --save-dev @angular/cli@latest again.

I had this same error when upgrading. I simply deleted the node_modules folder and ran npm install again, all worked fine.

I just ran into this issue but with the cli on 1.5.5 and angular on 5.1.0

I just ran into this issue, as well. I just upgraded from Angular v4 to v5.1.0 and @ ngtools/webpack v1.9.0. I removed my node_modules directory and cleared npm cache, but I'm still getting the missing metadata error post-compilation.

Thanks for your feedback so far. I will now investigate again and can then respond properly to your suggestions. But for sure I deleted node_modules a few times in the process (@mattytommo ).
Will give feedback soon..

So I reverted what I did earlier today (actually a little git accident, but that's another story) and updated again. Now I documented every step and took into account the previous answers.

  1. npm i -g @angular/cli@latest
  2. rm -rf node_modules / rd /s /q node_modules
  3. Update project dependencies as follows (manually in package.json):
    "@angular/animations": "5.0.2" -> "5.1.0",
    "@angular/cdk": "5.0.0-rc0" -> "5.0.0",
    "@angular/common": "5.0.2" -> "5.1.0",
    "@angular/compiler": "5.0.2" -> "5.1.0",
    "@angular/core": "5.0.2" -> "5.1.0",
    "@angular/forms": "5.0.2" -> "5.1.0",
    "@angular/http": "5.0.2" -> "5.1.0",
    "@angular/material": "5.0.0-rc0" -> "5.0.0",
    "@angular/platform-browser": "5.0.2" -> "5.1.0",
    "@angular/platform-browser-dynamic": "5.0.2" -> "5.1.0",
    "@angular/router": "5.0.2" -> "5.1.0"
  1. npm cache clear --force
  2. npm cache verify
  3. npm install
  4. The #7334 Error:
Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\Enzo\WebstormProjects\project-name.de\node_modules\html-webpack-plugin\lib\compiler.js:11:26)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\Enzo\WebstormProjects\project-name.de\node_modules\html-webpack-plugin\index.js:7:21)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
  1. npm uninstall webpack
  2. npm install --save-dev --save-exact @angular/cli@latest (from @JinsPeter 's answer)

After all that ng serve and ng build [--prod] work fine.

New findings:

  • The new described steps are working just fine and may be a workaround
  • What I originally wrote under _Observed Behaviour_ is no longer needed

What I do not understand:

  • What do steps 8 and 9 do different versus steps 2, 4 and 6?
  • Both should remove the dependencies (or at least webpack) and perform a clean reinstall

Hope that information helps

In the meantime we also had a build in our CI-Environment. Before pushing, I cleaned the cache and after that, the build was successful without all the complicated stuff above. A simple npm install and ng build --prod worked perfectly fine.

You can close the issue now as it was build mistake ryt?

We're not using angular-cli directly. We use webpack to do the compilation. We're still getting the error after doing a compile.

I'm also experiencing this issue after updating from angular 4.4.6 to 5.1.0 and angular-cli 1.4.5 to 1.6.0. I've tried all the suggested fixes and am still getting the same error: "No NgModule metadata found for 'AppModule'." JIT builds work fine for me. When doing an AOT build it seems like it just doesn't include a bunch of the TypeScript files in the output. My main.bundle.js and vendor.bundle.js files are significantly smaller than their JIT counterparts.

I had this error message when running ng serve or ng build, but found that it was misleading. On running ng build --prod I was told I had a genuine error in my AppModule.ts ("Reference to a local (non-exported) symbols are not supported in decorators"). Fixing that issue fixed the error messages in ng serve and ng build.

Only way to get this working was to reproduce the steps from @evolkmann

I had same error. Better to have a permanent fix rather than deleting module and reinstalling them again.

Still having no success with this. I've followed the steps outlined by @evolkmann and still get this same error. One thing I notice is that new CLI projects will do an AOT build just fine. The project I'm having this issue with was originally started using SystemJS without the CLI. Later on into the project we switched it over to start building through the angular-cli and completely removed SystemJS. I suspect that this issue can happen with a project created with an earlier version of the CLI installed, and then upgrading it to the latest. I did go through our project and made sure my .angular-cli.json and tsconfig files matched what a new project created through the CLI has with no success.

I've got the same issue as @willisd2
Just upgraded and didn't change any of my code

I followed the steps quoted from @JinsPeter , and it was good here.

my case
My problem is in the incompatibility of the webpack, it follows the steps for solution:

_remove the node_modules folder_
rm -rf node_modules

_remove the webpack_
npm remove webpack

_clean npm cahe_
npm cache clean --force

_install the latest version of angular cli_
npm install --save-dev @angular/cli@latest

_install the dependencies_
npm install

_now it's just testing_
npm start our ng serve

This issue seems to be caused by having webpack listed in your project package.json directly. I'm sorry to say that this isn't supported. When you install more than one version of webpack it can cause a lot of problems.

If you have webpack listed in your package.json, you should follow these steps to remove it:

npm uninstall webpack --save
rm -rf node_modules package-lock.json
npm install

@filipesilva what about people not using CLI? You have some advice / feedback please?

@samvloeberghs if you're using @ngtools/webpack directly you should be ok with having webpack. Do you have a reproduction I can look at?

@filipesilva This should not be closed as removing webpack has no effect on this issue for me. Webpack, at one point in time was included in my package.json, but has since been removed, and removed using the steps you outlined above. I still experience this issue and so do new members of my team that end up pulling the project down fresh (without webpack in the package.json) and installing everything including NodeJS from the ground up. The following are the contents of my package.json if it helps:

{
  "name": "ride",
  "version": "1.0.0",
  "description": "Package definitions for the RIDE application.",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "coverage": "lite-server --baseDir=\"./wwwroot/coverage\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "5.1.2",
    "@angular/cdk": "5.0.3",
    "@angular/common": "5.1.2",
    "@angular/compiler": "5.1.2",
    "@angular/core": "5.1.2",
    "@angular/flex-layout": "2.0.0-beta.12",
    "@angular/forms": "5.1.2",
    "@angular/http": "5.1.2",
    "@angular/material": "5.0.3",
    "@angular/platform-browser": "5.1.2",
    "@angular/platform-browser-dynamic": "5.1.2",
    "@angular/router": "5.1.2",
    "angular2-text-mask": "8.0.4",
    "core-js": "2.5.3",
    "hammerjs": "2.0.8",
    "jquery": "3.2.1",
    "rxjs": "5.5.6",
    "slick-carousel": "1.8.1",
    "text-mask-addons": "3.7.1",
    "web-animations-js": "2.3.1",
    "whatwg-fetch": "2.0.3",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "5.1.2",
    "@angular/language-service": "5.1.2",
    "@types/arcgis-js-api": "^4.6.0",
    "@types/core-js": "^0.9.43",
    "@types/google.visualization": "0.0.35",
    "@types/jasmine": "^2.8.3",
    "@types/jquery": "^3.2.17",
    "@types/node": "^8.5.2",
    "@types/slick-carousel": "^1.6.32",
    "canonical-path": "0.0.2",
    "child_process": "1.0.2",
    "codelyzer": "4.0.2",
    "concurrently": "^3.5.1",
    "del": "^3.0.0",
    "delete": "1.1.0",
    "gulp": "^3.9.1",
    "gulp-change": "1.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-delete-directory-files": "^0.0.2",
    "gulp-downloader": "^1.0.4",
    "gulp-htmlmin": "^4.0.0",
    "gulp-install": "^1.1.0",
    "gulp-less": "3.4.0",
    "gulp-less-to-scss": "^0.0.9",
    "gulp-path": "^4.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-savefile": "0.1.1",
    "gulp-uglify": "^3.0.0",
    "http-server": "^0.10.0",
    "jasmine-core": "2.8.0",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-spec-reporter": "^0.0.32",
    "lite-server": "^2.3.0",
    "lodash": "^4.17.4",
    "merge-stream": "^1.0.1",
    "node-powershell": "3.3.1",
    "path": "^0.12.7",
    "protractor": "^5.2.2",
    "rimraf": "^2.6.2",
    "ts-node": "4.1.0",
    "tslint": "5.8.0",
    "typescript": "2.4.2"
  },
  "repository": {}
}

Edit: json formatting

The original problem in this issue is definitely due to having webpack in package.json. There might be other problems that exhibit similar behaviour though, but without a repro I cannot investigate.

Good news! Based on the recent conversations on here it prompted me to try and reproduce this issue with a new CLI project, and once I was able to reproduce the issue the solution became obvious. It has to do with how you bootstrap the main Angular module for your application. Here's an abridged version of the contents of my main.ts file:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';
import 'whatwg-fetch';
import { AppModule } from 'app/app.module';

const platform = platformBrowserDynamic();

fetch('url to get some configuration setting', { method: 'get', credentials: 'include' }).then((response) => {
    response.json().then((settings: any) => {
        if (environment.production) {
            enableProdMode();
        }
        platform.bootstrapModule(AppModule).then((moduleInjector: any) => {
            // code to do stuff with some application specific services using the configuration 
            //that was pulled down from the 'fetch' operation
        });
    });
});

The main thing to take away from this is how it's setting the constant 'platform' to the result of executing the 'platformBrowserDynamic()' function and later using that 'platform' variable to call 'bootstrapModule()'. Apparently, in order for AOT to work, the call to bootstrapModule HAS to happen as follows:

platformBrowserDynamic().bootstrapModule(AppModule);

I tried switching the 'const' in 'const platform = platformBrowserDynamic()' to a 'let' and a 'var' and neither one worked. This issue can be reproduced by simply changing your main.ts to capture the result of the platformBrowserDynamic() function call to a variable, and using that variable to call 'bootstrapModule()' function.

Edit: Code sample formatting.

@willisd2 that is unfortunately a limitation (https://github.com/angular/angular-cli/issues/8880) of our current code generation setup 😞

So I'm having the issue only the first time I fire npm start and webpack throws the metadata error on AppModule. If I save a project file, it kicks it off again and works.
Running a 960 EVO 3000MB/s SSD .. any chance there is some speed/access issue?

I've used Git Bash (mingw) and babun (cygwin) on Win10.

Update I installed a newer version of typescript and now its working.
@angular/[email protected] requires typescript@'>=2.4.2 <2.6.0' but 2.6.2 was found instead.
But it builds. I was on 2.5.3 previously.

the answer is
npm install --save-dev --save-exact @angular/cli@latest
or remove "^" in package.json

change from "@angular/cli": "^1.6.4" to "@angular/cli": "1.6.4"

For me this issue still exists, after upgrading to 1.6.4, i tried removing node modules, clearing cache, and save reinstall for angular cli..
ERROR in Error: No NgModule metadata found for 'AppModule'. at NgModuleResolver.resolve (/home/hnr/web/gera-srh/node_modules/@angular/compiler/bundles/compiler.umd.js:20276:23) at CompileMetadataResolver.getNgModuleMetadata (/home/hnr/web/gera-srh/node_modules/@angular/compiler/bundles/compiler.umd.js:15229:60) at visitLazyRoute (/home/hnr/web/gera-srh/node_modules/@angular/compiler/bundles/compiler.umd.js:31090:104) at AotCompiler.listLazyRoutes (/home/hnr/web/gera-srh/node_modules/@angular/compiler/bundles/compiler.umd.js:31058:20) at AngularCompilerProgram.listLazyRoutes (/home/hnr/web/gera-srh/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/hnr/web/gera-srh/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36) at AngularCompilerPlugin._getLazyRoutesFromNgtools (/home/hnr/web/gera-srh/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66) at Promise.resolve.then.then (/home/hnr/web/gera-srh/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:565:50) at <anonymous> at process._tickCallback (internal/process/next_tick.js:160:7)

EDIT: I get this for all my angular projects since i updated..

@elhenro Hi. I was getting the same error, and had tried the same steps you mention: removing node modules, clearing cache, reinstall

There were a couple of extra things I did that made it work, maybe it will help:

  • npm cache clean --force (instead of npm cache verify)
  • npm update
  • In package.json chagned TypeScript to 2.6.2
  • deleted the package.lock.json, then ran npm install

I can reproduce the "No NgModule metadata found for 'AppModule'." issue:

Angular: 5.2.0
Angular CLI: 1.6.4
TypeScript: 2.5.3
node: 8.9.3
npm: 5.5.1

As described above, making any tiniest change to app.module.ts makes it disappear. I don't have webpack listed as a dependency in my package.json.

It would be nice to reopen the issue.

@KNeela, "OpaqueToken" was removed in Angular 5.0.0 as it was deprecated in Angular 4.0.0. You should use "InjectionToken" instead.

I had to remove my existing typescript version 2.5.3 and install [email protected] after hours of trying to figure it out .

Same error. Nothing helped really except saving the file and CLI kicks it off for the second time and then it works.

Angular: 5.2.0
Angular CLI: 1.6.5
TypeScript: 2.5.3 / 2.6.2
node: 9.4.0
npm: 5.6.0

Same problem here!
I manage to make it work first time but if I stop and start the project again then it fails again! Super annoying trying a full day to figure this out.

Angular CLI: 1.6.5
Node: 9.4.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.0.2
@angular/cli: 1.6.5
@angular/material-moment-adapter: 5.0.2
@angular/material: 5.0.2
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@ngtools/json-schema: 1.1.0
typescript: 2.4.2
webpack-dev-middleware: 2.0.4
webpack: 3.10.0

And the error:

ERROR in Error: No NgModule metadata found for 'AppModule'.
at NgModuleResolver.resolve (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/compiler/bundles/compiler.umd.js:20276:23)
at CompileMetadataResolver.getNgModuleMetadata (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/compiler/bundles/compiler.umd.js:15229:60)
at visitLazyRoute (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/compiler/bundles/compiler.umd.js:31090:104)
at AotCompiler.listLazyRoutes (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/compiler/bundles/compiler.umd.js:31058:20)
at AngularCompilerProgram.listLazyRoutes (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
at AngularCompilerPlugin._getLazyRoutesFromNgtools (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66)
at Promise.resolve.then.then (/Users/vassilis/Projects/Lexicon-NG/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:565:50)
at
at process._tickCallback (internal/process/next_tick.js:160:7)

Same issue.

I solved it by only updating typescript from 2.6.1 to 2.6.2.

Thank @boogie4eva and @briancodes

Same Issue, here. Already Updated typescript

ERROR in Error: No NgModule metadata found for 'AppModule'.
at NgModuleResolver.resolve

``Angular CLI: 1.6.5. Node: 9.4.0 OS: darwin x64 Angular: 5.2.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cli: 1.6.5 @angular-devkit/build-optimizer: 0.0.42 @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.5 @schematics/angular: 0.1.17 typescript: 2.6.2 webpack: 3.10.0

Any Idea?

I was facing the same issue.

It got resolved after updating Typescript to "2.6.2".

Still having this issue, with Angular 5.2.2 and the ASP core templating.

fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
      An unhandled exception has occurred: No NgModule metadata found for 'AppM
dule'.
      Error: No NgModule metadata found for 'AppModule'.

I have already upgraded my typescript, reinstalled everything, still the issue persists.

I cannot publish it via dotnet.

Does anyone have a fix? I have the same issue with

Angular CLI: 1.6.6
Node: 8.9.4
OS: darwin x64
Angular: 5.2.0
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/animations: 5.2.1
@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

I got same issue

ERROR in Error: No NgModule metadata found for 'AppModule'.

Environment

Angular CLI: 1.6.6
Node: 6.7.0
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@ngtools/json-schema: 1.1.0
typescript: 2.5.3
webpack: 3.10.0

Solution

I resolved it by updating the Typescript to 2.6.2 🎉

I had the same error after upgrade of the following:
angular: 4.1.0 -> 5.1.0
angular/cli: 1.2.1 -> 1.6.0 || 1.6.6

What solved my issue was:

  1. remove node_module
  2. upgrade typescript 2.3.3 -> 2.6.2

No NgModule metadata found for 'AppModule' happens with cli 1.6.7 too on a fresh ng new my-app and npm update --save-dev && npm update --save, after which installed typescript version was ^2.7.0.

Workaround npm install --save-dev [email protected] fixed it for me.

Edit: Funnily enough, when you run ng serve, first you get the error and nothing works in browser. Then save any .ts file and it recompiles just fine, everything works in the browser. Obviously won't help when you want to do ng build. :)

@angular versions:

"@angular/animations": "^5.2.3",
"@angular/cdk": "^5.1.1",
"@angular/common": "^5.2.3",
"@angular/compiler": "^5.2.3",
"@angular/core": "^5.2.3",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^5.2.3",
"@angular/http": "^5.2.3",
"@angular/material": "^5.1.1",
"@angular/platform-browser": "^5.2.3",
"@angular/platform-browser-dynamic": "^5.2.3",
"@angular/router": "^5.2.3",

thanks @deerawan it'swork for me.
It was typescript issue...

Still have this problem, I have tried everything listed here.

Same here the NgModule metadata error.
Fixed it fixing typescript version to 2.6.2

Angular CLI: 1.7.1
Node: 6.9.1
OS: darwin x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@ngtools/json-schema: 1.2.0
typescript: 2.6.2
webpack: 3.11.0

Same problem here...Latest version 1.6.5...nothing works from this post

@juanlet check this out https://stackoverflow.com/questions/39685179/angular-2-no-ngmodule-metadata-found
maybe this trick can help you

I had an extra .catch() statement in main.ts I had to remove. First starting ng serve, then adding spaces inside main.ts seemed to solve the issue for me the second time it happened.

I had to remove my existing typescript version 2.5.3 and install [email protected] after hours of trying to figure it out . And its working fine now.

Having the same problem with using regular angular-cli on a newly purchased macbook pro. I get the error message the first time I run ng serve, but as soon as I make any change, the error goes away, and the application works.

I have tried deleting node_modules and reinstalling my dependencies using yarn add, and I upgraded typescript to 2.6.2, but the issue persists.

Edit: Solved the issue, I am lazily loading my paths, and I had defined two paths:

{ path: 'login', loadChildren: 'app/login/login.module#LoginModule' }, { path: 'signup', loadChildren: 'app/signup/signup.module#LoginModule' }

As you can see, I was trying to import LoginModule on both places. Changed to the correct import, and it works.

TLDR: Don't copy paste your own code.

As many times before, removing the package-lock.json-file, before removing node_modules and reinstalling, solved the problem. It seems to me that the package-lock.json-file does more harm than good :).

@daniloagostinho thanks a lot ...
It worked and ng serve is working..

@evolkmann thanks... it worked!!!

Had the same probelm and, unfortunately, nothing from this post helped me.
Solved the error by removing "skipTemplateCodegen": true line from tsconfig.json file.

I finally resolved this issue. Resolution below. :-)

Update the Angular CLI version to latest – as of today it’s 1.7.4

  • How to check the version of @angular/cli

    • ng --version

      Go to the folder and type the following commands to update CLI.

    • npm remove @angular/cli

    • npm install —save-dev @angular/cli@latest

      Make sure that the Webpack version is 3.11.0

  • How to check the version of Webpack

    • npm list webpack

  • How to update webpack

For me, removing the include section from tsconfig.json did the trick. go figure :-)

I'm getting this error in freshly generated project. ng --version output:

Angular CLI: 1.7.4
Node: 8.3.0
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@ngtools/json-schema: 1.2.0
typescript: 2.5.3
webpack: 3.11.0

UPD
Just updated NodeJS to 10.0.0. Still getting this error

Same issue with Angular 6:

"@angular/cli": "6.0.0-rc.7",
"@angular/animations": "6.0.0-rc.5",
"@angular/cdk": "6.0.0-rc.5",
"@angular/common": "6.0.0-rc.5",
"@angular/compiler": "6.0.0-rc.5",
"@angular/core": "6.0.0-rc.5",
"@angular/flex-layout": "6.0.0-beta.15",
"@angular/forms": "6.0.0-rc.5",
"@angular/http": "6.0.0-rc.5",
"@angular/material": "6.0.0-rc.5",
"@angular/platform-browser": "6.0.0-rc.5",
"@angular/platform-browser-dynamic": "6.0.0-rc.5",
"@angular/router": "6.0.0-rc.5",
"typescript": "2.7.2"

Same error with latest versions:

Angular CLI: 6.0.0
Node: 9.4.0
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@angular/cdk                      6.0.1
@angular/material                 6.0.1
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Agreed getting the same error from update 5 to 6.

For anyone using Angular 6:

The only thing that has worked for me is removing the "files" or "include" property from my tsconfig.json and adding those file paths to the "include" property in my tsconfig.app.json.

@iamtristangordon TypeScript's tsconfig extends functionality only applies to the compilerOptions field. All others are ignored. So yes, any of those other fields (files, includes, etc.) need to be in the directly referenced tsconfig.

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.

@bahrigungor this solved my issue as well. The include shouldn't matter, but apparently it does... Thank you for randomly trying this and posting.

@bahrigungor solution helped solved the issue. I've updated src/tsconfig.app.json so that app.module.ts is mentioned explicitly in the "files" property besides the "**/*" from the "include" property: { "files": [ "app/app.module.ts" ], "include": [ "**/*" ] }

I also created a new application with the 6.0.1 CLI. The tsconfig.json andtsconfig.app.json don't have these properties mentioned but it builds just as well.

@bahrigungor this solved the issue, thank you very much

@bahrigungor solved my issue as well after 4 hours of yanking hair out of my skull! THANK YOU!!!!!

ERROR in multi ./src/styles.css ../node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css
Module not found: Error: Can't resolve 'C:\projetosnode_modules\jqwidgets-scripts\jqwidgets\styles\jqx.base.css' in 'C:\projetos\jqwidgets-angular-cli-app'
ERROR in No NgModule metadata found for 'AppModule'.

Leaving this comment so others don't feel lonely... none of the many brilliant ideas on here have helped me get over this issue. I only get this issue when I run ng serve -aot true. Not sure how to get past it. My app runs, but when I run in AOT mode, I get this error.

After much of hair pulling, finally got it working for Angular 6 by adding following in the tsconfig.json

"files": [
"src/app/app.module.ts"
]

@nawnitraman That worked for me!!

Do you know why it works?

This works because it forces the app module to be among the first files to be loaded. Other logic depends on it being loaded first. When this does not happen thing break. The real question i think is: what changed that now it requires this to be mentioned explicitly in the files property? I asume that the module was loaded first by default previous to this version.

I ran into this issue recently myself. I have a minimal repro that does not list angular-cli as a dependency, only ngtools/webpack and webpack itself.

Because this issue has had quite a few different problems conflated and the original issue was closed, I opened a new one: #11218

however if the discussion should happen here I am happy to do that instead

Hi I find a solution:
Edit the angular.json file and invert order of your-project and your-project-e2e
Now:
ng g c componentName
work correctly

Update your tsconfig.app.json file with:

"files": [
    "app/app.module.ts"
  ],

It works fine to me.

For me, in order to make it compile, i had to add this to tsconfig.app.json:

"files": [
    "./app/app.module.ts",
    "./main.ts",
    "./polyfills.ts"
  ],
  "include": [
    "./**/*.ts"
  ]

I got past this problem by not declaring platformBrowserDynamic as mentioned here:
https://stackoverflow.com/questions/39685179/angular-2-no-ngmodule-metadata-found

which to me, totally makes zero sense 😬 👍

Thanks @175451
Faced same issue. Resolved after adding below to tsconfig.app.json
"files": [ "./app/app.module.ts", "./main.ts", "./polyfills.ts" ],

I have got same error but for another module down the route. Error occurs on building secondary app (generated via angular CLI command: ng generate application myApp) and I have used in this application barrel import somewhere in its structure. By replacing import with direct/deeper one I have removed the issue.

I am getting this "ERROR in No NgModule metadata found for 'AppModule'." please help me

@nagipogu did you manage to figure it out?

I faced this issue right now and i fixed it.
The Problem was that i had a different name spelling in the exported class varName in the module page file. The app-routing.module is referencing at this exact name in the module what is inserted there. If this both are different, you ll get the error Message : "ERROR in No NgModule metadata found for 'AppModule'.

My Setup:
Ionic:

Ionic CLI : 5.2.2
Ionic Framework : @ionic/angular 4.6.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

NCC1701M picture NCC1701M  ·  3Comments

rwillmer picture rwillmer  ·  3Comments

hartjo picture hartjo  ·  3Comments

IngvarKofoed picture IngvarKofoed  ·  3Comments

rajjejosefsson picture rajjejosefsson  ·  3Comments