title: Angular 6 Animation is not working in IE
body: <p>I have the following animation in Angular 6.</p>
  
  <pre><code>slide-in-out-animation.ts
  
      // import the required animation functions from the angular animations module
  import { trigger, state, animate, transition, style } from '@angular/animations';
  
  export const slideInOutAnimation =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('slideInOutAnimation', [
  
      // end state styles for route container (host)
      state('*', style({
        // the view covers the whole screen with a semi tranparent background
        position: 'fixed',
        zIndex: 6,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.8)'
      })),
  
      // route 'enter' transition
      transition(':enter', [
  
        // styles at start of transition
        style({
          // start with the content positioned off the right of the screen, 
          // -400% is required instead of -100% because the negative position adds to the width of the element
          right: '-400%',
          zIndex: 6,
  
          // start with background opacity set to 0 (invisible)
          backgroundColor: 'rgba(0, 0, 0, 0)'
        }),
  
        // animation and styles at end of transition
        animate('.5s ease-in-out', style({
          // transition the right position to 0 which slides the content into view
          right: 0,
          zIndex: 6,
  
          // transition the background opacity to 0.8 to fade it in
          backgroundColor: 'rgba(0, 0, 0, 0.8)'
        }))
      ]),
  
      // route 'leave' transition
      transition(':leave', [
        // animation and styles at end of transition
        animate('.5s ease-in-out', style({
          zIndex:6,
          // transition the right position to -400% which slides the content out of view
          right: '-400%',
  
          // transition the background opacity to 0 to fade it out
          backgroundColor: 'rgba(0, 0, 0, 0)'
        }))
      ])
    ]);
  </code></pre>
  
  <p>When I want to use the animation in a Component:</p>
  
  <pre><code>    @Component({
        selector: 'app-example-edit',
        templateUrl: './example-edit.component.html',
        styleUrls: ['./example-edit.component.css'],
  
        // make slide in/out animation available to this component
        animations: [slideInOutAnimation],
  
        // attach the slide in/out animation to the host (root) element of this component
        host: { '[@slideInOutAnimation]': '' }
      })
  export class ExampleComponent {
  
  }
  </code></pre>
  
  <p>In parent-component.html
  I have the html</p>
  
  <pre><code>&lt;a href="#" routerLink="add"&gt;Add&lt;/a&gt;
  &lt;div class="view-side-form"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the parentcomponent I have a link to add a element. When the user click in the link. The content of examplecomponent is loaded using the animation. 
  In chrome is working perfect. But in Internet Explorer the animation is not working. Also, the animation is working perfect using Angular5 in Chrome and IE.
  The problem is when i want to use it with Angular 6.</p>
  
  <p>This is my package.json file</p>
  
  <pre><code>{
    "name": "app-web",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.3",
      "@angular/cdk": "^6.3.3",
      "@angular/common": "^6.0.3",
      "@angular/compiler": "^6.0.3",
      "@angular/core": "^6.0.3",
      "@angular/forms": "^6.0.3",
      "@angular/http": "^6.0.3",
      "@angular/material": "^6.3.3",
      "@angular/platform-browser": "^6.0.3",
      "@angular/platform-browser-dynamic": "^6.0.3",
      "@angular/router": "^6.0.3",
      "@types/jquery": "^3.3.4",
      "angular2-moment": "^1.9.0",
      "angular2-multiselect-dropdown": "^2.9.0",
      "angular2-toaster": "^6.1.0",
      "bootstrap": "^3.3.7",
      "chart.js": "^2.7.2",
      "core-js": "^2.5.4",
      "font-awesome": "^4.7.0",
      "jquery": "^3.3.1",
      "ng2-bs3-modal": "^0.15.0",
      "ng2-charts": "^1.6.0",
      "ng2-datetime": "^1.4.0",
      "ngx-bootstrap": "^3.0.1",
      "rxjs": "^6.0.0",
      "web-animations-js": "^2.3.1",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^6.0.3",
      "@angular-devkit/build-angular": "~0.6.8",
      "typescript": "~2.7.2",
      "@angular/cli": "~6.0.8",
      "@angular/language-service": "^6.0.3",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }
  </code></pre>
  
  <p>polyfills.ts</p>
  
  <pre><code>/** IE9, IE10 and IE11 requires all of the following polyfills. **/
  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/parse-int';
  import 'core-js/es6/parse-float';
  import 'core-js/es6/number';
  import 'core-js/es6/math';
  import 'core-js/es6/string';
  import 'core-js/es6/date';
  import 'core-js/es6/array';
  import 'core-js/es6/regexp';
  import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/set';
  
  /** IE10 and IE11 requires the following for NgClass support on SVG elements */
  // import 'classlist.js';  // Run `npm install --save classlist.js`.
  
  /** IE10 and IE11 requires the following for the Reflect API. */
  // import 'core-js/es6/reflect';
  
  
  /** Evergreen browsers require these. **/
  // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
  import 'core-js/es7/reflect';
  
  
  /**
   * Web Animations `@angular/platform-browser/animations`
   * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
   * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
   **/
  import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  
  /**
   * By default, zone.js will patch all possible macroTask and DomEvents
   * user can disable parts of macroTask/DomEvents patch by setting following flags
   */
  
   // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
   // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
   // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  
   /*
   * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
   * with the following flag, it will bypass `zone.js` patch for IE/Edge
   */
  // (window as any).__Zone_enable_cross_context_check = true;
  
  /***************************************************************************************************
   * Zone JS is required by default for Angular itself.
   */
  import 'zone.js/dist/zone';  // Included with Angular CLI.
  </code></pre>
  
  <p>I am using the Animation created from the link <a href="http://jasonwatmore.com/post/2017/04/19/angular-2-4-router-animation-tutorial-example" rel="nofollow noreferrer">Angular 2/5 - Router Animation Tutorial &amp; Example</a>. In Angular5 is working perfect in all browser, but when I want to migrate to Angular6 i have problems with IE. </p>