2017-12-14 17 views
1

サービスを提供してエクスポートするSharedModuleがあり、サービスtypescriptファイルの代わりに共有モジュールのtypescriptファイルを参照して、そのサービスを別のモジュールのコンポーネントにインポートしたいと思います。しかし、エクスポートされたサービスが何らかの形で他のコンポーネントで検出されないため、ビルドに失敗しています。その後モジュールの角度のインポートとエクスポートの依存関係

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ 
     ... 
    ], 
    providers : [ 
    LookupService 
    ], 
    exports : [ 
    LookupService 
    ] 
}) 
export class SharedModule { } 

それはもう一つの特徴のモジュールにインポートされ

@NgModule({ 
    imports: [ 
    CommonModule, 
    SharedModule, 
    ], 
    declarations: [ 
    LegalTermComponent 
    ], 
    providers : [LegalTermService] 
}) 
export class LegalTermModule { } 

そして、私はインポートするLegalTermModuleであるLegalTermComponentで

ビルドが文句を言う場所です
import { LookupService } from '../shared/shared.module'; 

....

ERROR in src/app/legal-term/legal-term.component.ts(11,10): error TS2305: Module '".../src/app/shared/shared.module"' has no exported member 'LookupService'. 

明らかに共有モジュールがエクスポートしたときに、エクスポートされたメンバがないという理由がわかりません。誰も私にこれを行う正しい方法を教えてもらえますか? (lookup.service.tsを直接参照するとインポートが正常に動作します)

ありがとうございます! アナンドおそらく

+0

'legalTermComponent'はどこにありますか? 'sharedModule'? – Aravind

+0

LookupServiceクラスを投稿できますか? –

答えて

2

サービスは、ルートスコープとシングルトンであるため。提供するサービスがアプリレベルでシングルトンであることを確認したい場合は、AppModuleのサービスを含むモジュールをインポートする必要があります。 FeatureModuleの場合、サービスなしでSharedModuleをインポートする必要があります。そうしないと、アプリケーションレベルのサービス(つまり遅延ロードされたモジュール)を上書きする独自のサービスのコピーを作成できます。

これを実行するには、共有モジュールから2つの静的メソッドを作成するという規約に従う必要があります.1つのメソッドはサービスを含むモジュールを返し、別のメソッドはサービスを持たないモジュールを返します。

サービスのないものは、FeatureModuleでのみインポートする必要があります。サービスを持つものは、AppModuleによってインポートする必要があります。

FYIの理由で、forRoot(サービスあり)とforChild(サービスなし)の規約が存在します。

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ 
     ... (shared components) 
    ], 
    providers : [ 

    ], 
    exports : [ 
    ... (shared components) 
    ] 
}) 
export class SharedModule { 
    // intended to be imported by AppModule 
    static forRoot(): ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [LookupService] 
     } 
    } 

    // intended to be imported by FeatureModules 
    static forChild(): ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [] 
     } 
    } 
} 

機能モジュール

@NgModule({ 
    imports: [ 
    CommonModule, 
    SharedModule.forChild(), //without services 
    ], 
    declarations: [ 
    LegalTermComponent 
    ], 
    providers : [LegalTermService] 
}) 
export class LegalTermModule { } 

アプリケーションモジュール

@NgModule({ 
    imports: [ 
    SharedModule.forRoot(), //with services 
    ], 
    declarations: [ 
    ... 
    ], 
    providers : [ 
    ... 
    ] 
}) 
export class AppModule{ } 

明確にするため、プロバイダは通常、それらのは、その中に提供モジュールかかわらず、アプリケーション全体のルートスコープを持っている。そのなぜなら、コンポーネントのようなプロバイダのためのモジュールスコープメカニズムがないからです。唯一の例外は、遅延ロードされたモジュールで、独自の子ルートスコープを導入しています。

+0

フィーチャコンポーネントは、.tsファイルを参照することなく、フィーチャモジュールで参照された共有モジュールのアプリケーションモジュールまたはコンポーネントからLookupServiceをインポートしますか? – Anand

+0

共有モジュールからでもtsファイルをインポートする必要があります。 – pixelbits

+0

私はサービスを私のフィーチャーモジュールにインポートされた共有モジュールでエクスポートしましたが、フィーチャーコンポーネントではまだ '../ shared/lookup.service 'から'import {LookupService}が必要です;' - ここにポイントする - 共有モジュールからサービスをエクスポートする前にこれをやっていた – Anand

0

あなたLookupServiceクラスをエクスポートしていないか、それが@Injectable(であることを定義していない)

+0

サービスはうまく動作し、それは@INjectableです - 私はいくつかのre-orgとre-factorを経て、モジュールがどのように動作するかを知ろうとしています@ injectableは実行時の問題です - ビルドではありません問題。 – Anand

関連する問題