Routes Lazy loading not being loaded after login

Question

Lazyloading modules are only loaded after I re-load the page.

In an application I have a problem: when I log in successfully, I am redirected to a route called 'Dashboard', but from there when I try to access any lazy module, this module is not loaded, no error occurs, the URL changes the title attribute peacefully, but the component is not loaded on the screen. Everything goes back to normal if I reload the page (F5), then I can access the lazy modules.

Summing up: When I soon in the application, if I click on any link that takes me to a route that loads a lazy module, it is not loaded.

No errors occur in the console, and when I try to access these lazy modules in the network tab no request is made for Chunck.

The Chunks are being generated perfectly.

Below my main route file:

export const routes: Routes = [
{
    path: 'dashboard',
    component: SistemaComponent,
    canActivate: [SistemaLiberadoGuard,
        SistemaGuard],
        data: {
            title: 'dashboard'
        }
    },
    {
        path: 'login',
        component: S4LoginComponent,
        canActivate: [ LoginGuard ],
        data: {
            title: 'login'
        }
    },
    {
        path: 'usuarios',
        loadChildren: './usuario-perfil-permissoes/usuario-perfil-permissoes.module#UsuarioPerfilPermissoesModule'
    },
    {
        path: 'liberacaosistema',
        loadChildren: './liberacao-sistema/liberacao-sistema.module#LiberacaoSistemaModule',
    },
    {
        path: 'profileusuario',
        loadChildren: './profile/profile.module#ProfileModule',
    },
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'dashboard'
    },
    {
        path: '**',
        component: S4NotFoundComponent,
        data: {
            title: 'Page Not Found'
        }
    }

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

Below the file of routes of one of the modules that are being lazily loaded:

export const routes: Routes = [
  {
      path: '',
      component: ProfileComponent,
      canActivate: [SistemaGuard],
      data: {
            title: 'Profile'
      }
  }
]

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

Below my app.module

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        AccordionModule,
        ButtonModule,
        ScrollPanelModule,
        BrowserAnimationsModule,
        CoreModule,
        SistemaModule,
        LoadingModule,
        AppRoutingModule,
        ErrorsModule,
    ],
    declarations: [
        AppComponent,
        AppMenuComponent,
        AppSubMenuComponent,
    ],
    providers: [
        {provide: LocationStrategy, useClass: HashLocationStrategy},
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Below my login method :

login() {
    const userName = this.loginForm.get('userName').value;
    const password = this.loginForm.get('password').value;

    this.autenticacaoService.autenticar(userName, password)
    .subscribe(() => {
        this.router.navigate(['', 'dashboard']);
    },
    err => {
        this.showMessage('error', 'dados de login inválidos');
        this.loginForm.reset();
        this.platformDetectorService.isPlatformBrowser() && this.userNameInput.nativeElement.focus();
    })
  }

Answer 1

If I understand your code correctly, the component remains to be loaded into the module.

Take a look at this code to see if it helps you:

App.routing

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

import { MenuComponent } from './menu/menu.component';

const routes: Routes = [
  {path: '', component: MenuComponent},
  {path: 'triagem', loadChildren: './triagem/triagem.module#TriagemModule'},
  {path: 'setor', loadChildren: './setor/setor.module#SetorModule'},
  {path: 'rotas', loadChildren: './rotas/rotas.module#RotasModule'},
];

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

App module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And the components would look like this: sector-routing

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

import { SetorComponent } from './setor.component';
import { SetorFormComponent } from './setor-form/setor-form.component';

const routes: Routes = [
  {path: '', component: SetorComponent},
  {path: 'new', component: SetorFormComponent},
  {path: 'edit/:id', component: SetorFormComponent},
];

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

Sector.module

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

import { ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from 'src/app/compartilhado/shared/shared.module';
import { CalendarModule } from 'primeng/calendar';
import {InputTextareaModule} from 'primeng/inputtextarea';

import { SetorRoutingModule } from './setor-routing.module';
import { SetorComponent } from './setor.component';
import { SetorFormComponent } from './setor-form/setor-form.component';

@NgModule({
  declarations: [SetorComponent, SetorFormComponent],
  imports: [
    CommonModule,
    SetorRoutingModule,
    ReactiveFormsModule,
    SharedModule,
    CalendarModule,
    InputTextareaModule,
  ]
})
export class SetorModule { }

Routes within Sector.component.ts

onCreate() {
    this.router.navigate(['setor/new']);
  }

  onEdit(id) {
    this.router.navigate(['setor/edit/'+id]);
  }