Angular routes don't work on the first load

Viewed 43

As I sayed in the title some components don't load at the first call but work when I reload the page (F5).
enter image description here

Here I just logged myself. I have to see my dashboard (like you can see in the URL) but my router-outlet isn't feed with the BoardComponent.

Now I reload my page (F5) :

enter image description here

My BoardComponent load correctly.

First thing first, my AppRoutingModule :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserNewPasswordComponent } from './core/modules/user/pages/new-password/user-new-password.component';
import { AuthGuard } from '@guards/auth.guard';
import { ConsultantGuard } from 'src/app/core/modules/consultant/guard/consultant.guard';
import { AdminGuard } from './core/modules/admin/guard/admin.guard';
import { SdrGuard } from './core/modules/sdr/guard/sdr.guard';

const routes: Routes = [
  { path: 'reset-password', component: UserNewPasswordComponent },
  { path: 'home', loadChildren: () => import('./core/modules/user/user.module').then(m => m.UserModule), canActivate: [AuthGuard]},
  { path: 'connexion', loadChildren: () => import('./core/modules/auth/connexion.module').then(m => m.ConnexionModule)},
  { path: 'survey', loadChildren: () => import('./core/components/survey/survey.module').then(m => m.SurveyModule)},
  { path: 'calendly', loadChildren: () => import('./core/components/take-rendez-vous/take-rendez-vous.module').then(m => m.TakeRendezVousModule)},
  { path: 'offers', loadChildren: () => import('./core/components/offers/offers.module').then(m => m.OffersModule)},
  { path: 'sdr', runGuardsAndResolvers: 'always', canActivate: [SdrGuard], loadChildren: () => import('./core/modules/sdr/sdr.module').then(m => m.SdrModule)},
  { path: 'consultant', runGuardsAndResolvers: 'always', canActivate: [ConsultantGuard], loadChildren: () => import('./core/modules/consultant/consultant.module').then(m => m.ConsultantModule)},
  { path: 'admin', runGuardsAndResolvers: 'always', canActivate: [AdminGuard], loadChildren: () => import('./core/modules/admin/admin.module').then(m => m.AdminModule)},
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthGuard],
    loadChildren: () => import('./core/modules/user/user.module').then(m => m.UserModule)
  },
];

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

This is my AdminModule:

import { BoardComponent } from './pages/board/board.component';
import { SdrComponent } from './pages/sdr/sdr.component';
import { AdminRoutingModule } from './admin-routing.module';
import { SharedModule } from '@shared/shared.module';
import { NgModule } from '@angular/core';
import { PartnersComponent } from './pages/partners/partners.component';
import { FormsModule } from '@angular/forms';
import { CrmModule } from '@shared/components/crm/crm.module';
import { ConsultantsComponent } from './pages/consultants/consultants.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    AdminRoutingModule,
    CrmModule
  ],
  declarations: [
    PartnersComponent,
    ConsultantsComponent,
    SdrComponent,
    BoardComponent
  ],
  exports: [
  ],
})
export class AdminModule {
  constructor() {
    console.log('AdminModule loaded !');
  }
}

AdminRoutingModule:

import { BoardComponent } from './pages/board/board.component';
import { CrmComponent } from '@shared/components/crm/crm.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ConsultantUserEditProfilComponent } from '../consultant/pages/user-edit-profil/consultant-user-edit-profil.component';
import { PartnersComponent } from './pages/partners/partners.component';
import { ConsultantsComponent } from './pages/consultants/consultants.component';
import { SdrComponent } from './pages/sdr/sdr.component';

const routes: Routes = [
  { path: 'crm', component: CrmComponent},
  { path: 'dashboard', component: BoardComponent},
  { path: 'partners', component: PartnersComponent},
  { path: 'consultants', component: ConsultantsComponent},
  { path: 'sdr', component: SdrComponent},
  { path: 'edit-profile/:id', runGuardsAndResolvers: 'always', component: ConsultantUserEditProfilComponent },
  {
    path: '',
    redirectTo: 'dashboard'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule {
  constructor() {
    console.log('AdminRoutingModule loaded !');
  }
 }

Please, if you need informations go to the github projet : https://github.com/AntoineRenoux/Clovis-Angular/tree/master/src
or ask me

PS1: In my LogginComponent I reddirect my my user with a simple :

this.route.navigate(['/admin']);

PS2: I have the same problem on all pages, this just an exemple

Thanks for reading

0 Answers
Related