Erreur de routage angulaire et bonne façon de faire ?

Question

J'ai appris à utiliser angular avec mon application ruby on rails et j'ai quelques problèmes avec le routage.

Voici mon fichier app.routing :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full', },

  {
    path: '', component: FullLayoutComponent, data: { title: 'Página Inicial' },
    children:
    [{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'organizations', loadChildren: './organizations/organizations.module#OrganizationsModule' },     
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
    export class AppRoutingModule { }

il s'agit du fichier organizations.module :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

//Routing
import { OrganizationsRoutingModule } from './organizations-routing.module';

@NgModule({
  imports: [
    OrganizationsRoutingModule
  ],
  declarations: []
})
export class OrganizationsModule{ }

et voici le fichier organizations-routing.module :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OrganizationsComponent } from './organizations.component';
import { OrganizationFormComponent } from './organization-form/organization-form.component';
import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '', pathMatch: 'full', component: OrganizationsComponent,
    data: { title: 'Organizações' },
    children: [

      {
        path: 'new', component: OrganizationFormComponent,
        data: { title: 'Cadastrar nova Organização' }
      },
      {
        path: ':id', component: OrganizationFormComponent,
        data: { title: 'Mostrar Organização' }
      },
      {
        path: ':id/edit', component: OrganizationFormComponent,
        data: { title: 'Editar Organização' }
      },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes), CommonModule, FormsModule],
  exports: [RouterModule],
  declarations:[OrganizationsComponent, OrganizationFormComponent]
})
export class OrganizationsRoutingModule { }

en procédant de cette manière, le chemin /organisations fonctionne, mais pas /organisations/new, j'obtiens cette erreur sur la console :

L'autre moyen que j'ai essayé est de tout mettre dans app.routing, ce qui donne quelque chose comme ceci :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { OrganizationsComponent } from './organizations/organizations.component';
import { OrganizationFormComponent } from './organizations/organization-form/organization-form.component';

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full', },

  {
    path: '', component: FullLayoutComponent, data: { title: 'Página Inicial' },
    children:
    [{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },    
      {
        path: 'organizations', pathMatch: 'full', component: OrganizationsComponent,
        data: { title: 'Organizações' },
      },
      {
        path: 'organizations/new', component: OrganizationFormComponent,
        data: { title: 'Cadastrar nova Organização' }
      },
      {
        path: 'organizations/:id', component: OrganizationFormComponent,
        data: { title: 'Mostrar Organização' }
      },
      {
        path: 'organizations/:id/edit', component: OrganizationFormComponent,
        data: { title: 'Editar Organização' }
      },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

cela fonctionne, mais d'après ce que j'ai vu, ce n'est pas la meilleure façon de procéder.

Comment dois-je construire mes itinéraires ?

merci !

Answer 1

Votre logique comporte de nombreuses erreurs

Tout d'abord, pourquoi rediriger '' a 'dashboard' et ont ensuite 'dashboard' être un enfant de '' ? ?

De même, vous ne devez jamais utiliser pathMatch: 'full' lorsque le path: '' a des enfants

À mon avis, vous devriez faire ce qui suit :

app-routing.module.ts

export const routes: Routes = [
  {
    path: '', component: FullLayoutComponent, data: { title: 'Página Inicial' },
    children: [
        { path: '', redirectTo: 'dashboard' },
        { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
        { path: 'organizations', redirectTo: '/organizations' },     
      ]
    },
];

organisations-routage.module

const routes: Routes = [
  {
    path: 'organizations', component: OrganizationsComponent,
    data: { title: 'Organizações' },
    children: [
      {
        path: 'new', component: OrganizationFormComponent,
        data: { title: 'Cadastrar nova Organização' }
      },
      {
        path: ':id', component: OrganizationFormComponent,
        data: { title: 'Mostrar Organização' }
      },
      {
        path: ':id/edit', component: OrganizationFormComponent,
        data: { title: 'Editar Organização' }
      },
    ]
  },
];