typescript - Angular 12 - La ruta de carga diferida del módulo no funciona

Tengo un módulo de trabajos que contiene varios componentes de mi aplicación. Quiero hacer una carga diferida de dicho módulo, sin embargo, no funciona cuando intento acceder a través de la ruta completa, es decir, si accedo a través de la ruta http://localhost:4200/job/artist no funciona, pero si accedo a través de http://localhost:4200/#/artist sí funciona. ¿Alguna idea de por qué sucede esto?

módulo de enrutamiento del módulo cargado perezosamente

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 { }

Respuesta #1

En lugar de esto:

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

prueba esto:

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

EDIT @fralejanro mejoró mi respuesta y dijo que tenemos que poner 'job' en lugar de solo '', para no redirigir siempre al artista, solo con '\job\artist':

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