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

时间:2019-02-26 12:16:15

标签: angular routing angular6 angular-router

当我决定在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.

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

2 个答案:

答案 0 :(得分:0)

嗯,它不应该导航到那个。尽管尝试附加

pathMatch: 'full' 

意味着,整个URL路径需要匹配,并由路由匹配算法消耗。

答案 1 :(得分:0)

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

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