web-dev-qa-db-ja.com

「@NgModuleアノテーションを追加してください」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 {}

次のようにアプリモジュールで使用します。

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
  }
}
javascriptangularsingle-page-applicationangular-module
9
pxr_64

Angular 5.0を使用している場合、"annotationsAs": "decorators"から"angularCompilerOptions"パッケージ用。 Angular 5は新しい最適化を導入し、デフォルトではデコレータは実行時に必要ないためコンパイル時に削除されます。これは既に発見したパッケージでは機能しません。 Angular 5アナウンスブログ「ビルドオプティマイザー」の段落でこれに言及しています。 Angular Now Available）のバージョン5.0.

angularパッケージでこの設定を使用します：

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

これは、おそらくnpmパッケージの作成方法に関する問題です。 GuageModuleのpackage.jsonでメインを定義していますか？これは、npmパッケージへのエントリポイントを指している必要があります。これが私の例です。

"main": "./dist/module.js",

次に、メインアプリでGuageModuleからの入力が必要な場合は、tsconfig.jsonおよびcompilerOptionsの下でdeclarationをtrueに設定して、タイピングファイルを生成します。

"compilerOptions": {
  ...
  "declaration": true
  ...
},

最後にpackage.jsonタイピングファイルのエントリポイントをポイントする必要があります。

"types": "./src/app/layout.module.d.ts"

これで、モジュールをインポートし、インポートしたモジュールを入力できるようになります。お役に立てれば！

1
Derked

同じ問題がありました。 angular 5+ and angular cli 1.5を使用すると、コードに互換性がなく、ライブラリがスコープパッケージであることがわかります。

 export * from './your-path'

すべてのファイル（ライブラリからすべてをエクスポート）。

私が理解したように、サードパーティライブラリとしてインポートします

 ng serve --preserve-symlinks

また、それに応じてsrc/tsconfig.es5.jsonにflatModuleIdを追加します。

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

Githubへのリンク ここ

詳細については github に問題があります

1
alexKhymenko

ゲージモジュールのtsconfig.jsonのcompilerOptionsに「emitDecoratorMetadata」を追加してください：true

0
Ankit Kapoor