Angular 2 Di不起作用-无法解析所有参数 [英] Angular 2 Di not working - cannot resolve all parameters for
问题描述
我已经创建了一个运行良好的简单Hello World应用.但是,当我只想添加一个服务"时,会出现以下错误:
I've created a simple Hello World app that works fine. But when I want to add a "Service" just a simple Di I got the following errors:
angular2.dev.js:23877例外:无法解析'AppComponent'(?)的所有参数.确保所有参数都用Inject修饰或具有有效的类型注释,并且'AppComponent'用Injectable修饰.
angular2.dev.js:23877 EXCEPTION: Cannot resolve all parameters for 'AppComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable.
angular2-polyfills.js:469未处理的承诺拒绝:无法解析"AppComponent"(?)的所有参数.确保所有参数都用Inject修饰或具有有效的类型注释,并且'AppComponent'用Injectable修饰. ;区域:角;任务:Promise.then;值:
angular2-polyfills.js:469 Unhandled Promise rejection: Cannot resolve all parameters for 'AppComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AppComponent' is decorated with Injectable. ; Zone: angular ; Task: Promise.then ; Value:
我有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:
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:
course.service.ts:
export class CourseService {
public getCourses(): string[] {
let courses: string[] = ["Course 1", "Course 2", "Course 3"];
return courses;
}
}
当我从构造函数中删除参数时,一切正常.
when I remove then parameters from the constructor every thing works fine.
那是我的HTML文档的开头,我可能使用的是beta 2 beta 13:
thats the head of my HTML document and I ma using 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设置
Update these are NOW my Fixed csproj TypeScript Settings
<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>
在最新的VS 2015更新中,您还可以使用tsconfig.json,然后将忽略TypeScript的解决方案设置.我当前的tsconfig.json示例:
In the Newest VS 2015 Update you can also use the tsconfig.json, then the Solution Settings for TypeScript are ignored. My current example for my 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
}
推荐答案
更新
有问题的更新后,OP已经在使用Typescript,建议您在tsconfig.json
内添加emitDecoratorMetadata: true
.因此,JavaScript输出必须在转译的脚本文件中为装饰器创建元数据.
After update in question OP is using Typescript already, I'd suggest you to add emitDecoratorMetadata: true
inside your tsconfig.json
. It is necessary so the JavaScript output creates the metadata for the decorators inside a transpiled script file.
您需要添加@Inject
在AppComponent
constructor(@Inject(CourseService) courseService: CourseService) {
}
如果您使用的是打字稿,则无需在其中放置@Inject
装饰器.打字稿为您做到了.
In a case if you are using typescript, you don't need to have @Inject
decorator there in place. Typescript done that for you.
这篇关于Angular 2 Di不起作用-无法解析所有参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!