Angular 2 components doesn't render correctly when used with router outlet

Question

I'm developing a simple angular 2 website, using angular 2 lazy routing. I use flickity slider to implement a slider in the home page, the problem is : when i declare the slider component in the app component (root compoenent)

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>

the slider renders without problem, but when I declare the slider component in a home-page component who is called in router-outlet using the lazy loading, the pictures are there but the slider doesn't work,

home-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

in fact this not the actual answer, to resolve this issue, i just edited en encapsulation to none, you can do so in the Component like this :

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

you can read more about encapsulation in the documentation

Answer 2

after reading the flickity doc many times, i figured it out: when using WebPack we must add

var Flickity = require('flickity');