角：他のモジュールのサービスを使用

Question

モジュールの外部からサービスをインポートしようとしています。

次のように私が持っている設定は次のとおりです。私は、このフー・モジュール、私はこれが正常に動作しますapp.module.ts

@NgModule({ 
    ... 
    imports: [ FooModule ] 
}); 
... 

にインポート

@NgModule({ 
    declarations: [ 
     FooComponent 
    ], 
    exports: [ 
     FooComponent 
    ], 
    providers:[ 
     FooService 
    ] 
}); 
export class FooModule {} 

を持っています。

次は私がapp.module.ts内からFooServiceをインポートしたいので、私はアプリはまだ動作これまでproviders: { FooService }

app.module.tsから

@NgModule({ 
    ... 
    providers: [FooService], 
    imports: [ FooModule ] 
}); 
... 

ラインを移動しました。最後のステップは、私がfooディレクトリの外サービスのファイルをコピーし、私はインポートパスを変更し、私も、サーバーを再起動し、今私はそれはもうサービスを見つけることができないブラウザ

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: No provider for FooService! 

でエラーが発生します。

サービスファイルがfooディレクトリにないときにサービスが欠落している理由を教えてください。これは何とか修正できますか？

Answer 1

私は以下の解決策を試しました。それは私のために働いています：

はFooモジュール

@NgModule({ 
    declarations: [ 
     FooComponent 
    ], 
    exports: [ 
     FooComponent 
    ], 
}); 
export class FooModule {} 

app.module.ts

import {Fooservice} from './FooService'; 
@NgModule({ 
    ... 
    imports: [ FooModule ] 
    providers: [FooService], 
}); 
... 

Foo.component.ts

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

@Component({ 

}) 
export class FooComponent { 

    constructor(public fooservice: FooService) { 
     ... 
    } 
}