我正在使用 Angular 8
我的路由定义如下
app-routing.module.ts
const appRoutes: Routes = [
{
path: '',
loadChildren: () => import('./@shared/layouts/dashboard-layout/dashboard-layout.module').then(m => m.DashboardLayoutModule)
},
{
path: '',
loadChildren: () => import('./@shared/layouts/auth-layout/auth-layout.module').then(m => m.AuthLayoutModule),
},
{path: '404', component: NotFoundComponent},
{path: '**', redirectTo: '/404'}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
DashboardLayoutModule-> dashboard-layout.routing.ts
const routes: Routes = [
{
path: '', redirectTo: 'qr/create', pathMatch: 'full',
},
{
path: 'qr', redirectTo: 'qr/create', pathMatch: 'full'
},
{
path: '', component: DashboardLayoutComponent, children: [
{
path: 'settings', loadChildren: () => import('../../../views/settings/settings.module').then(m => m.SettingsModule),
canActivate: [AuthGuardService]
},
{
path: 'qr/create', loadChildren: () => import('../../../views/create-qr/create-qr.module').then(m => m.CreateQrModule)
},
{
path: 'qr/create/:id/', loadChildren: () => import('../../../views/create-qr/create-qr.module').then(m => m.CreateQrModule)
},
{
path: 'qr', loadChildren: () => import('../../../views/designer/designer.module').then(m => m.DesignerModule)
},
{
path: 'qr', loadChildren: () => import('../../../views/qr/qr.module').then(m => m.QrModule)
},
{
path: 'analytics', loadChildren: () => import('../../../views/analytics/analytics.module').then(m => m.AnalyticsModule),
canActivate: [AuthGuardService]
},
{
path: 'leads', loadChildren: () => import('../../../views/leads/leads.module').then(m => m.LeadsModule),
canActivate: [AuthGuardService]
},
{
path: 'profile', loadChildren: () => import ('../../../views/profile/profile.module').then(m => m.ProfileModule),
canActivate: [AuthGuardService]
},
{
path: 'support', loadChildren: () => import ('../../../views/support/support.module').then(m => m.SupportModule)
},
{
path: 'subscription', loadChildren: () => import ('../../../views/subscription/subscription.module').then(m => m.SubscriptionModule),
canActivate: [AuthGuardService]
}
]
},
];
@NgModule({
imports: [
RouterModule.forChild(routes)
]
})
export class DashboardLayoutRouting {
}
当在本地甚至在开发环境中进行生产时,一切正常。但是在生产服务器上,导航无法正常工作并出现错误
ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet
at vn.activateWith (main-es2015.8496fab846e7208312ae.js:formatted:38396)
at _e.activateRoutes (main-es2015.8496fab846e7208312ae.js:formatted:36807)
at main-es2015.8496fab846e7208312ae.js:formatted:36766
at Array.forEach (<anonymous>)
at _e.activateChildRoutes (main-es2015.8496fab846e7208312ae.js:formatted:36765)
at _e.activateRoutes (main-es2015.8496fab846e7208312ae.js:formatted:36811)
at main-es2015.8496fab846e7208312ae.js:formatted:36766
at Array.forEach (<anonymous>)
at _e.activateChildRoutes (main-es2015.8496fab846e7208312ae.js:formatted:36765)
at _e.activate (main-es2015.8496fab846e7208312ae.js:formatted:36711)
at o.project (main-es2015.8496fab846e7208312ae.js:formatted:37865)
at o._next (main-es2015.8496fab846e7208312ae.js:formatted:38949)
at o.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at l._next (main-es2015.8496fab846e7208312ae.js:formatted:42254)
at l.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at o._next (main-es2015.8496fab846e7208312ae.js:formatted:38953)
at o.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at c.notifyNext (main-es2015.8496fab846e7208312ae.js:formatted:31944)
at i._next (main-es2015.8496fab846e7208312ae.js:formatted:538)
at i.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at o._next (main-es2015.8496fab846e7208312ae.js:formatted:38953)
at o.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at t._subscribe (main-es2015.8496fab846e7208312ae.js:formatted:39462)
at t._trySubscribe (main-es2015.8496fab846e7208312ae.js:formatted:22325)
at t.subscribe (main-es2015.8496fab846e7208312ae.js:formatted:22317)
at s.call (main-es2015.8496fab846e7208312ae.js:formatted:38936)
at t.subscribe (main-es2015.8496fab846e7208312ae.js:formatted:22317)
at o (main-es2015.8496fab846e7208312ae.js:formatted:30375)
at c._innerSub (main-es2015.8496fab846e7208312ae.js:formatted:31927)
at c._next (main-es2015.8496fab846e7208312ae.js:formatted:31919)
at c.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at c.notifyNext (main-es2015.8496fab846e7208312ae.js:formatted:31944)
at i._next (main-es2015.8496fab846e7208312ae.js:formatted:538)
at i.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at o._next (main-es2015.8496fab846e7208312ae.js:formatted:38953)
at o.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at l._next (main-es2015.8496fab846e7208312ae.js:formatted:42254)
at l.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at c.notifyNext (main-es2015.8496fab846e7208312ae.js:formatted:512)
at i._next (main-es2015.8496fab846e7208312ae.js:formatted:538)
at i.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at o._next (main-es2015.8496fab846e7208312ae.js:formatted:38953)
at o.next (main-es2015.8496fab846e7208312ae.js:formatted:717)
at w._complete (main-es2015.8496fab846e7208312ae.js:formatted:35438)
at w.complete (main-es2015.8496fab846e7208312ae.js:formatted:725)
at H._complete (main-es2015.8496fab846e7208312ae.js:formatted:739)
at H.complete (main-es2015.8496fab846e7208312ae.js:formatted:725)
at c._complete (main-es2015.8496fab846e7208312ae.js:formatted:508)
at complete (main-es2015.8496fab846e7208312ae.js:formatted:725)
at t._subscribe (main-es2015.8496fab846e7208312ae.js:formatted:39463)
at v (polyfills-es2015.7cc86a7ad57851d5c4e3.js:1)
at v (polyfills-es2015.7cc86a7ad57851d5c4e3.js:1)
at polyfills-es2015.7cc86a7ad57851d5c4e3.js:1
at a.invokeTask (polyfills-es2015.7cc86a7ad57851d5c4e3.js:1)
at Object.onInvokeTask (main-es2015.8496fab846e7208312ae.js:formatted:12546)
at a.invokeTask (polyfills-es2015.7cc86a7ad57851d5c4e3.js:1)
at s.runTask (polyfills-es2015.7cc86a7ad57851d5c4e3.js:1)
at _ (polyfills-es2015.7cc86a7ad57851d5c4e3.js:1)
<router-outlet></router-outlet>
位于两个文件中
答案 0 :(得分:0)
需要更改:-
DashboardLayoutModule-> dashboard-layout.routing.ts
const routes: Routes = [
{
path: '', component: DashboardLayoutComponent, children: [
{
path: '', redirectTo: 'qr/create', pathMatch: 'full',
},
{
path: 'qr', redirectTo: 'qr/create', pathMatch: 'full'
}
{
path: 'settings', loadChildren: () => import('../../../views/settings/settings.module').then(m => m.SettingsModule),
canActivate: [AuthGuardService]
},
{
path: 'qr/create', loadChildren: () => import('../../../views/create-qr/create-qr.module').then(m => m.CreateQrModule)
},
{
path: 'qr/create/:id/', loadChildren: () => import('../../../views/create-qr/create-qr.module').then(m => m.CreateQrModule)
},
{
path: 'qr', loadChildren: () => import('../../../views/designer/designer.module').then(m => m.DesignerModule)
},
{
path: 'qr', loadChildren: () => import('../../../views/qr/qr.module').then(m => m.QrModule)
},
{
path: 'analytics', loadChildren: () => import('../../../views/analytics/analytics.module').then(m => m.AnalyticsModule),
canActivate: [AuthGuardService]
},
{
path: 'leads', loadChildren: () => import('../../../views/leads/leads.module').then(m => m.LeadsModule),
canActivate: [AuthGuardService]
},
{
path: 'profile', loadChildren: () => import ('../../../views/profile/profile.module').then(m => m.ProfileModule),
canActivate: [AuthGuardService]
},
{
path: 'support', loadChildren: () => import ('../../../views/support/support.module').then(m => m.SupportModule)
},
{
path: 'subscription', loadChildren: () => import ('../../../views/subscription/subscription.module').then(m => m.SubscriptionModule),
canActivate: [AuthGuardService]
}
]
},
];
@NgModule({
imports: [
RouterModule.forChild(routes)
]
})
export class DashboardLayoutRouting {
}