Question Angulaire 2 di ne fonctionne pas - ne peut pas 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 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 ont des annotations de type valides et que "AppComponent" est décoré avec Injectable.

angular2-polyfills.js: 469 Non pris en charge Prélèvement: impossible de résoudre tous les paramètres pour 'AppComponent' (?). Assurez-vous que tous les paramètres sont décorés avec Inject ou ont 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;
  }
}

Lorsque je supprime ensuite les paramètres du constructeur, tout fonctionne bien.

c'est la tête de mon document HTML et je ma utilise angulaire 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>

Mettre à 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 nouvelle mise à jour VS 2015, vous pouvez également utiliser 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
   }

16
2018-04-01 18:21


origine


Réponses:


Mettre à jour

Après la mise à jour en question OP utilise déjà Typescript, je vous suggère d'ajouter emitDecoratorMetadata: true à l'intérieur de votre tsconfig.json. Il est donc 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 à l'intérieur AppComponent

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

Dans le cas où vous utilisez typecript, vous n'avez pas besoin d'avoir @Inject décorateur là en place. Typecript a fait ça pour vous.


30
2018-04-01 20:04



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

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

dans le composant et annoter le service à injecter avec:

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

9
2017-08-06 16:35



Dans mon cas, le problème a été causé par @ angular / forms. Si vous l'utilisez près du composant défectueux, commencez par vérifier vos @ angulaire / formulaires et trouvez un correctif autour de celui-ci.


0
2018-05-31 14:52