angular-cli: Error: SampleModule is not an NgModule

OS?

macOS Sierra

Versions.

angular-cli: 1.0.0-beta.22
node: 7.2.0
os: darwin x64

Repro steps.

1. Scaffold new app:

$ ng new angular-sample-app --skip-git --skip-npm --style=scss --inline-template
$ cd angular-sample-app
$ yarn
$ git init
$ git add .
$ git commit -am "Initial commit"

2. Add dependency to angular-sample-module

This source to this module can be found here, and it’s available on npmjs.

$ yarn add angular-sample-module

3. Add new module to AppModule

Edit src/app/app.module.ts
Add dependency: import { SampleModule } from 'angular-sample-module';
Add SampleModule to the imports array
Edit src/app/app.component.ts
Add <sampleComponent></sampleComponent> to the template

4. Start ng serve

$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 2/2 modules 0 active(node:18364) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: SampleModule is not an NgModule
(node:18364) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 20% building modules 84/84 modules 0 active

The log given by the failure.

(node:17462) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: SampleModule is not an NgModule
(node:17462) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Mention any other details that might be useful.

Downgrading to the previous version of angular-cli makes it work:

$ npm install --save-dev angular-cli@1.0.0-beta.21

Link to a sample app showing the issue: https://github.com/beeman/angular-sample-app

Using ng new angular-sample-app without my custom parameters on version 1.0.0-beta.22 and npm install over yarn add yields the same results.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 46
Comments: 95 (20 by maintainers)

Commits related to this issue

downgrade angular cli to fix a bug in cli check https://github.com/angular/angular-cli/issues/3426#issuecomment-266870472 — committed to giovannicandido/angular-spa-example by deleted user 8 years ago
build: change tsconfig.json for build ~> https://github.com/angular/angular-cli/issues/3426#issuecomment-269673735 ~> https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c... — committed to ng-hal/ng-hal by dherges 7 years ago

Most upvoted comments

Isn’t this exactly the kind of thing Angular CLI is supposed to help with, making sure that all of the versions being installed fit with each other? Seems like a big fail atm.

+42

mischkl on Dec 12, 2016

+23

jlabaj on Dec 13, 2016

just ran into this, didnt debug it, but i find it interesting that I am getting this error only after “ng serve”, then if i will modify any file, and web pack reruns, it is not displaying this error anymore

** NG Live Development Server is running on http://localhost:4200. **
Hash: 49cd7d49bb76b083774c                                                               
Time: 9923ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 222 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 15.6 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.71 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in NgSemanticModule is not an NgModule
webpack: Failed to compile.
webpack: Compiling...
Hash: 8d508c11672b2c20762a                                                         
Time: 1783ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 222 kB {4} [initial]
chunk    {1} main.bundle.js, main.bundle.map (main) 15.6 kB {3} [initial]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.71 MB [initial]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: Compiled successfully.

+11

winfinit on Feb 12, 2017

The same error. angular-cli: beta.24. angular: 2.4.1

Kupstas on Dec 22, 2016

Been getting this in a few places. I was convinced it was my code but after trying to give it TS directly and seeing everyone complain here, I’m happy it’s not just me. Probably spent a minimum of 10hrs here 😃 It doesn’t seem to be very debuggable which is my issue. It just says: X is not an NgModule and it’s not even possible to see WHY or how it’s even trying to load stuff. I don’t even have the ability to pass in module-resolutions parameters to typescript to try and see what it’s trying to load which makes this a bitch 😦

intellix on Dec 6, 2016

Yeah I can also confirm that updating angular-cli to 1.0.0-beta.22-1 causes this problem. Any solutions ?

tarlepp on Dec 6, 2016

@beeman there was a lot of reports of different issues here. It’s extremely hard to follow and I’ll close more of those.

For your original issue; https://unpkg.com/angular-sample-module@0.1.2/ shows that you’re missing .metadata.json and use an old version. You’re also using typings, which is not recommended anymore and been replaced by @types/. Follow this guide for AOT: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html (basically run ngc instead of tsc to compile your files, with some more options to skip ngfactory generation).

Here’s a full guide on how to make Angular2 component library: https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

Cheers!

hansl on Dec 29, 2016

Same issue on Windows10 x64

bgauvey on Dec 6, 2016

Is angular core team supporting this project, because they should. It seems like angular-cli is having a hard time keeping up, shame because it’s a great tool.

avatsaev on Dec 12, 2016

I have the same issue as many others in here,but I found a quick workaround until this bug gets fixed - if you have a smaller app like I do,:

try identifying the module which is not getting compiled,
comment it out in the @ngModule,
do the ng serve
if it passes the build, remove the comment on live, and it works…

It’s a pain in the ***, so hopefully this will be fixed soon.

Cheers

brtka on Dec 13, 2016

Please see ERROR in PasswordStrengthBarModule is not an NgModule.

The interesting twist here is that ng serve initially fails with this error, but a rebuild is successful! This is reproducible and is not resolved with the different typescript/angular-cli versions mentioned in this thread.

rnadler on Mar 11, 2017

I got mine to work by changing "angular-cli" to "1.0.0-beta.15".

Was having different errors but appears to be building and serving now.

edit: My deps:

  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angular-cli": "1.0.0-beta.15",
    "body-parser": "1.15.2",
    "cookie-parser": "^1.4.3",
    "core-js": "2.4.1",
    "immutable": "^3.8.1",
    "jsonwebtoken": "7.1.9",
    "lodash": "4.17.2",
    "moment": "^2.15.2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "ava": "^0.17.0",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "supertest": "^2.0.1",
    "ts-node": "1.2.1",
    "typescript": "2.0.2",
    "webpack": "^2.1.0-beta.22"
  }

asBrettisay on Dec 14, 2016

Getting this error as well now.

Using:

@angular/cli: 1.0.0-rc.0 node: 7.2.1 os: darwin x64 @angular/common: 2.4.8 @angular/compiler: 2.4.8 @angular/core: 2.4.8 @angular/forms: 2.4.8 @angular/http: 2.4.8 @angular/platform-browser: 2.4.8 @angular/platform-browser-dynamic: 2.4.8 @angular/router: 3.4.7 @angular/cli: 1.0.0-rc.0 @angular/compiler-cli: 2.4.8

Also, this error occurs even when running “ng serve”, however, after the initial error, when I make changes to the code and save, the code does compile properly and runs. This error only occurs on first run of “ng serve”.

Finally, cannot perform “ng build --prod” because of this error.

expy on Feb 28, 2017

Upgrading to @angular/compiler-cli@2.4.2 worked for me.

PierreDuc on Jan 7, 2017

(been added to the thread by @mhmo91)

Guys, those using TypeScript 2.1 please note that this is currently not supported because there are issues with TypeScript 2.1 and Angular itself, not just the CLI.

Those still having the issue with TypeScript 2.0 (ideally the default TypeScript and Angular packages that come with Angular CLI beta.24), can you please share a repository containing a simple Angular CLI generated project that has this issue?

Thanks a lot.

Meligy on Dec 23, 2016

"skipMetadataEmit": false that was it.

yogeshgadge on Aug 3, 2017

argh… forgot about the change… nevertheless:

$ ng -v
@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.24]
node: 7.2.1
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/compiler-cli: 2.4.7
@angular/cli: 1.0.0-beta.32.3

and

$ nr serve

runs without this pesky error as well… So as Great Joe from the Church of Joe used to say… Cheers and beers! 😉

zawor on Feb 18, 2017

Thanks a lot for your detailed reply @hansl, I appreciate it.

I’ll update my components according to the library and post my updated (working) module here as a reference for future visitors.

Thanks for your work on angular-cli!

beeman on Dec 29, 2016

With angular-cli version 1.0.0-beta.24 I’m still seeing an error: ERROR in SampleModule is not an NgModule in the terminal window and my browser console, but at least the app runs, which is an improvement already 👍🏻 .

@hansl is this something that will be fixed in angular-cli or do 3rd-party modules need to update something to prevent this error from happening?

beeman on Dec 24, 2016

With angular-cli beta.24 and typescript 2.1.4 I got the same error, but when downgraded only the typescript to version 2.0.10 the error was gone.

rpicone on Dec 22, 2016

Try building your project using “ng build --aot” and fix any build errors you have then go back to running “ng serve”.

lurock on Dec 8, 2016

It seems like typescript@2.1.1 is causing the issue. Downgrading to 2.0.10 seems to make it pick up the metadata correctly.

lurock on Dec 7, 2016

i compiled library with ngc For me issue is set options "skipMetadataEmit": false in file tsconfig.aot.json

kkaabbaa on Jun 28, 2017

I was able to resolve this error by modifying my app.routes. I removed the hashtag reference to internal components on loadChildren routes.

{ path: '/modules', loadChildren: 'app/modules/modules.module#ModulesComponent'} TO { path: '/modules', loadChildren: 'app/modules/modules.module'}

bentbot on Jun 5, 2017

@thekalinga this is how my package.json looks after the upgrade

"dependencies": {
    "@angular/common": "~2.4.4",
    "@angular/compiler": "~2.4.4",
    "@angular/core": "~2.4.4",
    "@angular/forms": "~2.4.4",
    "@angular/http": "~2.4.4",
    "@angular/platform-browser": "~2.4.4",
    "@angular/platform-browser-dynamic": "~2.4.4",
    "@angular/router": "~3.4.4",
    "core-js": "^2.4.1",
    "ng2-date-picker": "^0.2.1",
    "ng2-file-upload": "^1.2.0",
    "ng2-smart-table": "^0.5.0",
    "rxjs": "5.0.3",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "^2.2.30",
    "@types/node": "^7.0.3",
    "angular-2-dropdown-multiselect": "^0.4.0",
    "angular-cli": "1.0.0-beta.19-3",
    "codelyzer": "2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.4.0",
    "protractor": "5.0.0",
    "ts-node": "2.0.0",
    "tslint": "4.3.1",
    "typescript": "latest",
    "awesome-typescript-loader": "latest",
    "webdriver-manager": "11.1.1"
  }```

CanKer on Jan 24, 2017

FYI, it now works with latest Angular and CLI with the following dependencies:

  "dependencies": {
    "@angular/common": "2.4.4",
    "@angular/compiler": "2.4.4",
    "@angular/core": "2.4.4",
    "@angular/forms": "2.4.4",
    "@angular/http": "2.4.4",
    "@angular/platform-browser": "2.4.4",
    "@angular/platform-browser-dynamic": "2.4.4",
    "@angular/router": "3.4.4",
    "angular2-jwt": "^0.1.28",
    "core-js": "^2.4.1",
    "d3": "^4.4.2",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "ng2-toasty": "^2.2.2",
    "rxjs": "^5.0.3",
    "semantic-ui": "^2.2.7",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.4",
    "@types/d3": "^4.4.1",
    "@types/jasmine": "2.5.41",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.26",
    "awesome-typescript-loader": "3.0.0-beta.18",
    "codelyzer": "~2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.4.0",
    "protractor": "~5.0.0",
    "ts-node": "2.0.0",
    "tslint": "^4.3.1",
    "typescript": "~2.1.5",
    "webdriver-manager": "11.1.1"
  }

martinnormark on Jan 20, 2017

Pushing back the version of angular-cli to 1.0.0-beta.21 works for me - even with latest versions of Typescript, Angular and compiler-cli:

  "dependencies": {
    "@angular/common": "2.4.2",
    "@angular/compiler": "2.4.2",
    "@angular/core": "2.4.2",
    "@angular/forms": "2.4.2",
    "@angular/http": "2.4.2",
    "@angular/platform-browser": "2.4.2",
    "@angular/platform-browser-dynamic": "2.4.2",
    "@angular/router": "3.4.2",
    "angular2-jwt": "^0.1.28",
    "core-js": "^2.4.1",
    "d3": "^4.4.1",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "ng2-toasty": "^2.2.2",
    "rxjs": "^5.0.3",
    "semantic-ui": "^2.2.7",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.2",
    "@types/d3": "^4.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.21",
    "awesome-typescript-loader": "3.0.0-beta.17",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.1.4",
    "webdriver-manager": "10.2.5"
  }

martinnormark on Jan 9, 2017

Unfortunately upgrading to ngcli beta 24, typescript 2.1.4 and angular to 2.4.2 didn’t solve my problem - still get the “NgSemanticModule is not an NgModule” error.

Any ideas left?

guentherwieser on Jan 8, 2017

Ok figured it out, at least in our case. We publish the .module.metadata.json in our lib folder (the transpiled output of ngc). However the CLI is trying to import stuff from src. Presumably for tree-shaking reasons.

I don’t love having to include generated code mixed up in my source tree TBH. But if I have to I have to 😃

SethDavenport on Dec 27, 2016

Hello. I have this error today, after I updated angular to 2.4.1. Today I saw many errors, and “AppModule is not an NgModule”, and “cannot read property codegen” and so on. Then I changed my package.json to previous state (worked state), and now I’m getting an error “AppModule is not an NgModule”. A current package.json is { angular: 2.2.3, router: 3.2.3, “@ngtools/webpack”: “1.1.9”, “typescript”: “2.0.10”, “webpack”: “2.1.0-beta.25” }

and this is not working. Changing 2.2.3 to 2.2.4 not solve this problem.

ichent on Dec 26, 2016

angular-cli 1.0.0-beta.24 and angular 2.4.1.

When I use the ‘default’ keyword to export my module (export default class TheformModule {} )

“ng build --aot” or “ng build”

WARNING in ./src/$$_gendir/app/app.module.ngfactory.ts 609:37 export ‘TheformModule’ (imported as ‘import26’) was not found in ‘…/…/app/theform/theform.module’

WARNING in ./src/$$_gendir/app/app.module.ngfactory.ts 696:23 export ‘TheformModule’ (imported as ‘import26’) was not found in ‘…/…/app/theform/theform.module’

ERROR in default is not an NgModule

And Without the ‘default’ keyword “ng build” :

ERROR in default is not an NgModule

microSoftware on Dec 26, 2016

@Meligy Thankkk uuu, i believe it’s up to the owner of the module to look the problem up. Although i must raise a concern to everyone, This module along with others was working fine with previous builds of ng-cli, and now i’m worried that with every update some modules will just stop working, the whole idea behind the new ng2 design patterns is to embrace external modules n components… now this is just a nightmare with each new ng-cli version as some might just stop working!!!

mhmo91 on Dec 23, 2016

try beta 24. The issue has disappeared for me

the-destro on Dec 21, 2016

@asBrettisay, this worked for me. I was getting this error with ng2-flex-layout. Downgrading from angular-cli@1.0.0-beta.22 to angular-cli@1.0.0-beta.15 did the trick!

jmccannster on Dec 16, 2016

@vangorra This is something to do with the thirdparty library. They are not statically analyzable; basically they don’t publish metadata.json files which we need to understand their modules or components.

We’re working on showing at least a warning and not failing the compilation when that happens.

ng serve itself blocks because of https://github.com/webpack/webpack/issues/3464, which will be fixed before webpack RC1.

hansl on Dec 12, 2016