使用相同路径路由不同模块

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.

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

Answer 1

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

pathMatch: 'full'

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

Answer 2

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

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

使用相同路径路由不同模块

Routing different modules with same paths

routing

angular

angular-router

angular6