Angular - 无法加载延迟加载的模块

Question

I have a problem with lazy loading of a module in Angular. I have just upgrade from Angular 12 to Angular 13.

There is one module that does not load correctly. When the browser tries to download the module it gets a 404 . The module in question is biot-biot-module . When I look at the Lazy Chuck Files after compile, this module looks different from the others. It looks like it tries to bundle the css. The result is that src_app_biot_biot_module_ts.js is not generated.

Any ideas why this happens? As far as I can see, all the modules are configured in the same way.

Initial Chunk Files                                    | Names                                    | Raw Size
main.js                                                | main                                     | 22.71 MB |
runtime.js                                             | runtime                                  | 15.89 kB |

Lazy Chunk Files                                       | Names                                    | Raw Size
src_app_biot_biot_module_ts.css, biot-biot-module.js   | biot-biot-module                         | 19.34 MB |
src_app_telegrams_telegrams_module_ts.js               | telegrams-telegrams-module               | 12.04 MB |
src_app_model-management_model-management_module_ts.js | model-management-model-management-module | 10.98 MB |
src_app_key-management_key-management_module_ts.js     | key-management-key-management-module     |  5.51 MB |
src_app_gum_gum_module_ts.js                           | gum-gum-module                           |  4.34 MB |
src_app_lora_lora_module_ts.js                         | lora-lora-module                         |  3.30 MB |

AppRoutingModule

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'telegrams',
    loadChildren: () => import('./telegrams/telegrams.module').then(m => m.TelegramsModule),
  },
  {
    path: 'biot',
    loadChildren: () => import('./biot/biot.module').then(m => m.BiotModule),
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '/home'
  }
];


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

Biot module

@NgModule({
  declarations: [
    // components
  ],
  imports: [
    CommonModule,
    SharedModule,
    BiotRoutingModule
  ]
})
export class BiotModule { }

Biot routing module

const routes: Routes = [
  {
    path: '',
    component: BiotComponent,
    children: [
      {
        path: 'rules', component: RulesComponent,
      },
    ]
  }
];

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

Answer 1

i am having same issue, actually i am having this issue while using local api, i don't get this error while using live api