Angular 2 Di不工作-无法解析所有参数
我已经创建了一个简单的Hello World应用程序，它工作得很好。但是当我只想添加一个简单的Di来添加一个"Service“时，我得到了以下错误：
angular2.dev.js:23877异常:无法解析'AppComponent'(?)的所有参数。确保所有参数都用Inject修饰或具有有效的类型批注，并且“AppComponent”用Injectable修饰。
Angular2-polyfis.js:469未处理的承诺拒绝:无法解析'AppComponent'(?)的所有参数。确保所有参数都用Inject修饰或具有有效的类型批注，并且“AppComponent”用Injectable修饰。；区域: angular；任务: Promise.then；取值：
我有3个文件
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;
}
}当我从构造函数中删除then参数时，一切都很正常。
这是我的HTML文档的头部，我使用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>更新这些现在是我的固定csproj TypeScript设置
<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>在最新的VS2015更新中，你也可以使用tsconfig.json，然后TypeScript的解决方案设置将被忽略。我当前的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
}回答 3
Stack Overflow用户
发布于 2016-04-02 04:04:23
更新
在更新操作已经在使用Typescript之后，我建议你在你的tsconfig.json中添加emitDecoratorMetadata: true。这是必要的，因此JavaScript输出会在一个转换后的脚本文件中为装饰器创建元数据。
您需要添加@Inject才能在AppComponent中创建CourseService实例
constructor(@Inject(CourseService) courseService: CourseService) {
}在使用typescript的情况下，不需要安装@Inject装饰器。Typescript为你做到了这一点。
Stack Overflow用户
发布于 2016-08-07 00:35:36
我能够通过添加以下内容来解决这个问题：
import {Inject} from '@angular/core';在组件中，并对要注入的服务进行注释：
constructor(@Inject(CourseService) courseService: CourseService) {Stack Overflow用户
发布于 2017-05-31 22:52:46
在我的例子中，这个问题是由@angular/forms引起的。如果你在有问题的组件附近使用它，开始检查你的@angular/表单，并找到解决它的方法。
https://stackoverflow.com/questions/36363279
复制相似问题
腾讯云开发者
