My pages does not appear after an authentification in Angular 12

I am completely lost in my paths (parent and child)

1. I enter the identifications (pseudo -> toto and password -> 1234)

img - login

2. I am redirected to the Portfolio page

enter image description here

For now, I don't have any problem

3. When I click on Account Opening, the Account Opening doesn't work !

img - Account Opening doesn't work

The schema is presented like this

img - Schema

dashboard-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CanActivateTeam } from '../../core/canActivateTeam.guard';
import { DashboardComponent } from './dashboard.component';

const DASHBOARD_ROUTES: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [CanActivateTeam],

    children: [
      {
        path: 'administration',
        loadChildren: () =>
          import('./views/administration/administration.module').then(
            (m) => m.AdministrationModule
          ),
      },
      {
        path: 'market',
        loadChildren: () =>
          import('./views/market/market.module').then((m) => m.MarketModule),
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(DASHBOARD_ROUTES)],
  exports: [RouterModule],
})
export class DashboardRoutingModule {}

administration-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from '../../dashboard.component';

import { AdministrationComponent } from './administration.component';

import { AccountOpeningComponent } from './views/account-opening/account-opening.component';
import { PortfolioComponent } from './views/portfolio/portfolio.component';



export const ADMINISTRATION_ROUTES: Routes = [

  {
    path: 'dashboard',
    component: DashboardComponent,

    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'portfolio',
      },
      {
        path: 'portfolio',
        component: PortfolioComponent,
      },
      {
        path: 'account-opening',
        component: AccountOpeningComponent,
      },
    ],
  },
  
];

@NgModule({
  imports: [RouterModule.forChild(ADMINISTRATION_ROUTES)],
  exports: [RouterModule],
})
export class AdministrationRoutingModule {}

I don't know how to solve this, I have tried almost everything.

The code is available here.

I'm sure these are the paths but I'm completely lost...

Thanks

CodePudding user response：

you have to be more explicit sample

submenus: [
        {
          class: 'bx bx-key',
          item: 'Account Opening',
          route: '/dashboard/administration/account-opening',
        },
        {
          class: 'bx bx-wallet',
          item: 'Portfolio',
          route: '/dashboard/administration/portfolio',
        },
      ],

CodePudding user response：

In dashboard.component.ts you can:

• For Expanding menu items, you don't want them to have routes since their components only holds the router-outlet and I assume you also you don't want to navigate anywhere yet.

      class: 'bx bx-lock-alt',
      item: 'Administration',
      route: '/dashboard/adiministration', // <- Remove this line
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

You can do the same for the Market menu item

• For the market submenus you need to explicitly specify the route as there are grandchildren of dashboard

      {
         class: 'bx bx-coin-stack',
         item: 'Value',
         route: '/market/value', // <- /dashboard/market/value
       },
       {
         class: 'bx bx-line-chart',
         item: 'Indice',
         route: '/market/indice',  // <- /dashboard/market/indice
       },