route - Angular 2 Di no funciona-no puede resolver todos los parámetros para

title angular 4

Question

He creado una aplicación simple de Hello World que funciona bien. Pero cuando quiero agregar un "Servicio" solo un simple Di obtuve los siguientes errores:

angular2.dev.js: 23877 EXCEPCIÓN: No se pueden resolver todos los parámetros para ''AppComponent'' (?). Asegúrese de que todos los parámetros estén decorados con Inject o tengan anotaciones de tipo válidas y que ''AppComponent'' esté decorado con Injectable.

angular2-polyfills.js: 469 Rechazo de promesa no controlada: No se pueden resolver todos los parámetros para ''AppComponent'' (?). Asegúrese de que todos los parámetros estén decorados con Inject o tengan anotaciones de tipo válidas y que ''AppComponent'' esté decorado con Injectable. ; Zona: angular; Tarea: Promise.then; Valor:

Tengo 3 archivos

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

curso.servicio.ts:

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

Cuando elimino los parámetros del constructor, todo funciona bien.

ese es el encabezado de mi documento HTML y puedo usar 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>

Actualizar estos son AHORA mi Configuración csproj TypeScript fija

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

En la actualización más reciente de VS 2015, también puede usar tsconfig.json, luego se ignoran las configuraciones de la solución para TypeScript. Mi ejemplo actual para mi 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
}

Answer 1

En mi caso el problema fue causado por @ angular / forms. Si lo está utilizando cerca del componente defectuoso, comience a verificar su @ angular / formas y encuentre una solución a su alrededor.

Answer 2

Pude resolver este problema agregando:

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

en el componente y anotando el servicio a inyectar:

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

Answer 3

Actualizar

Después de que la actualización en la pregunta OP ya está utilizando Typescript, le sugiero que agregue emitDecoratorMetadata: true dentro de su tsconfig.json . Es necesario para que la salida de JavaScript cree los metadatos para los decoradores dentro de un archivo de script transpilado.

@Inject agregar @Inject para crear una instancia de CourseService dentro de AppComponent

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

En el caso de que esté utilizando @Inject no necesita tener el decorador @Inject en su lugar. Mecanografiado hecho eso para ti