-
Notifications
You must be signed in to change notification settings - Fork 12k
"No NgModule metadata found for 'AppModule'" after Upgrade to Angular 5.1.0 and AngularCli 1.6.0 #8798
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
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.
This should fix your issue.
If @angular/cli install fails |
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 |
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 |
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.
After all that New findings:
What I do not understand:
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 |
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 |
I followed the steps quoted from @JinsPeter , and it was good here. my case remove the node_modules folder remove the webpack clean npm cahe install the latest version of angular cli install the dependencies now it's just testing |
This issue seems to be caused by having If you have
|
@filipesilva what about people not using CLI? You have some advice / feedback please? |
@samvloeberghs if you're using |
@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 |
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:
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. |
So I'm having the issue only the first time I fire I've used Git Bash (mingw) and babun (cygwin) on Win10. Update I installed a newer version of typescript and now its working. |
the answer is
|
Same issue with Angular 6:
|
Same error with latest versions:
|
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 |
After upgrading to Angular 6, I encountered the
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?
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 I also created a new application with the 6.0.1 CLI. The |
@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 |
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 |
After much of hair pulling, finally got it working for Angular 6 by adding following in the tsconfig.json "files": [ |
@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: |
Update your
It works fine to me. |
For me, in order to make it compile, i had to add this to
|
I got past this problem by which to me, totally makes zero sense 😬 👍 |
Thanks @175451 |
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. My Setup: Ionic CLI : 5.2.2 |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Versions
Repro steps
@angular
from5.0.2
to5.1.0
@angular/cli
from1.5.2
to1.6.0
ng serve
Observed behavior
After doing the upgrade, the following error arises.
I was able to resolve the issue as described here.
Desired behavior
app.module.ts
, as a developer I don't want to have to take this stepMention any other details that might be useful (optional)
npm i --save-dev webpack
to be able to runng serve
at all (#7334)The text was updated successfully, but these errors were encountered: