在延迟加载的子模块中找不到路由答案

【问题标题】：Route not found in lazy loaded sub module在延迟加载的子模块中找不到路由
【发布时间】：2018-02-22 03:28:49
【问题描述】：

好的，我这里有一个奇怪的情况。也许我把嵌套推得太远了，但让我们看看。

我有一堆看起来像这样的模块： AppModule -> QuoteModule -> CarModule

AppModule 和 QuoteModule 已加载，CarModule 为延迟加载。

现在在 AppModule 路由中，我有这个：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { QuoteComponent } from '@modules/quote/components/quote/quote.component';

const routes: Routes = [
    { path: 'quote', component: QuoteComponent },
    { path: 'maintenance', loadChildren: 'app/modules/maintenance/maintenance.module#MaintenanceModule' },
    { path: 'error', loadChildren: 'app/modules/errors/errors.module#ErrorsModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这条路线很好。 QuoteComponent 在点击 /quote 时加载

在我的报价模块中，我有这个路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { QuoteComponent } from '@modules/quote/components/quote/quote.component';

const routes: Routes = [
    { path: '', component: QuoteComponent, children: [
        { path: 'quote/car', loadChildren: 'app/modules/quote/car/car.module#CarModule'}
    ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class QuoteRoutingModule { }

这很好用，当点击/quote/car时，我懒加载汽车模块并点击CarModule路由的空白路由，即：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CarInfoComponent } from '@modules/quote/car/components/car-info/car-info.component';

const routes: Routes = [
    { path: '', children: [
        { path: 'quote/car/info', component: CarInfoComponent, outlet: 'quote'}
    ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CarRoutingModule { }

我的问题是我的汽车模块将在子路线中分开，例如：quote/car/info、quote/car/color、quote/car/something...

当我点击报价/汽车/信息时，我收到此错误：Error: Cannot match any routes. URL Segment: 'quote/car/info'

编辑： 我的 CarModule 如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CarRoutingModule } from './car-routing.module';
import { CarInfoComponent } from './components/car-info/car-info.component';

@NgModule({
    imports: [
        CommonModule,
        CarRoutingModule
    ],
    declarations: [CarInfoComponent],
    exports: [CarInfoComponent]
})
export class CarModule { }

我错过了什么吗？

【问题讨论】：

与quote/car/car/info 你应该得到它。如果您仍然想要报价/汽车/信息，请在 CarModule 的路由中将路径 car/info 更改为 info
是 car/info 还是 car 模块中的 /info ？因为当汽车模块被加载时，它是报价/汽车......然后对于信息，路径应该是信息......尝试一次
{ 路径：'info'，组件：CarInfoComponent，出口：'quote'}
不幸的是没有。它不工作。就像，如果在我的 QuoteComponent 中未定义路线报价/汽车/信息，则它没有访问汽车模块
在 CarModule 路由中，我尝试使用 quote/car/info、car/info 和只是 info。它不工作

标签： angular routing lazy-loading

【解决方案1】：

知道了。作为参考，这是我的解决方法：

在我的 AppComponent 中，我有一个 <router-outlet> 来加载 QuoteComponent，在 QuoteComponent 中，我有一个 <router-outlet name="quote">，我试图在其中加载 CarComponent 的子路由。

我刚刚从 QuoteComponent 的路由器出口中删除了name="quote"，并且所有对儿童路线中的报价出口的引用都有效。

我很难确定子插座，但显然插座中有泡沫效应。子路由将加载到层次结构的第一个父出口中。

我希望它对某人有所帮助。

【讨论】：