Angular 12 - Lazy loading path module does'nt work

Question

I have a jobs module which contains various components of my application. I want to do a lazy load of said module, however, it does not work when I try to access through the full path, that is, if I access through the path http://localhost:4200/job/artist it does not work but if I access through http://localhost:4200/#/artist if it works. Any idea why this happens?

lazy-loaded module's routing module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Artist } from './components/artist/artist.component';
const routes: Routes = [{
    path: 'job',
    loadChildren: () => import('../jobs/jobs.module').then(m => m.JobsModule)
}];
@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            useHash: true,
        }),
        BrowserModule],
    exports: [RouterModule]
})
export class LazyRoutingModule { }

jobs-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Artist } from './components/artist/artist.component';
const routes: Routes = [{
    path: 'artist',component: ArtistComponent,  
}];

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

You need to remove the `useHash: true` option from the router config — Brandon Taylor, Jul 19 '21 at 17:47

Juan Vicente Berzosa Tejero · Accepted Answer · 2021-07-19T19:00:49.737

4

Instead of this:

const routes: Routes = [{
    path: 'artist',component: ArtistComponent,  
}];

try this:

const routes: Routes = [
  {
    path: '', component: ArtistComponent,
    children: [
      { path: 'artist', component: ArtistComponent, },         
    ]
  }

EDIT @fralejanro improved my answer, and said that we have to put 'job' instead of just '', in order not to always redirect to artist, just with '\job\artist':

const routes: Routes = [
  {
    path: 'job', component: ArtistComponent,
    children: [
      { path: 'artist', component: ArtistComponent, },         
    ]
  }

edited Jul 19 '21 at 19:00

answered Jul 19 '21 at 17:47

Juan Vicente Berzosa Tejero

2,786
2
5
15

This worked for me. In the path replace the empty quotes with job; otherwise; always redirect to artist – scafrs Jul 19 '21 at 18:52
I'm very pleased, @fralejanro. P.S: I'll edit my answer with your apreciation, thxs! – Juan Vicente Berzosa Tejero Jul 19 '21 at 18:56

Angular 12 - Lazy loading path module does'nt work

1 Answers1