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

[evolkmann]

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)

[JinsPeter]

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.

[mattytommo]

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

[emilio-martinez]

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

[trickeyone]

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.

[evolkmann]

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

[evolkmann]

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"

4. npm cache clear --force
5. npm cache verify
6. npm install
7. 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)

8. npm uninstall webpack
9. 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

[evolkmann]

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.

[JinsPeter]

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

[trickeyone]

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

[willisd2]

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.

[dan-overton]

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.

[Skuriles]

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