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文件夹。

让我知道如何去。