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
– Brandon Taylor, Commented Jul 19, 2021 at 17:47

Juan Vicente Berzosa Tejero · Accepted Answer · 2021-07-19 19:00:49Z

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, 2021 at 19:00

answered Jul 19, 2021 at 17:47

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

scafrs Over a year ago

This worked for me. In the path replace the empty quotes with job; otherwise; always redirect to artist

Juan Vicente Berzosa Tejero Over a year ago

I'm very pleased, @fralejanro. P.S: I'll edit my answer with your apreciation, thxs!

Collectives™ on Stack Overflow

Angular 12 - Lazy loading path module does'nt work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related