J'ai un projet angulaire 6 structuré comme ci-dessous ...
src
|- app
| |- core
| | |- layout.component.ts/html/scss
| | |- core.module.ts
| |- views
| | |- modules
| | | |- sample
| | | | |- sample.component.ts/html/scss
| | | | |- sample-routing.module.ts
| | | | |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts
... avec la structure de routage de l'exemple de module ressemblant à ...
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: SampleComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SampleRoutingModule { }
... et le module de routage des applications ressemblant à ...
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: '',
redirectTo: 'sample',
pathMatch: 'full'
},
{
path: 'sample',
loadChildren: './views/sample/sample.module#SampleModule'
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Le comportement que je remarque est que lorsque je sers l'application, la route de base par défaut supposée être le layout component
ne se charge pas. Au lieu de cela, je reçois un écran blanc sans erreur dans la console. Ensuite, si je tape http://localhost:4200/sample
, j'obtiens le comportement correct. Néanmoins, cette redirection initiale ne doit toujours pas charger le composant de présentation contenant le module exemple. app.component.html
a le <router-outlet></router-outlet>
ainsi que le layout.component.html
Je cherche cela depuis plus de temps que je ne veux l'admettre. Peut-être que l'emplacement du composant de présentation est plus important que je ne le pense, il devrait donc être enregistré dans le module d'application?
J'avais une RouterModule
importée et une routes
définie dans un ancien module non lié du même projet avec une route par défaut. Quelque chose comme...
const routes = {
{
path: '',
component: RandomComponent
}
}
...
imports: [RouterModule.forChild(routes)]
...
Le fait de supprimer cela a corrigé le routage que je tentais de mettre en œuvre. Angular doit avoir essayé d’enregistrer certains lieux très désirés. Sentez-vous un peu stupide à ce sujet pour être honnête. Merci à ceux qui ont répondu!
Cela semble être un problème avec la redirectTo
ignorée dans les itinéraires chargés paresseux.
De toute façon, avec la configuration que vous avez, vous pouvez effectuer une redirection au sein même de votre route enfant.
sample.routing
const routes: Routes = [
{
path: '',
children: [
{
path: '',
redirectTo: 'sample',
pathMatch: 'full'
},
{
path: 'sample',
component: SampleComponent,
},
]
}
];
Et app.routing
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: '',
loadChildren: './views/sample/sample.module#SampleModule'
}
]
}
];
Votre chemin enfant est identique à votre chemin parent
path: '',
component: LayoutComponent,
children: [
{
path: '/sample',//changed this
redirectTo: 'sample',
pathMatch: 'full'
}