“请在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 {}

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

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注释。

更新

用于主应用程序的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

如果您使用的是角5.0，则需要将"annotationsAs": "decorators"添加到包的"angularCompilerOptions"中。Range5引入了新的优化，默认情况下，在编译时删除装饰器，因为它们在运行时不需要。正如您已经发现的那样，这不适用于包。您可以在角5公告博客中了解到这一点，“构建优化器”一段提到了这一点。5.0.0版的角现在可用

我在我的角包中使用这个设置：

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

Answer 2

我也有同样的问题。使用角5+和角cli1.5，它表示您的代码不兼容，而且库也是作用域包。我设法通过添加

 export * from './your-path'

在我的所有文件中(从我的库导出所有东西)。

据我所知，您可以将其导入为第三方库，您可以尝试使用

 ng serve --preserve-symlinks

还相应地在src/tsconfig.es5.json中添加flatModuleId：

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

指向github 这里的链接

有关更多信息，github上存在问题。

Answer 3

请添加"emitDecoratorMetadata"：在您的量规模块的compilerOptions of tsconfig.json中为true