Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"ERROR in Error: No NgModule metadata found for 'AppModule'." After Angular 5.2.1 and CLI 1.6.5 update #9292

Closed
jtsom opened this issue Jan 19, 2018 · 43 comments
Labels
area: devkit/build-angular needs: repro steps We cannot reproduce the issue with the information given

Comments

@jtsom
Copy link
Contributor

jtsom commented Jan 19, 2018

Versions

Angular CLI: 1.6.5
Node: 9.4.0
OS: darwin x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.0
@angular/cli: 1.6.5
@angular/material: 5.1.0
@ngtools/json-schema: 1.1.0
typescript: 2.5.3
webpack: 3.10.0

Repro steps

  • Update npm packages
  • Update CLI
  • Start app - ng s

Observed behavior

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/compiler/bundles/compiler.umd.js:20277:23)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/compiler/bundles/compiler.umd.js:15230:60)
    at visitLazyRoute (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/compiler/bundles/compiler.umd.js:31169:104)
    at AotCompiler.listLazyRoutes (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/compiler/bundles/compiler.umd.js:31137:20)
    at AngularCompilerProgram.listLazyRoutes (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (/Users/John/Dev/Javascript/Angular/FRC-TimeTracker/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:565:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

Desired behavior

App run normally

Mention any other details that might be useful (optional)

Application built and ran just fine before update.

Did try rm -rf node_modules and reinstall, no change.

@keyant
Copy link

keyant commented Jan 20, 2018

I have faced same error. solved it: clean and reinstall global angular-cli and local angular.

@hassaniftikhar
Copy link

@keyant
can you put steps

@keyant
Copy link

keyant commented Jan 20, 2018

steps:
cd to project directory

sudo npm uninstall -g @angular/cli
sudo npm cache verify
sudo npm install -g @angular/cli@latest
rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install

sudo npm update -D && sudo npm update -S
sudo npm install typescript@'>=2.4.2 <2.7.0'

@vupham2909
Copy link

Tried @keyant 's steps but still got the error No NgModule metadata found for 'AppModule'

@ottosson
Copy link

I get this error seemingly random. Can't really see that I've changed anything and suddenly it just stops working and throws that error.

As an example: I had a branch in Visual Studio Team Services that built correctly, and when I re-queued the same build, without any changes, the build didn't work anymore...

@FA-tvonmoll
Copy link

What happens if you upgrade typescript to 2.6.0?

@wuzhen0808
Copy link

Got the same error, in my case it is caused by an import statement:
import NgModule = core.NgModule;

For instance following code report error when build.

import core = require("@angular/core");
import NgModule = core.NgModule;
@NgModule( {....})
export class AppModule {}

And the error is gone if rewrite the code like below:
import core = require("@angular/core");
@core.NgModule( {....})
export class AppModule {}

@Albejr
Copy link

Albejr commented Jan 24, 2018

Unbelievable! It works after just editing any ".ts" file.

cli

@hansl
Copy link
Contributor

hansl commented Jan 24, 2018

Hi @jtsom and @Albejr,

Could you provide a project we can use to reproduce this? A github repo would be great.

@hansl hansl added needs: repro steps We cannot reproduce the issue with the information given type: bug/fix P5 The team acknowledges the request but does not plan to address it, it remains open for discussion severity2: inconvenient workaround2: non-obvious labels Jan 24, 2018
@ottosson
Copy link

ottosson commented Jan 26, 2018

@Albejr which commit covers this problem?

https://github.com/angular/angular-cli/releases/tag/v1.6.6

  • @angular/cli: add karma-cli as dependency when ejecting (f17c2b3)
  • @angular/cli: allow colon separated schematic name in generate (f9a9d75)
  • @angular/cli: allow for schema-less schematics to be generated (d4dc2e3)
  • @angular/cli: delete node_modules on eject e2e (5c00e1f)
  • @angular/cli: eject now remove all hardcoded paths (53e84fe), closes ng eject uses hardcoded project root #9335
  • @angular/cli: exclude nodejs built-ins from process.cwd() resolve (bf87508)
  • @angular/cli: maintain autoprefixer backward compatibility (0f82564)
  • @angular/cli: only force CommonJS if module kind is ES2015 (369f361)
  • @angular/cli: replaced bullet character due to unwanted beeping sounds on windows systems (38db84c)

@filipesilva filipesilva added comp: cli/build and removed P5 The team acknowledges the request but does not plan to address it, it remains open for discussion severity2: inconvenient type: bug/fix workaround2: non-obvious labels Jan 31, 2018
@bytech-ca
Copy link

bytech-ca commented Feb 12, 2018

Had the same experience earlier as Albejr, but with forEach. TS would fail to compile the code saying something like 'foreach is not a method of '... but if I left the hang compiler stuck, and changed and saved any TS file, the compile on top of the failed one would work.

In other words, I could never run the program on the first compile. I got around it in other ways (sounds like foreach can have unpredictable results, so TS doesn't like it and so I moved to other means). The compiler behaviour made troubleshooting a problem more difficult...

Using cli 1.6.7 I experienced the 'first compile fails' problem too. It was using the CoreUI framework which I'm still new to... before I could really test the problem, it went away. Perhaps a cache issue or something else, but the symptoms were exact as in my earlier case and as Alberjr describes. Something might still not be fully resolved on this front with 1.6.7...

@captivea-yho
Copy link

captivea-yho commented Feb 13, 2018

@x2361
You are incredible, it works with your workaround.
Even with @angular/cli Version 1.6.6 does not work

@ghost
Copy link

ghost commented Feb 13, 2018

I still have this problem with angular 5.2.4 and cli 1.6.7. I did npm cache clean --force, rm -rf node modules and package lock, remove webpack from package.json, fresh npm install and build. Still the problem persists.

@vapits
Copy link

vapits commented Feb 14, 2018

Update typescript of project to 2.6.2 solved it for me.

npm install --save-dev typescript@2.6.2.

Took sooooo much time to figure out as the solution of deleting cli and cache and reinstalling them was working only partially.

@tingtingli911
Copy link

@vapits this solved my problem, excellent !

@prasoon-tare
Copy link

i also faced this error can any one give solution

@hnmmallesh
Copy link

OMG i can't believe @Albejr solution worked for me.

@csrssrinivas
Copy link

csrssrinivas commented Apr 23, 2018

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

  • npm remove webpack
  • npm install webpack@3.11.0

@achmedzhanov
Copy link

I have same problem ...

I solved this problem only when remove globaly installed webpack.

npm uninstall -g webpack

@Liowag
Copy link

Liowag commented Apr 24, 2018

I had the same problem (and the same effect, that the error went away when I edited any .ts file) and the problem was that I imported a module that was already exported via another imported module, like this (where FooSubModule is exported by FooModule):

imports: [
        BrowserModule,
        FooModule,
        FooSubModule
    ],

It's strange in how many different cases this error message appears. More detailed error messages would be highly appreciated.

@pumpersonda
Copy link

pumpersonda commented Apr 24, 2018

I had a similar problem, but my problem was the name of the module when I was trying to load the module with lazy load. The first letter was in lowercase.

path/to/projects.module#projectsModule

so I changed it like this and it works:
path/to/projects.module#ProjectsModule

@czetsuya
Copy link

In my case, what caused the problem was a wrongly defined module. I created a SecuredModule and lazy load that module. But I forgot that when you create a module in cli, it will also append the Module word. But sadly this error does not popup in 1.7.x version, instead I have to downgrade to 1.6.x to be able to figure out the problem.

@aelkoussy
Copy link

In my case, solved by deleting the node_modules folder , then running:
npm i

@huyinghuan
Copy link

I have the same issue when i update angular 2.x -> 6.x . I delete the package-lock.json and reinstall node_modules, it work fine now

@xclayl
Copy link

xclayl commented Jun 30, 2018

For me, I had an APP_INITIALIZER function/factory where the function was not "export"ed. Once I exported the function, it started working again.

@sri15941
Copy link

Hi
I have faced same error please solve it

compiler.js:11792 Uncaught Error: No NgModule metadata found for 'AppModule'.
at NgModuleResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.NgModuleResolver.resolve (compiler.js:11792)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10429)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:22567)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22508)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4285)
at Object../src/app/app.module.ts (app.module.ts:141)
at webpack_require (bootstrap:76)
at Object../src/main.ts (environment.ts:15)

@ThongNguyen165
Copy link

sudo npm install typescript@'>=2.4.2 <2.7.0'
Worked

@JackHitcher
Copy link

@Albejr your solution worked for me as well.

Even programming languages works with horoscope magics!!!!

@madbonez
Copy link

@Albejr wth?? how i can llive now with this... helps me too! but its looks bad

@madbonez
Copy link

huge black box and no 'eject' available.. dance with a red eyes and daemons. sorry i am stucked for a while)

@ramvirsingh
Copy link

can you post your 'tsconfig.app.json'

@benwinding
Copy link

ng update @angular/cli

Worked for me

@michahell
Copy link

After having tried everything related to NPM, 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 😬 👍

@raphaelcrv
Copy link

Unbelievable! It works after just editing any ".ts" file.

cli

Same problem as @Albejr tks for the temp workaround

This thinks make my job a special job, it's pretty like y car not start for a engine problem and y open and close the door and the car start work again. LOL

@zzmmbb
Copy link

zzmmbb commented Sep 12, 2018

难以置信的!只需编辑任何“.ts”文件即可。

CLI

me too

@westonpace
Copy link

I ran into this exact error. One of the angular modules I was importing (my own custom module) was being built with ng-packagr and was not exporting all of its services in public_api.ts. After adding those services to public_api.ts and reinstalling the module this error went away.

@qmphan
Copy link

qmphan commented Oct 31, 2018

I upgraded my project to Angular7 yesterday and have spent almost a day trying all possible solution but nothing works. I keep seeing thie message ERROR in No NgModule metadata found for 'AppModule'.

The error happens after the success compilation of all assets. Changes made to tsconfig.json doesn't seem to affect the result in any way.

ng build --project=admin --no-progress

Date: 2018-10-31T09:01:37.961Z
Hash: c852709f74070d0f5f6c
Time: 40952ms
chunk {main} main.js, main.js.map (main) 643 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 105 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 232 kB  [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.62 MB [initial] [rendered]

ERROR in No NgModule metadata found for 'AppModule'.

@alex7egli
Copy link

alex7egli commented Nov 22, 2018

Just got this error, I'm on Windows 10. I upgraded angular-cli, core, and material to v7 to try out a new feature. Then I needed to switch to a branch that was still on v6 of everything. I did the following:

  1. deleted node_modules
  2. switched to the branch
  3. did npm install
  4. uninstalled angular-cli globally
  5. install angular-cli at the same version that branch had set in package.json globally
  6. ran ng build
    Got the error "ERROR in No NgModule metadata found for 'AppModule'.". Editing a ts file does not fix it. I don't understand, none of my code has changed, how can the cli just randomly stop working?

I even tried cloning the project into a new directory, doing npm install and then ng build, and got the same error.

UPDATE
Fixed now. I saw that the original npm install had only installed a subset of angular libraries for some reason. I uninstalled angular-cli globally, did npm cache clean --force, re-installed angular-cli globally at the exact version specified in my package.json, then did npm install again, and this time it worked and now I can build.

@alan-agius4
Copy link
Collaborator

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

@Surya4DevOps
Copy link

Surya4DevOps commented Jan 26, 2019

Unbelievable! It works after just editing any ".ts" file.

cli

This worked for me, Thanks a ton @Albejr, you saved my day.

@aboudard
Copy link

Hello !
I had the same issue, but it was related to a tsconfig.json.
I'm testing cypress, and I did put a config in the root tsconfig file :

"include": ["./node_modules/cypress"]

I removed it, following cypress recommendations, havint a file in the dedicated /cypress folder with that kind of content :

{
"extends": "../tsconfig.json",
"include": [
"integration/.ts",
"support/
.ts",
"../node_modules/cypress"
]
}

And now it does compile !
Hope that can help anyone.

@moi12fre
Copy link

Unbelievable! It works after just editing any ".ts" file.

cli

@Albejr thank you very much bro!

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: devkit/build-angular needs: repro steps We cannot reproduce the issue with the information given
Projects
None yet
Development

No branches or pull requests