Javascript Angular2 上的“请添加 @NgModule 注释”错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47331202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Please add a @NgModule annotation" Error on Angular2
提问by pxr_64
I have made a custom angular2(5.0.x) module that looks like this :
我制作了一个自定义的 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 {}
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.
模块“AppModule”导入的意外值“GuageModule”。请添加@NgModule 注释。
UPDATE
更新
tsconfig for the main app:
主应用程序的 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"
]
}
}
ts config for the GuageModule package: {
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
}
}
回答by AlesD
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
如果您使用的是 Angular 5.0，则需要将其添加"annotationsAs": "decorators"到"angularCompilerOptions"您的包中。Angular 5 引入了新的优化，默认情况下，装饰器在编译时被删除，因为它们在运行时不需要。这不适用于您已经发现的包。您可以在 Angular 5 公告博客“构建优化器”段落中提到这一点。Angular 5.0.0 版本现已推出
I use this settings in my angular packages:
我在我的 angular 包中使用此设置：
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"skipMetadataEmit": false,
"strictMetadataEmit": true,
"annotationsAs": "decorators"
}
回答by alexKhymenko
I had the same problem. With angular 5+ and angular cli 1.5 it says that your code is not compatible and also your library is scoped package. I have managed to fix it with adding
我有同样的问题。对于 angular 5+ 和 angular cli 1.5，它表示您的代码不兼容，而且您的库是范围包。我已经设法通过添加来修复它
export * from './your-path'
In all my files (exporting everything from my library).
在我的所有文件中（从我的库中导出所有内容）。
As i understood its you import as 3 party library You can try to run the application with
据我了解，您将其导入为 3 方库您可以尝试使用
ng serve --preserve-symlinks
also add flatModuleId in src/tsconfig.es5.json accordingly:
还相应地在 src/tsconfig.es5.json 中添加 flatModuleId ：
"flatModuleId": "@scope/library-name"
Link to github here
链接到github在这里
There is issue on githubfor more information
github上有问题以获取更多信息
回答by Derked
This is most likely an issue with the way your npm package is being created. In your package.json for your GuageModuleare you defining a main? This should point to the entry point to your npm package. Here is an example of mine.
这很可能是您创建 npm 包的方式的问题。在你的 package.json 中，GuageModule你定义了一个 main 吗？这应该指向您的 npm 包的入口点。这是我的一个例子。
"main": "./dist/module.js",
Then if you want typings from GuageModule in your main app you'll need to go to your tsconfig.jsonand under compilerOptionsset declarationto be true to generate the typings files.
然后，如果您想在主应用程序中从 GuageModule 进行打字，则需要转到您的tsconfig.json和下compilerOptions设置declaration为 true 以生成打字文件。
"compilerOptions": {
...
"declaration": true
...
},
Then finally in your package.jsonyou will need to point to the entry point for your typings file.
然后最后在你的package.json你需要指向你的打字文件的入口点。
"types": "./src/app/layout.module.d.ts"
Now you should be able to import your module and have typings on the module that you imported. Hope this helps!
现在您应该能够导入您的模块并在您导入的模块上进行输入。希望这可以帮助！
回答by Ankit Kapoor
Please add "emitDecoratorMetadata": true in the compilerOptions of tsconfig.json of your gauge module
请在仪表模块的 tsconfig.json 的 compilerOptions 中添加 "emitDecoratorMetadata": true
