Angular2上的“請添加@NgModule注釋”錯誤

Question

我創建了一個自定義angular2（5.0.x）模塊，如下所示：

import { GuageService } from './services/guage.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuageComponent } from './guage/guage.component';

@NgModule({
  declarations: [GuageComponent],

  imports: [
    CommonModule
  ],

  providers : [GuageService],
  exports : [GuageComponent]
})
export class GuageModule {}

我在我的app模塊中使用它，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DxButtonModule, DxCircularGaugeModule } from 'devextreme-angular';
import { GuageModule } from '@kronsbi/bi-module-template';
import { HttpClientModule } from '@angular/common/http';


    import { AppComponent } from './app.component';

        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            DxButtonModule,
            DxCircularGaugeModule,
            HttpClientModule,
            GuageModule
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

當我嘗試啟動我的應用程序時，我收到以下錯誤。

模塊'AppModule'導入的意外值'GuageModule'。 請添加@NgModule注釋。

UPDATE

主應用程序的tsconfig：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

guageModule包的ts config：{

 "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "rxjs/*": ["node_modules/rxjs/*"]
    },
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2017", 
      "dom"
    ]
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

Answer 1

如果您使用的是Angular 5.0，則需要將"annotationsAs": "decorators"到包的"angularCompilerOptions"中。 Angular 5引入了新的優化，默認情況下，在編譯時刪除了裝飾器，因為它們在運行時不需要。 這對您已經發現的包不起作用。 你可以在Angular 5公告博客中看到這個，“Build Optimizer”段落提到了這一點。 Angular 5.0.0版現已推出

我在角度包中使用此設置：

"angularCompilerOptions": {
      "skipTemplateCodegen": true,
      "skipMetadataEmit": false,
      "strictMetadataEmit": true,
      "annotationsAs": "decorators"
   }

Answer 2

我有同樣的問題。 對於角度5+和角度cli 1.5，它表示您的代碼不兼容，並且您的庫也是范圍包。 我已設法通過添加來修復它

 export * from './your-path'

在我的所有文件中（從我的庫中導出所有內容）。

據我所知，你導入為3方庫您可以嘗試運行該應用程序

 ng serve --preserve-symlinks

還相應地在src / tsconfig.es5.json中添加flatModuleId：

"flatModuleId": "@scope/library-name"

鏈接到github 這里

github上有問題需要更多信息

Answer 3

這很可能是您創建npm包的方式的問題。 你的GuageModule的package.json中你定義了一個main？ 這應該指向你的npm包的入口點。 這是我的一個例子。

"main": "./dist/module.js",

然后，如果你想在你的主應用程序中使用GuageModule打字，你需要轉到你的tsconfig.json並在compilerOptions下設置declaration為true來生成打字文件。

"compilerOptions": {
  ...
  "declaration": true
  ...
},

然后最后在你的package.json你需要指向你的打包文件的入口點。

"types": "./src/app/layout.module.d.ts"

現在，您應該可以導入模塊並在導入的模塊上輸入。 希望這可以幫助！

Answer 4

請在您的儀表模塊的tsconfig.json的compilerOptions中添加“emitDecoratorMetadata”：true