web-dev-qa-db-fra.com

"Veuillez ajouter une annotation @NgModule" Erreur sur Angular2

J'ai créé un module personnalisé angular2 (5.0.x) qui ressemble à ceci:

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

Je l'utilise dans mes modules d'application comme ceci:

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

Lorsque j'essaie de démarrer mon application, l'erreur suivante apparaît.

Valeur inattendue 'GuageModule' importée par le module 'AppModule'. Veuillez ajouter une annotation @NgModule.

METTRE À JOUR

tsconfig pour l'application principale: 

{
  "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 pour le package 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
  }
}
javascriptangularsingle-page-applicationangular-module
6
pxr_64

Si vous utilisez Angular 5.0, vous devez ajouter "annotationsAs": "decorators" au "angularCompilerOptions" de votre paquet . Angular 5 a introduit de nouvelles optimisations et par défaut, les décorateurs sont supprimés lors de la compilation car ils ne sont pas nécessaires à l'exécution. Cela ne fonctionne pas pour les paquets que vous avez déjà découverts. Vous pouvez lire à ce sujet dans le blog d’annonce Angular 5 le paragraphe "Build Optimizer" le mentionne. La version 5.0.0 de Angular est maintenant disponible

J'utilise ces paramètres dans mes packages angulaires:

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

C'est probablement un problème avec la façon dont votre paquet npm est créé. Dans votre package.json pour votre GuageModule définissez-vous un principal? Cela devrait pointer vers le point d’entrée de votre paquet npm. Voici un exemple de la mienne.

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

Ensuite, si vous souhaitez que les saisies à partir de GuageModule dans votre application principale, vous devez accéder à votre tsconfig.json et sous compilerOptions définir declaration à true pour générer les fichiers de frappe.

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

Enfin, dans votre package.json, vous devrez indiquer le point d’entrée de votre fichier de frappe.

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

Vous devriez maintenant pouvoir importer votre module et avoir des saisies sur le module que vous avez importé. J'espère que cela t'aides!

0
Derked

J'ai eu le même problème. Avec angular 5+ et angular cli 1.5, il est indiqué que votre code n’est pas compatible et que votre bibliothèque contient également des paquets. J'ai réussi à le réparer avec l'ajout

 export * from './your-path'

Dans tous mes fichiers (tout exporter de ma bibliothèque).

Si j'ai bien compris, vous importez en tant que bibliothèque à 3 parties. Vous pouvez essayer d’exécuter l’application avec

 ng serve --preserve-symlinks

ajoutez également flatModuleId dans src/tsconfig.es5.json en conséquence:

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

Lien vers github ici

Il y a un problème sur github pour plus d'informations 

0
alexKhymenko