web-dev-qa-db-fra.com

Angular 2 Di ne fonctionne pas - impossible de résoudre tous les paramètres pour

J'ai créé une application simple Hello World qui fonctionne bien. Mais quand je veux ajouter un "Service" juste un simple Di j'ai eu les erreurs suivantes:

angular2.dev.js: 23877 EXCEPTION: impossible de résoudre tous les paramètres pour 'AppComponent' (?). Assurez-vous que tous les paramètres sont décorés avec Inject ou que vous avez des annotations de type valides et que 'AppComponent' est décoré avec Injectable.

angular2-polyfills.js: 469 Rejet d'une promesse non gérée: impossible de résoudre tous les paramètres de 'AppComponent' (?). Assurez-vous que tous les paramètres sont décorés avec Inject ou que vous avez des annotations de type valides et que 'AppComponent' est décoré avec Injectable. ; Zone: angulaire; Tâche: Promise.then; Valeur: 

J'ai 3 fichiers

boot.ts: 

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './mainApp'
bootstrap(AppComponent);

mainApp.ts:

import {Component} from 'angular2/core';
import {CourseService} from './course.service';


@Component({
    selector: 'my-app',
    template: 'My First Angular 2 App',
    providers: [CourseService],
})
export class AppComponent {
    constructor(courseService: CourseService) {
    }
}

course.service.ts:

export class CourseService {
   public getCourses(): string[] {
      let courses: string[] = ["Course 1", "Course 2", "Course 3"];
      return courses;
  }
}

quand je supprime ensuite les paramètres du constructeur, tout fonctionne correctement.

c’est la tête de mon document HTML et j’utilise Angular 2 beta 13:

<script src="~/Scripts/es6-shim.min.js"></script>
<script src="~/Scripts/system-polyfills.js"></script>
<script src="~/Scripts/shims_for_IE.js"></script>
<script src="~/Scripts/angular2-polyfills.js"></script>
<script src="~/Scripts/system.js"></script>
<script src="~/Scripts/Rx.js"></script>
<script src="~/Scripts/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
    System.config({
        packages: {
            'ScriptsApp/views': {
                defaultExtension: 'js'
            }
        }
    });
</script>
<script>
    System.import('ScriptsApp/views/boot').then(null, console.error.bind(console));
</script>

Mettez à jour ce sont maintenant mes paramètres TypeScript csproj fixes

<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>

Dans la dernière mise à jour de VS 2015, vous pouvez également utiliser le fichier tsconfig.json, puis les paramètres de solution pour TypeScript sont ignorés. Mon exemple actuel pour mon tsconfig.json:

 {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    //Kümmert sich um die Typings das diese entsprechend gefunden werden, keine Reference mehr in boot.js notwendig. Geht aber in VS nicht!
    //"lib": ["es6"],
    "types": [
      "node" //wird für RequireJs benötigt, damit z.b. der Typ gefunden werden kann
    ]
  },
  //Wird für den AwesomeTypeScriptLoad in WebPack benötigt!
   "awesomeTypescriptLoaderOptions": {
     "useWebpackText": true
   },
  "exclude": [
       "node_modules",
       "dist",
       "typings/main",
       "typings/index.d.ts"
     ],
     "compileOnSave": true
   }
angularangular2-di
16
squadwuschel

Mettre à jour

Après la mise à jour de la question OP utilise déjà TypeScript, je vous conseillerais d'ajouter emitDecoratorMetadata: true dans votre tsconfig.json. Il est nécessaire que la sortie JavaScript crée les métadonnées pour les décorateurs dans un fichier de script transpilé.

Vous devez ajouter @Inject pour créer une instance de CourseService dans AppComponent

constructor(@Inject(CourseService) courseService: CourseService) {
}

Dans le cas où vous utilisez TypeScript, vous n'avez pas besoin d'avoir @Inject décorator à la place. TypeScript l'a fait pour vous.

30
Pankaj Parkar

J'ai pu résoudre ce problème en ajoutant:

import {Inject} from '@angular/core';

dans le composant et annotant le service à injecter avec:

constructor(@Inject(CourseService) courseService: CourseService) {
9
Stefan D

Dans mon cas, le problème était causé par @ angular/forms. Si vous l'utilisez près du composant défectueux, commencez par vérifier votre @ angular/forms et trouvez un correctif autour de lui.

0
Raydelto Hernandez