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

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) :
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
