角2遅延ロード時にRouterOutletMapのプロバイダがありません

Question

最新のAngular CLIビルド（16）を使用していますが、遅延ロードルートを試していますが何らかの理由で失敗しました。新しい質問や解決策が見つかりませんこのため。

フォルダ構造：

core.component.html：

<router-outlet></router-outlet> 

core.component.ts：

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {RouterModule} from '@angular/router'; 

// Modules 
import {AdminAreaModule} from './+admin-area'; 

// Services 
import {GlobalsService, RegexService, UtilsService} from './shared'; 

// Main app component 
import {CoreComponent} from './core.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 

    // Feature modules 
    AdminAreaModule 
    ], 
    exports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    CoreComponent 
    ], 
    providers: [ 
    GlobalsService, 
    RegexService, 
    UtilsService 
    ], 
    bootstrap: [CoreComponent] 
}) 
export class CoreModule {} 

管理エリア-router.module。 ts：

import {NgModule} from '@angular/core'; 
import {RouterModule} from '@angular/router'; 

// Global modules 
import {ComponentsModule, SharedModule} from '../../shared'; 

// Lazy loaded modules 
import {AdminAreaModule} from '../admin-area.module'; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { 
     path: 'admin', 
     loadChildren: 'app/+admin-area/admin-area.module#AdminAreaModule' 
     } 
    ]) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class AdminAreaRouterModule {} 

管理-area.module.ts：

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

import {AdminAreaRouterModule} from './router'; 

import {ComponentsModule, SharedModule} from '../shared'; 

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 

    // Feature modules 
    AdminAreaRouterModule 
    ], 
    exports: [ 
    ComponentsModule, 
    SharedModule, 
    AdminAreaRouterModule 
    ] 
}) 

export class AdminAreaModule {} 

これは、エラーがスローされます：私ははっきりと私のcore.component.tsファイルにrouter-outletを持っている場合

Error in ./CoreComponent class CoreComponent - inline template:0:0 caused by: No provider for RouterOutletMap! 

は、なぜ私はこのエラーを取得していますか？

Answer 1

コアモジュールにルーティングが定義されていませんが、ルータ出口があります。

あなたのサブモジュール（この場合は、管理モジュール）内のルーティングを持っている場合でも、そこでエラーrouteroutletmapのためノープロバイダ（別名、何のルーティングが提供されていない）（ルータ-アウトレット）

は、あなたにも追加する必要がありますコアモジュールへのルーティング。たとえば、{ path: '', redirectTo: '/admin', pathMatch: 'full' }

Answer 2

これはルーティングの仕組みではありません。 loadChildrenがadminになるルータは、adminの内部にはいけません。たとえば、coreのように、より高いレベルにする必要があります。

coreにルータをインポートすると、router-outletなど、そのモジュールからすべてのディレクティブが取得されます。

遅延ロードの作品を​​ルーティングする方法を見るためにここにこのリポジトリを参照してください：このレポで
https://github.com/meligy/routing-angular-cli

、appはあなたのcoreに類似しており、lazyがあなたのadminに似ています。

AppRoutingModuleは、NgModuleimportsのAppModuleにあります。 LazyRoutingModuleはNgModuleimportsLazyModuleの中で、/lazyフォルダ内に、

その後

 
    { 
    path: 'lazy', 
    loadChildren: './lazy/lazy.module#LazyModule' 
    } 

（はい、あなたはベータ-17のように、比較的パスを定義することができます）：AppRoutingModuleは次のようになりますルートを持っています。

LazyRoutingModuleには、/lazyのすべてのルートがあります。それは/lazyになることはわかりません。 AppRoutingModuleだけがそれを知っています。

LazyRoutingModuleは、AppRoutingModuleが選択するすべてのパスを知っています。LazyRoutingModuleは、それが定義する子ルートを制御します。 LazyRoutingModuleは次のように定義されている間

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

：AppRoutingModuleは、次のように定義されている理由です

 
@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule], 
    providers: [] 
}) 
export class LazyRoutingModule { } 

はforChild()対forRoot()に注意してください。そのすべてのプロジェクトの言葉に翻訳して

は（再び、appはcoreになり、私は右のプロジェクトの構造を理解していればlazyは、adminなります）、あなたは怠惰な負荷adminフォルダにできるはずです。

どうすればいいか教えてください。