it-swarm.com.de

"Bitte fügen Sie eine @NgModule-Anmerkung hinzu" Fehler auf Angular2

Ich habe ein benutzerdefiniertes angle2 (5.0.x) -Modul erstellt, das folgendermaßen aussieht:

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 {}

Ich verwende es in meinen App-Modulen wie folgt:

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 { }

Wenn ich versuche, meine App zu starten, erhalte ich die folgende Fehlermeldung.

Unerwarteter Wert 'GuageModule' wurde vom Modul 'AppModule' importiert. Bitte fügen Sie eine @NgModule-Anmerkung hinzu.

AKTUALISIEREN

tsconfig für die Hauptanwendung: 

{
  "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 für das GuageModule-Paket: {

 "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
  }
}
6
pxr_64

Wenn Sie Angular 5.0 verwenden, müssen Sie "annotationsAs": "decorators" zum "angularCompilerOptions" für Ihr Paket hinzufügen In Angular 5 wurden neue Optimierungen eingeführt. Die Dekore werden standardmäßig beim Kompilieren entfernt, da sie zur Laufzeit nicht benötigt werden. Dies funktioniert nicht für Pakete, wie Sie bereits festgestellt haben. Sie können dies im Ankular-Blog von Angular 5 nachlesen, der im Abschnitt "Build Optimizer" erwähnt wird. Version 5.0.0 von Angular jetzt verfügbar

Ich verwende diese Einstellungen in meinen Winkelpaketen:

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

Bitte fügen Sie "emitDecoratorMetadata" hinzu: true in den compilerOptions von tsconfig.json Ihres Messmoduls

0
Ankit Kapoor

Dies ist höchstwahrscheinlich ein Problem bei der Erstellung Ihres npm-Pakets. Definieren Sie in Ihrer package.json für Ihre GuageModule eine Hauptdatei? Dies sollte auf den Einstiegspunkt zu Ihrem npm-Paket zeigen. Hier ist ein Beispiel von mir.

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

Wenn Sie die Eingabe von GuageModule in Ihrer Hauptanwendung wünschen, müssen Sie zu tsconfig.json gehen und unter compilerOptions set declaration den Wert true angeben, um die Typisierungsdateien zu erstellen.

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

Dann müssen Sie schließlich in Ihrem package.json auf den Einstiegspunkt für Ihre Typisierungsdatei zeigen.

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

Jetzt sollten Sie in der Lage sein, Ihr Modul zu importieren und das importierte Modul zu typisieren. Hoffe das hilft!

0
Derked

Ich hatte das gleiche Problem. Mit angle 5+ und angle cli 1.5 heißt es, dass Ihr Code nicht kompatibel ist und auch Ihre Bibliothek ein Paket mit Umfang hat. Ich habe es mit dem Hinzufügen behoben

 export * from './your-path'

In allen meinen Dateien (alles aus meiner Bibliothek exportieren).

Wie ich verstanden habe, importieren Sie sie als 3-Parteien-Bibliothek. Sie können versuchen, die Anwendung mit auszuführen

 ng serve --preserve-symlinks

fügen Sie entsprechend auch flatModuleId in src/tsconfig.es5.json hinzu:

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

Link zu github hier

Auf github finden Sie weitere Informationen 

0
alexKhymenko