Angular 12 - 延迟加载路径模块不起作用

问题描述

我有一个工作模块，其中包含我的应用程序的各种组件。我想对所述模块进行延迟加载，但是，当我尝试通过完整路径访问时它不起作用，也就是说，如果我通过路径 http://localhost:4200/job/artist 访问它不起作用，但如果我通过访问http://localhost:4200/#/artist 如果有效。知道为什么会发生这种情况吗？

延迟加载模块的路由模块

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

解决方法

取而代之的是：

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

试试这个：

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

EDIT @fralejanro 改进了我的答案，并说我们必须放置“job”而不仅仅是“”，为了不总是重定向到艺术家，只需使用“\job\artist”：

const routes: Routes = [
  {
    path: 'job',]
  }