My application has a jobs module with various components, and I'm trying to lazy load it. However, I've encountered an issue where accessing the module through the full path http://localhost:4200/job/artist doesn't work, but accessing it through http://localhost:4200/#/artist does. Any insights on why this is happening?
The routing module for the lazy-loaded 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 { }