Angular 2 延迟加载时没有提供 RouterOutletMap [英] Angular 2 No provider for RouterOutletMap when lazy loading

问题描述

我正在使用最新的 Angular CLI 版本 (16) 并且我正在尝试延迟加载路由，但由于某种原因它失败了，我找不到任何新的问题或解决方案.

I'm using the latest Angular CLI build (16) and I'm trying to lazy load routes but it fails for some reason, I can't find any new questions or solutions for this.

文件夹结构:

core.component.html:

core.component.html:

<router-outlet></router-outlet>

core.component.ts:

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:

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

admin-area.module.ts:

admin-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 时，为什么会出现此错误?

Why am I getting this error when I clearly have a router-outlet in my core.component.ts file?

推荐答案

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

You don't have routing defined in the core module, but you do have a router-outlet.

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

Hence the error no provider (aka no routing is provided) for routeroutletmap (router-outlet)

即使您的子模块(在本例中为 admin 模块)中有路由，您也需要向核心模块添加路由.例如，{ path: '', redirectTo: '/admin', pathMatch: 'full' }

Even if you have routing in your submodule (in this case, the admin module), you also need to add routing to the core module. For example, { path: '', redirectTo: '/admin', pathMatch: 'full' }

这篇关于Angular 2 延迟加载时没有提供 RouterOutletMap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！