“请添加@NgModule注释” Angular2出错 [英] "Please add a @NgModule annotation" Error on Angular2

问题描述

我制作了一个自定义angular2（5.0.x）模块，如下所示：

  import {GuageService} from' ./services/guage.service';来自'@ angular / core'的
 import {NgModule};来自'@ angular / common'的
 import {CommonModule};来自'./guage/guage.component'的
 import {GuageComponent}; 
 
 @NgModule（{
声明：[GuageComponent]，
 
进口：[
 CommonModule 
]，
 
提供者：[GuageService]，
出口：[GuageComponent] 
}）
导出类GuageModule {} 
  

我在我的app模块中使用它：

  import {BrowserModule} from @角/平台的浏览器;来自'@ angular / core'的
 import {NgModule};来自'devextreme-angular'的
 import {DxButtonModule，DxCircularGaugeModule};来自'@ kronsbi / bi-module-template'的
 import {GuageModule};来自'@ angular / common / http'的
 import {HttpClientModule};来自'./app.component'的
 
 
 import {AppComponent}; 
 
 @NgModule（{
声明：[
 AppComponent 
]，
导入：[
 BrowserModule，
 DxButtonModule，
 DxCircularGaugeModule，
 HttpClientModule，
 GuageModule 
]，
 bootstrap：[AppComponent] 
}）
 export class AppModule {} 
  

当我尝试启动我的应用时，我收到以下错误。

模块'AppModule'导入的意外值'GuageModule'。请添加@NgModule注释。

UPDATE

主要的tsconfig app：

  {
compileOnSave：false，
compilerOptions：{
 outDir：。/ dist / out-tsc，
sourceMap：true，
声明：false，
moduleResolution：node，
 emitDecoratorMetadata：true，
experimentalDecorators：true，
target：es5，
typeRoots：[
node_modules / @ types
]，
lib：[
es2017，
dom
] 
} 
} 
  $ b 
对于GuageModule包的配置：
 {
 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 
 } 
} 
  
 
 
解决方案
如果您使用的是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
} 
  
 
I have made a custom angular2(5.0.x) module that looks like this :
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 {}
I use it in my app modules like this:
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 { }
When I try to start my app I get the following error.

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


UPDATE

tsconfig for the main app: 
{
  "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"
    ]
  }
}
ts config for the GuageModule package:
{
 "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
  }
}

解决方案
If you are using Angular 5.0 you need to add "annotationsAs": "decorators" to the "angularCompilerOptions" for your package.
Angular 5 introduced new optimizations and by default the decorators are removed on compile because they are not needed at runtime. This does not work for packages as you already discovered. You can read about this in the Angular 5 announcement blog the "Build Optimizer" paragraph mentions this. Version 5.0.0 of Angular Now Available

I use this settings in my angular packages:
"angularCompilerOptions": {
      "skipTemplateCodegen": true,
      "skipMetadataEmit": false,
      "strictMetadataEmit": true,
      "annotationsAs": "decorators"
   }


                        
这篇关于“请添加@NgModule注释” Angular2出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！