5

アプリ モジュールと単一コンポーネント アプリケーション (私の問題を示すために作成) があり、次のエラーが発生します。

 Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:

AppModule のコード:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { UserService } from './components/common/userservice';

@NgModule({
    imports: [
    BrowserModule,
],
declarations: [
    AppComponent
],
providers: [UserService],
bootstrap: [AppComponent],
entryComponents: []

})
export class AppModule {
}

私の AppComponent のコード:

import { Component} from '@angular/core';
import { UserService} from './userservice';

@Component({
  selector: 'App',
  template: `<h3>App component</h3>                                                                                      
            user name: {{userName}}
            `,
  providers: []
  })

export class AppComponent  {

  userName: string;
  constructor(userService: UserService) {
      this.userName = userService.userName;   
  }    
}

私の UserService コード:

import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class UserService {
    obs$: EventEmitter<any> = new EventEmitter<any>()
    userName = 'Sherlock Holmes';
}

UserService をプロバイダーとして AppComponent に追加すると、問題が解決します。しかし、アプリケーション全体でサービスのインスタンスが1つだけ必要なため、したくありません。サブモジュール（機能モジュール）でも。

私の理解によると、モジュールレベルでプロバイダーとしてサービスを追加すると、モジュールの下の任意のコンポーネントにそれを注入できます。

ここに私が見ていた例があります。

プランカー

angular2バージョンを使用しています：「2.0.0」

4

3 に答える 3

6

インポート パスが間違ってい/Commonます/common。

Visual Studio と WebStorm は、パスの大文字と小文字を区別するための IntelliSense エラーを表示しません。

さらに、Angular 5 の AoT テンプレート コンパイルを使用している場合、インポート パスが正しくないため、「このコンポーネントはモジュールの一部ではありません」というエラーが表示されることがあります。AoT がなくてもこれは機能するため、AoT に変換すると驚きが得られます。

于 2016-12-16T12:54:44.970 に答える
0

service: を から削除してUserServiceからapp.module.ts、 を追加しcomponentます。

@Component({
  selector: 'App',
  template: `<h3>App component</h3>                                                                                      
        user name: {{userName}}
        `,
  providers: [UserService]
})

これがあなたを助けることを願っています。

于 2016-12-14T15:26:32.930 に答える
0

このエラーが発生するもう 1 つの理由は、サービスを別のディレクトリに複製し、各ファイルを個別に更新していたことです。最初のファイルがまだ存在していても、app.module.ts を更新するまでこのエラーが発生しました。

于 2018-01-04T03:06:59.703 に答える