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