Загрузка стиля до того, как приложение Angular2 начнет работать?

Question

В моем index.html я хочу показать пользователям состояние загрузки до запуска / начальной загрузки приложения Angular2.

<my-app>
    <div class="sk-cubes">
      <div class="sk-cube1"></div>
      <div class="sk-cube2"></div>
    </div>
  </my-app>

Я пытаюсь дать стили в таблице стилей с именем loading-state.css и включить ее в index.html, но почему-то не принимает стили из этого файла. Тем не менее, я получаю ожидаемое поведение при предоставлении стилей в теге в заголовке или встроенных стилей. Я что-то упустил?

Answer 1

Я предполагаю loading-state.css ссылка была дана в head тег index.html страница

В myapp компонент, набор ViewEncapsulation в none,

import {ViewEncapsulation} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'myapp',

  encapsulation: ViewEncapsulation.None   // <<<=====here

})
class MyAppComponent {

}