ERROR in ** is not an NgModule

问题:

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

回答1:

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

回答2:

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

回答3:

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

回答4:

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.