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: SampleModule is not an NgModule #3426

Closed
beeman opened this Issue Dec 6, 2016 · 94 comments

Comments

Projects
None yet
@beeman
Contributor

beeman commented Dec 6, 2016

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.

@bgauvey

This comment has been minimized.

bgauvey commented Dec 6, 2016

Same issue on Windows10 x64

@tarlepp

This comment has been minimized.

tarlepp commented Dec 6, 2016

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

@pascaloo7

This comment has been minimized.

pascaloo7 commented Dec 6, 2016

+1

@shaahink

This comment has been minimized.

shaahink commented Dec 6, 2016

same here

@intellix

This comment has been minimized.

Contributor

intellix commented Dec 6, 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 :(

@jkuri

This comment has been minimized.

Contributor

jkuri commented Dec 6, 2016

Had same issue with this and it is related to incompatibility of Angular versions between 2.2.* and
previous versions, so; update https://github.com/beeman/angular-sample-module/blob/master/package.json#L32-L33 to 2.2.3 which you have in your project and this will get compiled.
Summary is that 3rd party libs package.json should have same version of Angular than your project.

@Adrriver

This comment has been minimized.

Adrriver commented Dec 7, 2016

I'm getting this error with 2.2.3 having already been set.

@jkuri

This comment has been minimized.

Contributor

jkuri commented Dec 7, 2016

I tried with an example project that @beeman man provided here and updated package.json in https://github.com/beeman/angular-sample-module and it got compiled.

spend a lot of time too some week ago on real world app and this solved the issue too.

@Adrriver

This comment has been minimized.

Adrriver commented Dec 7, 2016

Interesting. I just installed the latest version of Angular-Cli from Github, and was able to serve the included app. I changed core and common, and received the same error message. After replacing the entire contents with the beeman's sample, and updating core and common versions, I get "must be inside an angular-cli project to use build..." Changing a few parameters to make it more general in it's operation, and removing the main: and typings: declarations didn't help... Anyone have an idea of what's causing this? I'm using node 4.x.x. Thanks.

@MrJuliuss

This comment has been minimized.

MrJuliuss commented Dec 7, 2016

Hello, same issue with 1.0.0-beta.22 on macOS Sierra. And it works fine on 1.0.0-beta.21

@mp3sii

This comment has been minimized.

mp3sii commented Dec 7, 2016

Same thing happened to me 1.0.0-beta.22

@lurock

This comment has been minimized.

lurock commented Dec 7, 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.

@beeman

This comment has been minimized.

Contributor

beeman commented Dec 7, 2016

@lurock I encountered this bug running on TypeScript version 2.0.10:

~/workspace/beeman/angular-sample-app master
❯ grep version node_modules/typescript/package.json
    "version": "2.0.10",

~/workspace/beeman/angular-sample-app master
❯ tsc -v
Version 2.0.10
@Adrriver

This comment has been minimized.

Adrriver commented Dec 7, 2016

@lurock

This comment has been minimized.

lurock commented Dec 8, 2016

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

@beeman

This comment has been minimized.

Contributor

beeman commented Dec 9, 2016

This gives me very similar output.

 ng build --aot
 10% building modules 2/2 modules 0 activeUnexpected value 'SampleModule' imported by the module 'AppModule'
Error: Unexpected value 'SampleModule' imported by the module 'AppModule'
    at /Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:14675:33
    at Array.forEach (native)
    at CompileMetadataResolver._loadNgModuleMetadata (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:14660:51)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:14636:23)
    at addNgModule (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:12944:43)
    at /Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:12957:16
    at Array.forEach (native)
    at _createNgModules (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:12956:28)
    at analyzeNgModules (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:12700:16)
    at analyzeAndValidateNgModules (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:12704:20)
    at OfflineCompiler.compileModules (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler/bundles/compiler.umd.js:12775:20)
    at CodeGenerator.codegen (/Users/beeman/workspace/beeman/angular-sample-app/node_modules/@angular/compiler-cli/src/codegen.js:58:30)
    at /Users/beeman/workspace/beeman/angular-sample-app/node_modules/@ngtools/webpack/src/plugin.js:210:73
    at process._tickCallback (internal/process/next_tick.js:103:7)
@DutchKevv

This comment has been minimized.

DutchKevv commented Dec 9, 2016

Hi everyone,

It has been taking me days to get a 'production' build, cause of all kind of error..

Some are typescript 2.1.1 related, some Angular 2.2.4 and some to the fact of AOT compiling.

Please also take in mind, when building a production build with --aot.. That export default doesn't work!

angular/angular#11402

You can use all the latest versions of everything, and than not use --aot, made it work for me.

@g00glen00b

This comment has been minimized.

g00glen00b commented Dec 9, 2016

Having the same issue after updating a project from Angular CLI 1.0.0-beta.19-3 to the latest (1.0.0-beta.22-1) on macOS Sierra. It appears that the following line is no longer returning anything in node_modules/@ngtools/webpack/src/plugin.js:330:

var ngModules = this._reflector.annotations(staticSymbol).filter(function (s) { return s instanceof core_1.NgModule; });

It looks like the instance of s is not core_1.NgModule.

If I change (monkeypatch) this to the following it works (though probably not the way it should be):

var ngModules = this._reflector.annotations(staticSymbol).filter(function (s) { return s.toString() === "@NgModule" });
@SylTi

This comment has been minimized.

SylTi commented Dec 9, 2016

Same thing here : yuyang041060120/ng2-validation#28

Downgrading to 1.0.0-beta.21 fix the issue

@vadim-shb

This comment has been minimized.

Contributor

vadim-shb commented Dec 11, 2016

The same issue. I am trying to start the sample app (full tour of heroes like here: https://embed.plnkr.co/?show=preview) with angular-cli 1.0.0-beta.22-1. When I remove usage of package angular-in-memory-web-api, the application not stuck in building.

"dependencies": {
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/forms": "2.2.3",
"@angular/http": "2.2.3",
"@angular/platform-browser": "2.2.3",
"@angular/platform-browser-dynamic": "2.2.3",
"@angular/router": "3.2.3",
"angular-in-memory-web-api": "0.1.16",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
}

@avatsaev

This comment has been minimized.

avatsaev commented Dec 11, 2016

Yep, just got bit by this after upgrading typescript to 2.1.4, had to revert back to 2.0.1, which is a bummer, because 2.1.4 has async/await support for es5

@lygstate

This comment has been minimized.

lygstate commented Dec 12, 2016

Also need this.

@mischkl

This comment has been minimized.

mischkl commented Dec 12, 2016

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.

@zawor

This comment has been minimized.

zawor commented Dec 12, 2016

Just a sec ago switched Ubuntu to Win10 and made a ng serve on same source. To my surprise this dragon jumped out of the bushes to bite my arse. On Ubuntu 16.10 it works like a charm. What is more, I have not noticed anyone here from any Linux distro (or no one managed to state it clear enough). So probably it is somehow platform dependent. How? don't know... :P

My setup is pretty much ToH based. Running on:

node: 7.2.1
ng: 2.2.3
ts: 2.1.4
ng-cli: 1.0.0-beta.22-1
@intellix

This comment has been minimized.

Contributor

intellix commented Dec 12, 2016

@filipesilva or @hansl - is this something to do with angular-cli or with each of the projects themselves? Two example external deps which are giving this error for me are:

Would be nice to get your insight to if this is possible to fix in the next version as it's quite painful at the moment :)

@vangorra

This comment has been minimized.

vangorra commented Dec 12, 2016

@zawor

This comment has been minimized.

zawor commented Dec 12, 2016

ok my bad... sorry for confusion... double checked the versions... Ubuntu was running on outdated typescript 2.0.10 not 2.1.4 but Win had fresh 2.1.4. Now they are in sync and both fail in exact same manner...

@expy

This comment has been minimized.

expy commented Feb 28, 2017

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.

@0x1ad2

This comment has been minimized.

0x1ad2 commented Feb 28, 2017

@expy I had it as well, I just updated from BETA to RC. After running an ng build --aot I was able to run ng serve again.

@angular/cli: 1.0.0-rc.0
node: 6.9.1
os: darwin x64
@angular/cli: 1.0.0-rc.0
@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/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8

@Meligy

This comment has been minimized.

Contributor

Meligy commented Feb 28, 2017

@expy try deleting node_modules then:

npm cache clean
npm install

in the project directory.

@expy

This comment has been minimized.

expy commented Feb 28, 2017

@0x1ad2 @Meligy I've tried the above, the problem may lie in a Module that isn't up-to-date with the latest Angular2 / Angular-Cli changes.

I've contacted the owner of the Module for more information.

Thanks for you assistance.

@SylTi

This comment has been minimized.

SylTi commented Feb 28, 2017

@expy isn't using SEMVER suppose to prevent exactly that?

@expy

This comment has been minimized.

expy commented Feb 28, 2017

@SylTi that Module is tested and working on @angular v2.4.1. I upgraded my modules and cli yesterday and this was the only issue.

@rnadler

This comment has been minimized.

rnadler commented Mar 11, 2017

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.

@evansmwendwa

This comment has been minimized.

evansmwendwa commented Mar 11, 2017

Been experiencing this issue in a npm package I am working on and finally managed to fix it by AOT compilation using the ngc compiler.

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile

@bentbot

This comment has been minimized.

bentbot commented Jun 5, 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'}

@maximelafarie

This comment has been minimized.

maximelafarie commented Jun 22, 2017

Still run into this error with Angular 4.2.3 . Fix it with very strange @winfinit trick 😄 (angular-cli 1.1.3)

@kkaabbaa

This comment has been minimized.

kkaabbaa commented Jun 28, 2017

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

@yogeshgadge

This comment has been minimized.

yogeshgadge commented Aug 3, 2017

"skipMetadataEmit": false that was it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment