重新加载 Angular 应用后样式丢失

Question

该应用程序工作正常，但当用户单击刷新按钮时，某些 material 样式会中断。我该如何纠正这个错误？

其他信息：使用 angular 10 和 Firebase。该应用程序使用了惰性模块，我认为这与问题有一定关系，因为它只在另一个路由模块内中断而不是在主路由模块内中断。

一些代码：

Styles.css

@import 'material-icons/iconfont/material-icons.css';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
    
body {
  font-family: sans-serif;
  font-weight: 400;
  color: rgb(112, 112, 112);
  margin: 0;
}

应用-routing.module.ts

const appRoutes: Routes = [
  { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.LoginModule) },
  { path: 'redefinir-senha', component:RedefinirSenhaComponent },
  { path: 'home', loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule), 
    canActivate: [AuthGuard] },
  { path: '', component: AppComponent}
];
    
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
  providers: [AuthGuard],
})

首页-routing.module.ts

const routes: Routes = [
  {
    path: '', 
    component: HomeComponent, children: [
      { path: 'mudar-senha', component: RedefinicaoDeSenhaComponent },
      { path: 'relatorio', loadChildren: () => import('../relatorio/relatorio.module').then(m => m.RelatorioModule) },
      { path: 'pesquisa-relatorio', loadChildren: () => import('../pesquisa-relatorio/pesquisa-relatorio.module').then(m => m.PesquisaRelatorioModule) },
      { path: 'pesquisa-viagens', loadChildren: () => import('../pesquisa-viagens/pesquisa-viagens.module').then(m => m.PesquisaViagensModule) },
      { path: 'dados-de-viagem', loadChildren: () => import('../dados-de-viagem/dados-de-viagem.module').then(m => m.DadosDeViagemModule) },
      { path: 'configuracoes', loadChildren: () => import('../configuracoes/configuracoes.module').then(m => m.ConfiguracoesModule), 
      canActivate: [AdminGuard] }
    ],
  }
]; 
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })

Answer 1

我通过更改 angular.json 生产配置中的选项源映射和 css 提取来解决。我还不知道哪个是对的

重新加载 Angular 应用后样式丢失

Loosing Styles After Reloading Angular App

angular

angular-material

lazy-loading