angular-cli: "ERROR in No NgModule metadata found for 'AppModule'." when upgrading to Angular CLI 6.x

Versions

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.10
@angular-devkit/build-angular     0.5.10
@angular-devkit/build-optimizer   0.4.9
@angular-devkit/core              0.5.10 (cli-only)
@angular-devkit/schematics        0.5.10 (cli-only)
@angular/cdk                      5.2.5
@angular/cli                      6.0.0-rc.7
@angular/material                 5.2.5
@angular/platform-server          5.2.10
@ngtools/json-schema              1.2.0
@ngtools/webpack                  6.0.0-rc.8
@schematics/angular               0.5.10 (cli-only)
@schematics/update                0.5.10
rxjs                              5.5.10
typescript                        2.8.3
webpack                           4.6.0

Repro steps

  • Installed 6.0.0-rc.5
  • Migrated project from 1.7.4 with RC5, command ng update @angular/cli --migrate-only -from=1 as suggested by the installer
  • Tried to run ng serve
  • Got error “ERROR in No NgModule metadata found for ‘AppModule’.”
  • Tried to upgrade to rc7
  • Serve still gives same error

Observed behavior

ng serve produces

Date: 2018-04-28T15:41:34.299Z
Hash: bfbd0778795913efc41e
Time: 10484ms
chunk {main} main.js, main.js.map (main) 1.95 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 694 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.13 MB  [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.93 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in No NgModule metadata found for 'AppModule'.
i ｢wdm｣: Failed to compile.

Desired behavior

I expected the compiler to compile my project without errors as it did with 1.7.4

Mention any other details that might be useful (optional)

In this report my typescript version was unsupportedly high, but I get the same error after running: npm install typescript@'>=2.4.2 <2.7.0'

angular.json: { "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "Paperi 0": { "root": "", "projectType": "application", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ { "glob": "**/*", "input": "src/assets", "output": "/./assets" }, { "glob": "favicon.ico", "input": "src", "output": "/" } ], "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/font-awesome/css/font-awesome.css", "node_modules/froala-editor/css/froala_editor.pkgd.min.css", "node_modules/lightbox2/dist/css/lightbox.min.css", "node_modules/ng2-dnd/bundles/ng2-dnd.umd.js" ], "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.js", "node_modules/froala-editor/js/froala_editor.pkgd.min.js", "node_modules/lightbox2/dist/js/lightbox.min.js", "node_modules/crypto-js/crypto-js.js" ] }, "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "Paperi 0:build" }, "configurations": { "production": { "browserTarget": "Paperi 0:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "Paperi 0:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "./karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.js", "node_modules/froala-editor/js/froala_editor.pkgd.min.js", "node_modules/lightbox2/dist/js/lightbox.min.js", "node_modules/crypto-js/crypto-js.js" ], "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/font-awesome/css/font-awesome.css", "node_modules/froala-editor/css/froala_editor.pkgd.min.css", "node_modules/lightbox2/dist/css/lightbox.min.css", "node_modules/ng2-dnd/bundles/ng2-dnd.umd.js" ], "assets": [ { "glob": "**/*", "input": "src/assets", "output": "/./assets" }, { "glob": "favicon.ico", "input": "src", "output": "/" } ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [] } } } }, "Paperi 0-e2e": { "root": "", "projectType": "application", "cli": {}, "schematics": {}, "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./protractor.conf.js", "devServerTarget": "Paperi 0:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ], "exclude": [] } } } } }, "cli": {}, "schematics": { "@schematics/angular:component": { "prefix": "app", "styleext": "scss" }, "@schematics/angular:directive": { "prefix": "app" } } }

package.json: { "name": "nordic-sounds", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build-newspaper-1": "ng build --prod --build-optimizer -aot --base-href /dev/sanomalehti-demo/", "serve-nordic-sounds": "ng serve --app nordic-sounds", "build-nordic-sounds": "ng build --prod --app nordic-sounds --output-path ./dist/nordic-sounds", "build-nordic-sounds-beta": "ng build --prod --app nordic-sounds --base-href /beta/ --output-path ./dist/nordic-sounds-beta", "serve-sanomalehti-demo": "ng serve --app sanomalehti-demo", "build-sanomalehti-demo": "ng build --prod --build-optimizer --app sanomalehti-demo --base-href /dev/sanomalehti-demo/ --output-path ./dist/sanomalehti-demo", "bundle-report-sanomalehti-demo": "webpack-bundle-analyzer dist/sanomalehti-demo/stats.json", "sourcemaps-sanomalehti-demo": "ng build --prod --sourcemaps --app sanomalehti-demo --base-href /dev/sanomalehti-demo/ --output-path ./dist/sanomalehti-demo" }, "private": true, "dependencies": { "@angular/animations": "5.2.8", "@angular/cdk": "^5.2.5", "@angular/common": "5.2.8", "@angular/compiler": "5.2.8", "@angular/core": "5.2.8", "@angular/forms": "5.2.8", "@angular/http": "5.2.8", "@angular/material": "^5.2.5", "@angular/platform-browser": "5.2.8", "@angular/platform-browser-dynamic": "5.2.8", "@angular/platform-server": "^5.2.10", "@angular/router": "5.2.8", "@ng-bootstrap/ng-bootstrap": "^1.1.2", "@types/crypto-js": "^3.1.39", "@types/smoothscroll-polyfill": "^0.3.0", "ajv": "^6.4.0", "angular-2-local-storage": "^1.0.1", "angular-froala-wysiwyg": "^2.8.1", "angular2-lightbox": "^1.3.0", "angular2-tooltips": "^1.0.10", "bootstrap": "^4.1.0", "classlist.js": "^1.1.20150312", "core-js": "^2.5.5", "crypto-js": "^3.1.9-1", "dom-to-image": "^2.6.0", "font-awesome": "^4.7.0", "lightbox2": "^2.9.0", "mammoth": "^1.4.5", "md-tooltip": "0.0.1-alpha.1", "ng2-component-spinner": "^0.2.1", "ng2-dnd": "^5.0.2", "ng2-file-upload": "^1.3.0", "ng2-scroll-to-el": "^1.2.1", "ngx-bootstrap": "^1.9.1", "ngx-contextmenu": "^4.2.0", "popper": "^1.0.0", "popper.js": "^1.14.3", "raf": "^3.4.0", "rxjs": "^5.5.10", "smoothscroll-polyfill": "^0.4.3", "tether": "^1.4.4", "web-animations-js": "^2.3.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.5.0", "@angular-devkit/build-optimizer": "^0.4.9", "@angular/cli": "^6.0.0-rc.7", "@angular/compiler-cli": "5.2.8", "@types/jasmine": "2.5.38", "@types/node": "^6.0.106", "codelyzer": "^4.3.0", "froala-editor": "^2.8.1", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "node-sass": "^4.9.0", "protractor": "^5.3.1", "raw-loader": "^0.5.1", "sass-loader": "^6.0.7", "source-map-explorer": "^1.5.0", "ts-node": "~2.0.0", "tslint": "^5.9.1", "typescript": "^2.8.3", "webpack-bundle-analyzer": "^2.11.1" } }

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 9
  • Comments: 31

Commits related to this issue

Most upvoted comments

A workaround for this is add the app.module.ts to the files array in your tsconfig.app.json

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

You can then run ng build and ng serve without getting the error

+49
codingbadger on Jun 7, 2018

I solve the issue, in the file main.ts, I remove this part .catch(err => console.error(err)); and the final line is just: platformBrowserDynamic().bootstrapModule(AppModule);

+9
JuanEstebanKatz on Apr 18, 2019

I started having the same error after upgrading to Angular 6. It happens when I build production. The issue on my side seems to be related to enabling aot and buildOptimizer. When these are enabled, I get the issue. When I disable these two, the problem disappear. Here is my configuration:

"prod": {
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
}
+4
rafidka on May 21, 2018

Another confirmation that the workaround suggested by @codingbadger works on windows

thank you @codingbadger , spent hours on this issue and was about to abandon our upgrade to angular 6.

Hope they fix this soon

+2
richardscholten73 on Jul 11, 2018

Hey Guys, I just added this line "baseUrl": "../node_modules", on the tsconfig.app.json file under compilerOptions… It worked fine for me with that…

"compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "../node_modules",
    "types": []
  } ...

You can see it here: https://github.com/angular/angular-cli/issues/10837

+1
cartifon on Oct 29, 2018

I’m having this issue on a Angular 6 to Angular 7 upgrade.

UPDATE: After upgrading to Node 10 from 9, and implementing the install using the old npm install method, instead of ngUpdate, I got a successful build.

+1
largeDachshund on Oct 21, 2018

@Airblader @richardscholten73 I can confirm that upgrading my nodejs version to 9.x and removing my node_modules folder, the lock file and doing a clean npm i did solve the problem. I’m on Windows 8.1

I’m on the latest Angular CLI version, TS 2.8.4

+1
maartentibau on Jul 18, 2018
Read more comments on GitHub
← angular-cli: Error in multi styles
angular-cli: ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_ modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"source Map":false}!./node_modules/bootstrap/dist/css/bootstrap.css →