gistfile1.txt

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  animate,
  animateChild,
  group,
  query,
  style,
  transition,
  trigger } from '@angular/animations';

import {
  PwaInstallService,
  PwaNotificationService
} from './shared/pwa';

@Component({
  selector: 'iwdf-root',
  template: `<div [@routeState]="getAnimationData(rOutlet)">
    <router-outlet #rOutlet="outlet"></router-outlet>
  </div>`,
  animations: [
    trigger('routeState', [
      transition('* <=> *', [
        group([
          query(':enter', [
            style({
              transform: 'translateX(-100%)'
            }),
            animate('500ms ease-out')
          ], {optional: true}),
          query(':leave', [
            animate('500ms ease-out', style({
              transform: 'translateX(100%)'
            }),)
          ], {optional: true})
        ])
      ])
    ])
  ]
})
export class AppComponent implements OnInit{
  constructor(
    private pwaInstallService: PwaInstallService,
    private pwaNotificationService: PwaNotificationService
  ){}
  ngOnInit() {
    this.pwaInstallService.checkForUpdate();
    this.pwaNotificationService.askForPermission();
  }
  getAnimationData(outlet: RouterOutlet) {
    const routeData = outlet.activatedRouteData['animation'];
    if (!routeData) {
      return '';
    }
    return routeData['page'];
  }
}
const routes: Routes = [
  { path: '', loadChildren: './features/blog/blog.module#BlogModule', data: { preload: false , animation: {page: ''}} },
  { path: 'admin', loadChildren: './features/admin/admin.module#AdminModule', data: { preload: false, animation: {page: 'admin'} } },
  { path: 'auth', loadChildren: './features/authentication/authentication.module#AuthenticationModule', data: { preload: false, animation: {page: 'auth'} } },
  { path: '**', redirectTo: '', pathMatch: 'full'}
];