Trying to fade in the Angular Router Outlet.

This is the CSS Code (app-component.css).

router-outlet   * {
  display: block;
  animation: fade 1s;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

But, sibling for router-outlet will be always a different component injected by RouterModule.

In order to solve the issue, there are two solutions.

1. Move router-outlet * animation css to styles.css file.
2. Add encapsulation: ViewEncapsulation.None in app.component.ts file as shown below.