Angular 2沒有提供RouterOutletMap的延遲加載

Question

我正在使用最新的Angular CLI build（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 {} 

這將引發一個錯誤：

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

爲什麼會出現這個錯誤時，我清楚地在我core.component.ts文件router-outlet？

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位於AppModule的NgModuleimports。 AppRoutingModule有看起來像這樣的路線：

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

（是的，你可以比較確定的路徑，例如β-17）

然後，/lazy文件夾內，LazyRoutingModule是importsLazyModule的NgModule 。

LazyRoutingModule具有內部/lazy所有路由。它不知道它會是/lazy。只有AppRoutingModule知道。

LazyRoutingModule只知道AppRoutingModule爲其選擇的任何路徑，LazyRoutingModule將控制它在其下定義的子路由。

這就是爲什麼AppRoutingModule這樣定義：

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

雖然LazyRoutingModule被定義爲：

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

注意forRoot() VS的forChild()。

隨着所有翻譯爲您的項目的話（再次，app變得core，並lazy成爲admin，如果我理解你的項目結構右），你應該能夠延遲加載admin文件夾。

讓我知道如何去。