ERROR in ** is not an NgModule

Question

I have this NgModule:

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        SP21LoadingBar
    ],
    declarations: [SP21LoadingBar]
})
export class SP21LoadingBarModule { }

The Cli ist telling me

ERROR in SP21LoadingBarModule is not an NgModule

Please notice: If i take the code and put it into my project it works fine. But as soon as I take the module (and component) out of my project and put it into a npm package, i get that error.

Angular is used in 2.3.1, Angular CLI 1.0.0-beta.24, Typescript 2.0.10

I am having the same error with @angular/* 2.4.2, angular-cli 1.0.0-beta.25-5, and typescript 2.1.4. Works fine if included directly, throws the "is not an NgModule" error if moved into an npm package. The maddening thing is that I've verified that the NgModule metadata is properly affixed to the module definition! — Kevin Nielsen, Jan 16 '17 at 18:17

score 4 · Accepted Answer · answered Feb 08 '17 at 10:00

The FINAL solution:

You must compile your library using the Ahead-Of-Time compiler (ngc). It will add some metadata that allos the project that includes the library to read it.

Please, have a look on the follow links:

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464#.9y88ipdk7

score 1 · Answer 2 · answered Jan 30 '17 at 20:11

1

You must use ngc (@angular/compiler-cli) to compile your library, as opposed to using tsc directly. Is this the case for you?

answered Jan 30 '17 at 20:11

Jose Enrique

609
6
10

Thank you. I did not find that information anywhere that i have to use the angular compiler. Didn't even really knew it existed. – Stefan S Feb 02 '17 at 14:04
Me neither. Took me quite a while to figure that out. – Jose Enrique Feb 02 '17 at 23:30

Lupe · Answer 3 · 2017-02-01T13:39:43.787

It works using the follow dependencies:

{
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.0",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular2-material/button": "^2.0.0-alpha.8-2",
    "@angular2-material/card": "^2.0.0-alpha.8-2",
    "@angular2-material/checkbox": "^2.0.0-alpha.8-2",
    "@angular2-material/core": "^2.0.0-alpha.8-2",
    "@angular2-material/icon": "^2.0.0-alpha.8-2",
    "@angular2-material/radio": "^2.0.0-alpha.8-2",
    "@angular2-material/slider": "^2.0.0-alpha.8-2",
    "@angular2-material/tooltip": "^2.0.0-alpha.8-2",
    "@types/google-maps": "3.1.28",
    "angular-sample-module": "^0.1.2",
    "angular2-highcharts": "^0.3.3",
    "atob": "^2.0.3",
    "autopulous-xdom": "^1.0.4",
    "bootstrap": "^3.3.7",
    "btoa": "^1.1.2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "highcharts": "^5.0.0",
    "jszip": "^3.1.3",
    "ng2-bootstrap": "^1.1.16-9",
    "primeng": "^1.0.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "xml2js": "0.4.17",
    "xml2js-es6-promise": "1.1.1",
    "zone.js": "^0.7.2"   },   "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "2.5.38",
    "@types/jszip": "0.0.31",
    "@types/node": "^6.0.62",
    "@types/pako": "^0.2.31",
    "@types/xml2js": "0.0.32",
    **"angular-cli": "1.0.0-beta.21",**
    "angular-ide": "^0.9.10",
    "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.0.3"   }
}

I'd say that the problems is on the Angular CLI newest versions. Also the project where the HelloWorld module is defined (the library) is not build using Angular CLI. I've created it based on the follow example: https://www.npmjs.com/package/angular-sample-module

Nevertheless, the "is not an NgModule" message appears when using Angular CLI versions biggers than angular-cli@1.0.0-beta.21

Older CLI versions simply don't checkt it, as far as i know. — Stefan S, Feb 02 '17 at 14:04
To solve the issue in newest CLI versions. (I've just checked with Angular CLI1.0.0-beta.29). You must to delete node_modules when linking the package. Otherwise the orignial dev librarys are used in the new project and the conflict produces the message. — Lupe, Feb 03 '17 at 08:46

score 0 · Answer 4 · answered Sep 15 '17 at 23:56

0

I spent 2 days on this problem. Add

"angularCompilerOptions": {
    "skipTemplateCodegen": true
}

to your tsconfig.json and it will create all necessary metadata files. It works for me.

answered Sep 15 '17 at 23:56

Mher

985
9
23

ERROR in ** is not an NgModule

4 Answers4

Linked