Angular实现懒加载后背景视频无法加载的问题求助

云上老周

2026-6-15

Angular懒加载后背景视频加载异常排查

实现Angular懒加载后，背景视频出现以下异常：

视频无法正常加载
偶尔加载成功，但未按设置静音
刷新页面后再次无法加载

添加懒加载前视频能正常播放，已确认视频路径正确。

视频HTML代码

<video class="background-video" autoplay loop muted>
  <source src="assets/main-page-pc.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

项目配置说明

创建项目时未使用ng new web-name --no-standalone，手动创建了app-routing.module.ts
网站所有内容都在Home组件（对应home.module.ts）中，未使用默认的app.component

路由配置代码

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule) // Lazy loading the home module
  }
];

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

home.module.ts

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([{ path: '', component: HomeComponent }])
  ]
})