Olá, estou trabalhando com o angular 2(v4+), onde minha aplicação tem a seguinte estrutura contendo 2 módulos que são carregados dinamicamente (via loadChildren
):
Estrutura do diretório
app
|-foo
| |- foo.module
| |- ... (foo components)
|-bar
| |- bar.module
| |- ... (bar components)
AppRouting.ts
export const AppRoutes: Routes = [
{ path: '', loadChildren: './foo/foo.module#FooModule' },
{ path: 'bar', loadChildren: './bar/bar.module#BarModule' }
];
FooRouting.ts
export const FooRoutes: Routes = [
{ path: '', component: ManageComponent },
{ path: ':id', component: DetailsComponent },
{ path: 'list', component: ListComponent },
{ path: '**', component: FooErrorNotFoundComponent }
];
BarRouting.ts
export const BarRoutes: Routes = [
{ path: '', component: WorkspaceComponent },
{ path: 'view', component: ViewComponent },
{ path: 'another', component: AnotherComponent },
];
O meu problema é o seguinte:
- Preciso que cada sub-módulo tenha sua própria tela de erro, porque os subcomponentes dela podem mudar como barras de navegação, etc...
- Quando uso a estrutura acima e tento acessar a url
localhost:300/bar/view
o Angular está me direcionando para a pagina de erro de Foo, ou seja, ele não está respeitando inicialmente as rotas do AppRouting e indo direto para Foo. - Se removo a página de erro de Foo, ai sim o Angular me direciona para o submódulo Bar.
Como posso manter a página de erro do módulo Foo mas forçando o Angular a respeitar a estrutura inicial de roteamento de App?