** 中的错误不是 NgModule答案

【问题标题】：ERROR in ** is not an NgModule** 中的错误不是 NgModule
【发布时间】：2017-05-31 03:29:39
【问题描述】：

我有这个 NgModule：

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

Cliist告诉我

ERROR in SP21LoadingBarModule is not an NgModule

请注意：如果我将代码放入我的项目中，它可以正常工作。但是，一旦我将模块（和组件）从项目中取出并将其放入 npm 包中，就会出现该错误。

Angular 在 2.3.1 中使用， Angular CLI 1.0.0-beta.24，打字稿 2.0.10

【问题讨论】：

我在使用 @angular/* 2.4.2、angular-cli 1.0.0-beta.25-5 和 typescript 2.1.4 时遇到了同样的错误。如果直接包含，则可以正常工作，如果移动到 npm 包中，则会引发“不是 NgModule”错误。令人抓狂的是，我已经验证了 NgModule 元数据已正确附加到模块定义中！

标签： angular npm angular-cli

【解决方案1】：

最终解决方案：

您必须使用 Ahead-Of-Time 编译器 (ngc) 编译您的库。它将添加一些元数据来分配包含库的项目以读取它。

请查看以下链接：

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】：

您必须使用ngc (@angular/compiler-cli) 来编译您的库，而不是直接使用tsc。你是这种情况吗？

【讨论】：

谢谢。我在必须使用角度编译器的任何地方都没有找到该信息。甚至都不知道它的存在。
我也没有。我花了很长时间才弄明白。

【解决方案3】：

它使用以下依赖项工作：

{
  "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"   }
}

我会说问题出在 Angular CLI 最新版本上。此外，定义 HelloWorld 模块的项目（库）也不是使用 Angular CLI 构建的。我根据以下示例创建了它： https://www.npmjs.com/package/angular-sample-module

尽管如此，在使用大于 angular-cli@1.0.0-beta.21 的 Angular CLI 版本时会出现“不是 NgModule”消息

【讨论】：

据我所知，旧的 CLI 版本根本不检查它。
解决最新 CLI 版本中的问题。（我刚刚检查了 Angular CLI1.0.0-beta.29）。链接包时必须删除 node_modules。否则在新项目中使用原始开发库并且冲突会产生消息。

【解决方案4】：

我在这个问题上花了 2 天时间。添加

"angularCompilerOptions": {
    "skipTemplateCodegen": true
}

发送至您的tsconfig.json，它将创建所有必要的元数据文件。它对我有用。

【讨论】：