遅延ロードされたモジュールではシングルトンサービスが利用できません

Question

私は最近、私の単一のAppModuleを複数のモジュールに分割しましたが、今はモジュールを遅延ロードして共有モジュールのシングルトンサービスを使用しようとしています。

in the docs（同様に）の手順に従って、シングルトンサービスを提供する共有CoreModuleを作成しました。共有モジュールのサービスの一つが、シングルトンサービスのいずれかを注入しようとしたときただし、以下の例外がスローされます。

EXCEPTION: Uncaught (in promise): Error: No provider for HttpClientService! 
Error: No provider for HttpClientService! 
    at NoProviderError.BaseError [as constructor] (http://localhost:5000/lib/angular/@angular/core/bundles/core.umd.js:1105:38) 

app.module.ts

@NgModule({ 
    imports: [ 
     BrowserModule, 
     CoreModule.forRoot(), 
     AppRoutingModule 
    ] 
}) 
export class AppModule { } 

app-routing.module.ts

export const routes: Routes = [ 
    { 
     path: "mailgroups", 
     loadChildren: "app/mailgroup/mailgroup.module#MailGroupModule" // <-- lazy loading the module 
    } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ], 
}) 
export class AppRoutingModule { } 

core.module.ts（共有モジュール）

export class CoreModule { 
    constructor (@Optional() @SkipSelf() parentModule: CoreModule) { 
     if (parentModule) { 
      throw new Error("CoreModule is already loaded. Import it in the AppModule only!"); 
     } 
    } 

    static forRoot(): ModuleWithProviders { 
     return { 
      ngModule: CoreModule, 
      providers: [ 
       HttpClientService, // <-- singleton service 1 
       UserService   // <-- singleton service 2 
      ] 
     }; 
    } 
} 

mailgroup.module.ts（遅延ロードされたモジュール）面白いのは何

@NgModule({ 
    imports: [ 
     MailGroupRoutingModule 
    ] 
}) 
export class MailGroupModule { } 

は、私は怠惰なロードされたモジュールMailGroupModule、Iドンに共有モジュールCoreModuleをインポートするときにということですparentModule引数が常にnullであるため、（コンストラクタ内でthrow new Error(...)にもかかわらず）例外が発生しません。

私はここで何かが分かりませんか？

Answer 1

私の髪を引っ張っている間に「無作為に」プログラミングしてから何時間もかけて、私の努力が成果を上げました。この問題は不正な形式であったsystem.config.jsです。

SystemJSの設定をthe systemjs.config.web.js used in the docsと比較すると、アプリのフォルダとアプリケーションを起動するファイルのパスが微妙に違うことに気付きました。

✘（Malconfigured SystemJS）

System.config({ 
    paths: { ... }, 
    map: { 
     app: '/app',    // <-- This line (incorrect) 
     ... 
    }, 
    packages: { 
     app: { 
      main: '/main.js'  // <-- And this line (incorrect) 
      defaultExtension: 'js' 
     } 
    } 
}) 

注意app: '/app'における先頭のスラッシュとmain: '/main.js'の相対パスの前に。（正しいSystemJS構成）の後

✔
（app: 'app'とmain: './main.js'に変更）

System.config({ 
    paths: { ... }, 
    map: { 
     app: 'app',     // <-- This line (correct) 
     ... 
    }, 
    packages: { 
     app: { 
      main: './main.js'  // <-- And this line (correct) 
      defaultExtension: 'js' 
     } 
    } 
}) 

ので、これら二つの微妙な修正は、世界のすべての違いを作りました！

ここでもAppModule以外の共有モジュールCoreModuleをインポートしようとすると、予期したとおりに例外がスローされます。

Answer 2

ベストプラクティスによれば、CoreModuleはAppModuleの拡張です。それは共有モジュールであってはなりません。それはAppModule 共有モジュールをインポートして使用する必要があります。共有モジュール