AngularJSをAngular4にするには

◆（１）
　https://plnkr.co/edit/QvG8I73sgQ5ox4LZhGwZ?p=preview
のtoggleFlyInOutのスライドするアニメーションと
◆（２）
　http://tsudoi.org/weblog/?p=2031
のようなng-viewを組み合わせて、ページのスライド遷移を考えているのですが、
Angular4で◆（２）のようなng-viewの切り替えはできないでしょうか？

◆（２）のapp.jsは　app-routing.module.tsのようになると思うのですが
　controllers.jsをどのようにAngular4で表現すればよいのでしょうか

■JavaScript – app.js

var myApp = angular.module('app', ['ngRoute','ngAnimate']);

myApp.config(['$routeProvider',
    function($routeProvider){
        $routeProvider.when('/photo0/', {
            templateUrl: 'templateA.html',
            controllerAs: 'CtrlA'
        });
        $routeProvider.when('/photo1/', {
            templateUrl: 'templateB.html',
            controllerAs: 'CtrlB'
        });
        $routeProvider.otherwise({
            redirectTo: '/photo0/'
        });
    }
]);

◆app-routing.module.ts

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

import { Route1Component }  from './route-1/route-1.component';
import { Route2Component }  from './route-2/route-2.component';

const routes: Routes = [
  {
    path: 'photo0',
    component: Route1Component,
  },
  {
    path: 'photo1',
    component: Route2Component,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

■JavaScript – controllers.js

myApp.controller('MainCtrl', ['$scope', function($scope){
    $scope.msg = 'html = index.html, ng-controller = MainCtrl';
}]);

myApp.controller('CtrlA', ['$scope', function($scope){
    $scope.msg = 'html = templateA.html, ng-controller = CtrlA';
}]);

myApp.controller('CtrlB', ['$scope', function($scope){
    $scope.msg = 'html = templateB.html, ng-controller = CtrlB';
}]);