web-dev-qa-db-ja.com

Angular 2動作していません-すべてのパラメータを解決できません

正常に機能するシンプルなHello Worldアプリを作成しました。しかし、単純な「サービス」を追加したい場合、次のエラーが発生しました。

angular2.dev.js：23877例外： 'AppComponent'（？）のすべてのパラメーターを解決できません。すべてのパラメーターがInjectで装飾されているか、有効な型注釈があること、および 'AppComponent'がInjectableで装飾されていることを確認してください。

angular2-polyfills.js：469未処理のPromiseの拒否： 'AppComponent'（？）のすべてのパラメーターを解決できません。すべてのパラメーターがInjectで装飾されているか、有効な型注釈があること、および 'AppComponent'がInjectableで装飾されていることを確認してください。 ;ゾーン：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：

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ドキュメントの頭です。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 Updateでは、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
   }
angularangular2-di
16
squadwuschel

更新

質問OPでTypeScriptが既に使用されている場合、emitDecoratorMetadata: true内にtsconfig.jsonを追加することをお勧めします。 JavaScript出力が、変換されたスクリプトファイル内にデコレータのメタデータを作成するために必要です。

CourseService内にAppComponentのインスタンスを作成するには、@Injectを追加する必要があります

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

TypeScriptを使用している場合、@Injectデコレータをそこに配置する必要はありません。 TypeScriptがそれを行ってくれました。

31
Pankaj Parkar

以下を追加することでこの問題を解決できました。

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

コンポーネントで、注入するサービスに注釈を付けます：

constructor(@Inject(CourseService) courseService: CourseService) {
9
Stefan D

私の場合、問題の原因は@ angular/formsでした。障害のあるコンポーネントの近くで使用している場合は、@ angular/formsのチェックを開始し、その周りの修正を見つけてください。

0
Raydelto Hernandez