gpt4 book ai didi

Angular 2 Di 不工作 - 无法解析所有参数

转载 作者:太空狗 更新时间:2023-10-29 16:57:01 24 4
gpt4 key购买 nike

我创建了一个运行良好的简单 Hello World 应用程序。但是当我想添加一个“服务”只是一个简单的 Di 时,我得到了以下错误:

angular2.dev.js:23877 异常:无法解析“AppComponent”(?)的所有参数。确保所有参数都用 Inject 修饰或具有有效的类型注释,并且“AppComponent”用 Injectable 修饰。

angular2-polyfills.js:469 未处理的 Promise 拒绝:无法解析“AppComponent”的所有参数(?)。确保所有参数都用 Inject 修饰或具有有效的类型注释,并且“AppComponent”用 Injectable 修饰。 ;区域: Angular ;任务:Promise.then;值:

我有 3 个文件

启动.ts:

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './mainApp'
bootstrap(AppComponent);

主应用程序.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) {
}
}

类(class).服务.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>

在最新的 VS 2015 更新中,您还可以使用 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
}

最佳答案

更新

有问题的更新后 OP 已经在使用 Typescript,我建议您在 tsconfig.json 中添加 emitDecoratorMetadata: true。这是必要的,以便 JavaScript 输出在转译的脚本文件中为装饰器创建元数据。


您需要添加 @Inject 以在 AppComponent 中创建 CourseService 的实例

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

在某些情况下,如果您使用的是 typescript ,则不需要在那里安装 @Inject 装饰器。 Typescript 为您完成了这项工作。

关于Angular 2 Di 不工作 - 无法解析所有参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36363279/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com