Стиль Angular 6 не загружается должным образом после первого входа / навигации

Question

Как сказано в заголовке, стили CSS не загружаются правильно.Только после перезагрузки страницы.

Сначала при входе в систему:

Затем после обновления страницы:

Маршрутизация моего приложения:

const appRoutes: Routes = [
  {
    path: '',
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'auth',
        component: UnauthenticatedContainerComponent,
        data: { excludeLogin: true },
        children: [
          { path: 'login', component: LoginComponent },
        ],
      },
      {
        path: '',
        component: AuthenticatedContainerComponent,
        data: { requireLogin: true },
        children: [
          {
            path: '',
            component: RequestContainerComponent,
            children: [
              { path: 'requests/list', component: RequestListComponent },
              { path: 'request', component: RequestComponent },
              { path: 'results/:id', component: RequestResultListComponent, canActivate: [TabGuard] },
            ],
          },
          {
            path: 'maintenance',
            component: MaintenanceComponent,
          },
          {
            path: 'settings',
            component: SettingsComponent,
          },
          {
            path: 'administration',
            component: AdminComponent,
          },
          {
            path: 'train',
            component: TrainComponent,
          },
        ],
      },
    ],
  },
  { path: '**', redirectTo: '/' },
];

Answer 1

Хорошо, мой плохой, я нашел ответ:

В моем LoginComponent, который я использовал ViewEncapsulation.NONE, это была реликвия предыдущих разработчиков, поэтому я удалил его, и теперь он работает нормально.

см .: Проблема на github

Answer 2

В Angular 6 вы должны импортировать свой файл css в файл angular.json следующим образом:

{
  ...
  projects: {
    [project_name]: {
      ...
      architect: {
        build: {
          ...
          options: {
            styles:{
              "src/styles.scss"
            }
          }
        }
      }
    }
  }
}

Этот файл styles.scss является основным файлом стилей вашего проекта, но вы также можете работать с ним.разделите компоненты, добавив это в объявление компонента:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})