使用相同的路径路由不同的模块答案

【问题标题】：Routing different modules with same paths使用相同的路径路由不同的模块
【发布时间】：2019-02-26 12:16:15
【问题描述】：

在我决定在my previous question 上合并两个 Angular 应用程序后，我遇到了另一个问题。 app1 和 app2 上的一些路由路径相同。

这是一个例子：

app.routing.ts（根）：

const routes: Routes = [
    {
        path: 'app1',
        loadChildren: './app1/app1.module#App1Module'
    },
    {
        path: 'app2',
        loadChildren: './app2/app2.module#App2Module'
    }
];

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

app1.routing.ts(App1)：

const routes: Routes = [
    {
        path: 'page1',
        component: ./app1page1/app1page1.module#App1Page1Module
    }
];

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

app2.routing.ts(App2)：

const routes: Routes = [
    {
        path: 'page1',
        component: ./app2page1/app2page1.module#App2Page1Module
    }
];

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

app1page1.routing.ts (App1 - Page1)：

const routes: Routes = [
    {
        path: '',
        component: App1Page1Component,
        children: [
            {
                path: 'subpage1',
                component: App1Subpage1Component
            }
        ]
    }
]

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

app2page1.routing.ts (App2 - Page1)：

const routes: Routes = [
    {
        path: '',
        component: App2Page1Component,
        children: [
            {
                path: 'subpage1',
                component: App2Subpage1Component
            }
        ]
    }
]

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

问题是：当我导航到例如www.mysite.com/app1/page1 我被重定向到 /app2/page1 。如何在不必为所有内容指定唯一路径的情况下修复路线？

提前致谢。

更新：我已修改示例以更准确地描述我的情况并更好地反映我的应用程序的结构。基本上有两层loadChilden。我注意到我实际上无法导航到 app1 和 app2 本身的延迟加载子项（即，如果我转到 /app2/page1/subpage1，我将被重定向到 /app1/page1/subpage1）。导航是指在浏览器中手动输入 URL 并在代码中运行 router.navigate。

更新2：重新启动我的应用程序后，我在编译过程中出错：

ERROR in Duplicated path in loadChildren detected: "./page1/page1.module#Page1Module" is used in 2 loadChildren, but they point to different modules "(/src/app/app1/page1/page1.module.ts and "/src/app/app2/page1/page1.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.

唯一的解决方案是重命名模块吗？

【问题讨论】：

这不应该发生。 stackoverflow.com/help/mcve
你如何导航到那条路线？
您是否使用forChild() 加载您的延迟加载模块路由模块？
@GCirs 我在问题中添加了新信息以更好地反映我的情况。

标签： angular routing angular6 angular-router

【解决方案1】：

它不应该被导航到那个。虽然尝试附加

pathMatch: 'full'

表示整个URL路径需要匹配，并被路由匹配算法消耗。

【讨论】：

【解决方案2】：

我设法修复了路线。我意识到有些模块在 app1 和 app2 中具有相同的名称。所以我重命名了它们。

但是现在它没有加载错误的页面，而是引发了“找不到模块”错误。即使重新启动服务器后，错误仍然存在。解决方案是在 loadChildren 中包含完整的绝对路径（例如 src/app/app1...）。

【讨论】：