[英]“Please add a @NgModule annotation” Error on Angular2
我创建了一个自定义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注释。
主应用程序的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
}
}
如果您使用的是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"
}
这很可能是您创建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"
现在,您应该可以导入模块并在导入的模块上输入。 希望这可以帮助!
请在您的仪表模块的tsconfig.json的compilerOptions中添加“emitDecoratorMetadata”:true
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.