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

Question

我创建了一个运行良好的简单 Hello World 应用程序。但是当我想添加一个 "Service" 只是一个简单的 Di 时，我得到了以下错误：

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

angular2-polyfills.js:469 未处理的 Promise 拒绝：无法解析 '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>

在最新的 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
   }

Answer 1

更新

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

您需要添加 @Inject 以在 AppComponent

中创建 CourseService 的实例

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

如果您使用的是打字稿，则不需要 @Inject 装饰器。打字稿为你做了。

Answer 2

我通过添加解决了这个问题：

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

在组件中并注释要注入的服务：

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

Answer 3

在我的例子中，问题是由 @angular/forms 引起的。如果您在故障组件附近使用它，请开始检查您的@angular/forms 并找到解决办法。

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

Angular 2 Di not working - cannot resolve all parameters for

angular2-di

angular