Pesquisa de site

typescript - O LazyLoading está quebrado no Angular? ChunkLoadError: Falha ao carregar o chunk xxx

Tendo o seguinte no app-routing.module.ts da minha aplicação Angular 15:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AuthorizationGuard } from './core/authorization/authorization.guard';
import { LoginComponent } from './core/authorization/login/login.component';
import { RolesGuard } from './core/authorization/roles.guard';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
import { ProjectModule } from './project/project.module';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthorizationGuard]
  },
  {
    path: 'projects',
    loadChildren: () => ProjectModule, //  import('./project/project.module').then(m => m.ProjectModule)
    canActivate: [AuthorizationGuard]
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthorizationGuard, RolesGuard],
    data: { roles: ['admin', 'admin-dsn'] }
  },
  { path: 'login', component: LoginComponent },
  { path: 'error/:status', component: ErrorComponent },
  { path: '', redirectTo: 'projects', pathMatch: 'full' },
  { path: '**', redirectTo: 'error/404' }
];

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

Se eu entendi bem, o código comentado ativou o carregamento preguiçoso. Ao usar o código comentado, tive o seguinte erro:

app-routing.module.ts:18 ERRO Erro: Não capturado (na promessa): ChunkLoadError: Falha ao carregar o fragmento Client_app_project_project_module_ts. (faltando: http://localhost:4200/Client_app_project_project_module_ts.js) ChunkLoadError: Falha ao carregar o fragmento Client_app_project_project_module_ts. (faltando: http://localhost:4200/Client_app_project_project_module_ts.js) em webpack_require.f.j (carregamento de fragmento jsonp:27:1) em garantir fragmento:6:1

procurando problemas semelhantes no SO, como este, vejo que a solução proposta é recarregar a página quando tais erros aparecem...

Não tenho certeza se recarregar a página raramente quando erros arbitrários como este são capturados é uma ideia realmente boa. Alguém poderia explicar para que serve esse "lazy loading", ele está quebrado no Angular e, se sim, deveria ser consertado ou é um comportamento normal?

P.S.

Se eu restaurar o

loadChildren: () => import('./project/project.module').then(m => m.ProjectModule),

e comente todo o código project.competent deixando apenas a declaração em .ts

@Component({
  selector: 'project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.scss']
})
export class ProjectComponent {}

e reduzir o project.component.html para <p>project component</p> ainda obtém o mesmo erro de Chunk.

Artigos relacionados