Компоненты Angular 2 не отображаются правильно при использовании с розеткой маршрутизатора

Question

Я занимаюсь разработкой простого сайта Angular 2, использующего Angular 2 Lazy Routing. Я использую ползунок flickity для реализации ползунка на домашней странице, проблема заключается в следующем: когда я объявляю компонент ползунка в компоненте приложения (корневой компонент)

app.component

<app-topnav></app-topnav>
<app-navbar></app-navbar>
<app-home-slider></app-home-slider>  <------- the slider component !
<router-outlet></router-outlet>
<hr class="divider">
<app-footer></app-footer>

слайдер рендерится без проблем, но когда я объявляю компонент слайдера в компоненте домашней страницы, который вызывается в router-outlet с использованием отложенной загрузки, изображения есть, но слайдер не работает,

дом-page.component

<app-home-slider></app-home-slider>  <------- the slider component !
<app-plaques></app-plaques>

app.routing.ts

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'Accueil-*', loadChildren: './Pages/home-page/home-page.module#HomePageModule' },
  { path: 'A-propos-*', loadChildren: './Pages/about-page/about-page.module#AboutPageModule' },
  { path: 'Contact-*', loadChildren: './Pages/contact-page/contact-page.module#ContactPageModule' },
  { path: 'Maladies-*', loadChildren: './Pages/diseases-page/diseases-page.module#DiseasesPageModule' },
  { path: 'Pharmacie-*', loadChildren: './Pages/drugs-page/drugs-page.module#DrugsPageModule' },
  { path: 'Laboratoire-*', loadChildren: './Pages/laboratory-page/laboratory-page.module#LaboratoryPageModule' },
  { path: 'Paiements-assurances-*', loadChildren: './Pages/payments-page/payments-page.module#PaymentsPageModule' },
  { path: 'Formules-sante-*', loadChildren: './Pages/products-page/products-page.module#ProductsPageModule' },
  { path: 'Symptomes-signes-*', loadChildren: './Pages/symptomes-page/symptomes-page.module#SymptomesPageModule' },
  { path: 'Rendez-vous-*', loadChildren: './Pages/appointments-page/appointments-page.module#AppointmentsPageModule' },
  { path: 'Docteurs-*', loadChildren: './Pages/symptomes-page/symptomes-page.module#SymptomesPageModule' },
  { path: 'Blog-*', loadChildren: './Pages/blog-page/blog-page.module#BlogPageModule' },

];

export const AppRoutes = RouterModule.forRoot(routes);

Answer 1

Прочитав документацию Flickity много раз, я понял: при использовании WebPack мы должны добавить

var Flickity = require('flickity');

Answer 2

На самом деле это не фактический ответ, чтобы решить эту проблему, я просто изменил en encapsulation на none, вы можете сделать это в Компоненте следующим образом:

@Component({
  selector: 'my-random',
  templateUrl: 'my-random.component.html',
  encapsulation: ViewEncapsulation.None <---------- ADD THIS
})

Вы можете прочитать больше об инкапсуляции в документации