Loosing Styles After Reloading Angular App

Issue

The App works fines but when the user clicks in the refresh button some of the material styles breaks. How do I correct this error?

Additional Information: Working with angular 10 and Firebase. The app uses lazy modules, I think this has some relation with the problem, since it only breaks inside another routing module than no the main one.

Some Code:

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

app-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],
})

home-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]
    })

Solution

I solved by changing the options source map and css extract in angular.json production configuration. I don't know which one is the right yet.

Answered By - Gabriel Souza