web-dev-qa-db-fra.com

Angular 6 route par défaut ne se charge pas. Comment puis-je réparer cela?

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?

angularangular6angular-routerangular-module
2
yul-dev

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!

1
yul-dev

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'
      }
    ]
  }
];
0
Amit Chigadani

Votre chemin enfant est identique à votre chemin parent 

 path: '',
component: LayoutComponent,
children: [
  {
    path: '/sample',//changed this 
    redirectTo: 'sample',
    pathMatch: 'full'
  }
0
Vaibhav Kumar Goyal