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

您没有在 核心模块 中定义路由，但是您有一个 路由器出口 。

因此错误 no provider (aka no routing is provided) for routeroutletmap (router-outlet)

即使您的子模块（在本例中为管理模块）中有路由，您也需要将路由添加到核心模块。例如，{ path: '', redirectTo: '/admin', pathMatch: 'full' }

Answer 2

路由不是这样工作的。 loadChildren 去 admin 的路由器不应该在 admin 里面。它应该在更高级别，例如 core.

作为其副作用，当您在 core 中导入路由器时，您将从该模块获得所有指令，包括 router-outlet.

在此处查看此存储库以了解路由延迟加载的工作原理：
https://github.com/meligy/routing-angular-cli

在此 repo 中，app 类似于您的 core，lazy 类似于您的 admin。

AppRoutingModule 在 AppModule 的 NgModule imports 中。 AppRoutingModule 有一条看起来像这样的路线：

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

（是的，你可以相对定义路径，从 beta-17 开始）

然后，在/lazy文件夹中，LazyRoutingModule在LazyModule的NgModuleimports中。

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() 与 forChild()。

所有这些都翻译成你的项目的话（同样，app 变成 core，lazy 变成 admin，如果我理解你的项目结构正确的话，您应该可以延迟加载 admin 文件夹。

告诉我进展如何。

Angular 2 延迟加载时没有 RouterOutletMap 的提供程序

Angular 2 No provider for RouterOutletMap when lazy loading

lazy-loading

angular2-routing

angular