title: Loosing Styles After Reloading Angular App
body: <p>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?</p>
  <p><a href="https://i.stack.imgur.com/ga84S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ga84S.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/GjTmJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GjTmJ.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>Some Code:</p>
  <p>Styles.css</p>
  <pre class="lang-css prettyprint-override"><code>@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;
  }
  </code></pre>
  <p>app-routing.module.ts</p>
  <pre class="lang-js prettyprint-override"><code>const appRoutes: Routes = [
    { path: 'login', loadChildren: () =&gt; import('./components/login/login.module').then(m =&gt; m.LoginModule) },
    { path: 'redefinir-senha', component:RedefinirSenhaComponent },
    { path: 'home', loadChildren: () =&gt; import('./components/home/home.module').then(m =&gt; m.HomeModule), 
      canActivate: [AuthGuard] },
    { path: '', component: AppComponent}
  ];
      
  @NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule],
    providers: [AuthGuard],
  })
  </code></pre>
  <p>home-routing.module.ts</p>
  <pre class="lang-js prettyprint-override"><code>const routes: Routes = [
    {
      path: '', 
      component: HomeComponent, children: [
        { path: 'mudar-senha', component: RedefinicaoDeSenhaComponent },
        { path: 'relatorio', loadChildren: () =&gt; import('../relatorio/relatorio.module').then(m =&gt; m.RelatorioModule) },
        { path: 'pesquisa-relatorio', loadChildren: () =&gt; import('../pesquisa-relatorio/pesquisa-relatorio.module').then(m =&gt; m.PesquisaRelatorioModule) },
        { path: 'pesquisa-viagens', loadChildren: () =&gt; import('../pesquisa-viagens/pesquisa-viagens.module').then(m =&gt; m.PesquisaViagensModule) },
        { path: 'dados-de-viagem', loadChildren: () =&gt; import('../dados-de-viagem/dados-de-viagem.module').then(m =&gt; m.DadosDeViagemModule) },
        { path: 'configuracoes', loadChildren: () =&gt; import('../configuracoes/configuracoes.module').then(m =&gt; m.ConfiguracoesModule), 
        canActivate: [AdminGuard] }
      ],
    }
  ]; 
      
      @NgModule({
        imports: [RouterModule.forChild(routes)],
        exports: [RouterModule]
      })
  </code></pre>