"Please add a @NgModule annotation" Angular2 错误

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

我在我的应用程序模块中使用它是这样的：

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

当我尝试启动我的应用程序时出现以下错误。

Unexpected value 'GuageModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

更新

主应用程序的 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 配置： {

 "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

请在您的仪表模块 tsconfig.json 的编译器选项中添加 "emitDecoratorMetadata": true

Answer 2

我遇到了同样的问题。对于 angular 5+ 和 angular cli 1.5，它表示您的代码不兼容，而且您的库是范围包。我已经设法通过添加

来修复它

 export * from './your-path'

在我的所有文件中（从我的库中导出所有内容）。

据我了解，您可以将其导入为 3 方库您可以尝试运行使用

的应用程序

 ng serve --preserve-symlinks

也相应地在src/tsconfig.es5.json中添加flatModuleId:

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

Link 到 github here

github 上有问题以获取更多信息

Answer 3

这很可能是您的 npm 包的创建方式存在问题。在你的 package.json 中你的 GuageModule 是在定义主线吗？这应该指向您的 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

如果您使用的是 Angular 5.0，您需要将 "annotationsAs": "decorators" 添加到 "angularCompilerOptions" 中。 Angular 5 引入了新的优化，默认情况下，装饰器在编译时被删除，因为它们在运行时不需要。这不适用于您已经发现的包。您可以在 Angular 5 公告博客中阅读相关内容，"Build Optimizer" 段提到了这一点。 Version 5.0.0 of Angular Now Available

我在我的 angular 包中使用此设置：

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

"Please add a @NgModule annotation" Angular2 错误

"Please add a @NgModule annotation" Error on Angular2

javascript

single-page-application

angular-module

angular

更新