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

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

为什么在我的router-outlet文件中明显有core.component.ts时出现此错误？

Answer 1

您没有在核心模块中定义路由，但您确实拥有路由器插座。

因此，routeroutletmap（路由器插座）

的错误没有提供商（也没有提供路由）

即使您的子模块中有路由（在本例中为admin模块），您还需要将路由添加到核心模块。例如，git rerere

Answer 2

这不是路由的工作原理。 loadChildren转到admin的路由器不应位于admin内。它应该在更高的级别，例如core。

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

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

在此回购广告中，app与您的core类似，而lazy与您的admin类似。

AppRoutingModule位于NgModule的{​​{1}} imports。 AppModule的路线如下：

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

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

然后，在AppRoutingModule文件夹中，/lazy位于LazyRoutingModule的{​​{1}} NgModule内。

imports包含LazyModule内的所有路由。它不知道它会是LazyRoutingModule。只有/lazy知道这一点。

/lazy只知道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 { }

请注意AppRoutingModule与LazyRoutingModule。

将所有内容翻译成您的项目文字（同样，forRoot()变为forChild()，app变为core，如果我理解您的项目结构正确），您应该能够延迟加载lazy文件夹。

让我知道它是怎么回事。