角度2 Di不工作 – 无法解决所有参数

前端之家收集整理的这篇文章主要介绍了角度2 Di不工作 – 无法解决所有参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个简单的Hello World应用程序,工作正常.但是当我想添加一个“服务”只是一个简单的迪我得到以下错误

angular2.dev.js:23877 EXCEPTION:无法解析“AppComponent”(?)的所有参数.确保所有参数都使用“注入”或“有效”类型注释进行装饰,“AppComponent”使用“可注入”进行装饰.

angular2-polyfills.js:469未处理的承诺拒绝:无法解析“AppComponent”(?)的所有参数.确保所有参数都使用“注入”或“有效”类型注释进行装饰,“AppComponent”使用“可注入”进行装饰. ;区域:角度任务:承诺值:

我有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;
  }
}

当我从构造函数删除参数时,每件事情都可以正常工作.

这是我的HTML文档的头,我使用角度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) {
}

在一个情况下,如果你使用的是typcript,你不需要有@Inject装饰器就位.拼写为你做的.

猜你在找的Angularjs相关文章