Я могу предложить простой подход CSS.

Прежде всего добавьте .loading div в основную HTML-страницу, он должен следовать основному компоненту компонента приложения. Например:

  
 
Loading...
  

Теперь вы можете настроить таргетинг и стиль заставки с помощью my-app:empty + .loading CSS-селектора и заставить его исчезнуть, как только приложение получит bootstraped. Пример:

 /* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */ .loading { opacity: 0; transition: opacity .8s ease-in-out; position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: #000; z-index: -1; } /* .loading screen is visible when app is not bootstrapped yet, my-app is empty */ my-app:empty + .loading { opacity: 1; z-index: 100; } 

Этот подход работает лучше, если вы поместите все тяжелые сценарии перед закрытием тега тела и оставите минимальные стили, необходимые для экрана загрузки в голове, чтобы он отображался как можно скорее, а затем скрипты начали загружаться.

Вот простая демонстрация:

Демо: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

Я пошел с простым подходом (мне тоже понравился другой ответ), используя FontAwesome spinners:

  
  
Something witty for your userbase
 
  

Почему бы не попробовать этот подход:

   
 
 
 App is Loading 
 
 Please stand by for your ticket to awesome-town! 
 
 
  

я думаю, лучший подход заключается в том, чтобы иметь встроенный стиль в загрузке div HTML (чтобы показать). Затем в css у вас есть class, чтобы скрыть и использовать ngOnInit, чтобы включить этот class в загрузочный div.

В этом случае у нас будет html-рендеринг стиля в начале. Показывая загрузку и после всех (скачайте css и запустите js), у него будет class, который скрывает его.

 export class AppComponent implements OnInit { public loaded=false; ngOnInit() { this.loaded=true; } } 

  .loading.loaded { z-index: -1; opacity: 0; } 

Вы можете сделать что-то вроде этого: