Angular - 無法加載延遲加載的模塊

Question

我在 Angular 中延遲加載模塊時遇到問題。 我剛剛從 Angular 12 升級到 Angular 13。

有一個模塊無法正確加載。 當瀏覽器嘗試下載模塊時，它會收到404 。 有問題的模塊是biot-biot-module 。 當我在編譯后查看 Lazy Chuck Files 時，這個模塊看起來與其他模塊不同。 看起來它試圖捆綁 css。 結果是沒有生成src_app_biot_biot_module_ts.js 。

任何想法為什么會發生這種情況？ 據我所見，所有模塊都以相同的方式配置。

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 |

應用路由模塊

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

生物模塊

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

Biot路由模塊

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

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

Answer 1

我有同樣的問題，實際上我在使用本地 api 時遇到了這個問題，我在使用實時 api 時沒有收到這個錯誤