webentwicklung-frage-antwort-db.com.de

Winkel 2 Di funktioniert nicht - kann nicht alle Parameter für auflösen

Ich habe eine einfache Hello World-App erstellt, die gut funktioniert. Aber wenn ich einen "Dienst" hinzufügen möchte, habe ich die folgenden Fehler:

angle2.dev.js: 23877 AUSNAHME: Alle Parameter für 'AppComponent' (?) können nicht aufgelöst werden. Stellen Sie sicher, dass alle Parameter mit Inject versehen sind oder über gültige Typanmerkungen verfügen und dass 'AppComponent' mit Injectable gekennzeichnet ist.

angle2-polyfills.js: 469 Unhandled Promise ablehnen: Alle Parameter für 'AppComponent' (?) können nicht aufgelöst werden. Stellen Sie sicher, dass alle Parameter mit Inject versehen sind oder über gültige Typanmerkungen verfügen und dass 'AppComponent' mit Injectable gekennzeichnet ist. ; Zone: eckig; Aufgabe: Promise.then; Wert: 

Ich habe 3 Dateien

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

wenn ich dann Parameter aus dem Konstruktor entferne, funktioniert alles einwandfrei.

das ist der Kopf meines HTML-Dokuments, und ich verwende winkle 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>

Aktualisieren Sie diese jetzt JETZT meine Fixed csproj TypeScript-Einstellungen

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

Im neuesten VS 2015-Update können Sie auch die Datei tsconfig.json verwenden. Die Lösungseinstellungen für TypeScript werden ignoriert. Mein aktuelles Beispiel für meine 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
squadwuschel

Update

Nachdem das betreffende Update in Frage steht, verwendet OP bereits TypeScript. Ich empfehle Ihnen, emitDecoratorMetadata: true in Ihrem tsconfig.json hinzuzufügen. Es ist notwendig, damit die JavaScript-Ausgabe die Metadaten für die Dekorateure in einer transpiled-Skriptdatei erstellt.


Sie müssen @Inject hinzufügen, um eine Instanz von CourseService in AppComponent zu erstellen.

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

Wenn Sie TypeScript verwenden, müssen Sie @Inject decorator nicht verwenden. TypeScript erledigt das für Sie.

30
Pankaj Parkar

Ich konnte dieses Problem lösen, indem ich Folgendes hinzufügte:

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

in der Komponente und kommentieren den Dienst, mit dem injiziert werden soll:

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

In meinem Fall wurde das Problem durch @ eckige/forms verursacht. Wenn Sie es in der Nähe der fehlerhaften Komponente verwenden, überprüfen Sie Ihr @ angle/forms und suchen Sie nach einem Fix.

0