Angular 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 {}

admin-area-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 {}

管理区域.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!

当我的 router-outlet 文件中明确包含 router-outlet 时，为什么会出现此错误？

Answer 1

您没有在核心模块中定义路由，但您确实有一个router-outlet。

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

即使您的子模块（在本例中为管理模块）中有路由，您也需要将路由添加到核心模块。例如{ 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 的路线如下所示：

{ 路径：'懒惰'， loadChildren: './lazy/lazy.module#LazyModule' }

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

那么，在/lazy 文件夹内，LazyRoutingModule 在NgModule imports 的LazyModule 中。

LazyRoutingModule 拥有/lazy 内的所有路由。它不知道会是/lazy。只有AppRoutingModule 知道这一点。

LazyRoutingModule 只知道AppRoutingModule 为它选择的任何路径，LazyRoutingModule 将控制它在该路径下定义的子路由。

这就是为什么AppRoutingModule 是这样定义的：

@NgModule({ 进口：[RouterModule.forRoot(routes)]， 出口：[路由器模块]， 提供者：[] }) 导出类 AppRoutingModule { }

而LazyRoutingModule 定义为：

@NgModule({ 进口：[RouterModule.forChild(routes)]， 出口：[路由器模块]， 提供者：[] }) 导出类 LazyRoutingModule { }

注意forRoot() 与forChild()。

所有翻译成你的项目的话（同样，app 变成 core，lazy 变成 admin，如果我理解你的项目结构正确），你应该能够延迟加载 @987654358 @文件夹。

告诉我进展如何。