How to use the @angular/router-deprecated.RouteConfig function in @angular/router-deprecated

// #enddocregion


@Component({
  selector: 'example-app',
  template: `
    <h1>My app</h1>

    <nav>
      <a>Child</a>
    </nav>
    
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([{path: '/parent/...', name: 'Parent', component: ParentCmp}])
export class AppCmp {
}

export function main(): Promise&gt; {
  return bootstrap(
      AppCmp, [{provide: APP_BASE_HREF, useValue: '/@angular/examples/router/ts/on_activate'}]);
}

}
}
// #enddocregion


@Component({
  selector: 'example-app',
  template: `
    <h1>Say hi to...</h1>
    <a id="naomi-link">Naomi</a> |
    <a id="brad-link">Brad</a>
    
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path: '/', component: MyCmp, name: 'HomeCmp'},
  {path: '/:name', component: MyCmp, name: 'HomeCmp'}
])
export class AppCmp {
}


export function main(): Promise&gt; {
  return bootstrap(
      AppCmp, [{provide: APP_BASE_HREF, useValue: '/@angular/examples/router/ts/reuse'}]);
}

ActionService,
        ApiService,
        BodyTransformService,
        EventService,
        HotkeyService,
        ModelService,
        ToastService,
        PostService,
        SettingsService,
        ShackMessageService,
        TabService,
        TitleService
    ],
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/chatty', name: 'Chatty', component: SimpleChatty, useAsDefault: true},
    {path: '/chatty/simple', name: 'Chatty', component: SimpleChatty},
    {path: '/chatty/split', name: 'Chatty', component: SplitChatty},
    {path: '/thread/:threadId', name: 'Thread', component: SingleThread},
    {path: '/thread/:threadId/:commentId', name: 'Thread', component: SingleThread}
])
export class App  {
    constructor(private hotkeyService:HotkeyService) {
        hotkeyService.start()
    }
}

directives: [ROUTER_DIRECTIVES, SHARED_DIRECTIVES],
  providers: [
    SHARED_PROVIDERS,
    HTTP_PROVIDERS,
    ROUTER_PROVIDERS,
    FORM_PROVIDERS
  ],
  styles: [`
      .router-link-active {
          font-weight: bold;
          border-bottom: 2px #d9534f solid;
      }
  `],
  templateUrl: 'app/app.component.html'
})
@RouteConfig([
  { path: '',             name: 'Home',                 redirectTo: ['TasksComponent'] },
  { path: 'tasks',        name: 'TasksComponent',       component: TasksComponent, useAsDefault: true },
  { path: 'tasks/editor', name: 'TaskEditorComponent',  component: TaskEditorComponent },
  { path: 'timer/...',    name: 'TimerComponent',       component: TimerComponent },
  { path: 'login',        name: 'LoginComponent',       component: LoginComponent }
])
export default class AppComponent {
  userIsLoggedIn: boolean;

  constructor(
    private authenticationService: AuthenticationService,
    private router: Router) {
    authenticationService.userIsloggedIn.subscribe(userIsloggedIn => {
      this.userIsLoggedIn = userIsloggedIn;
    });
  }

import { LoginComponent } from "./auth/login.component";
import { LogoutComponent } from "./auth/logout.component";
import { RecordComponent } from "./record/record.component";
import { RecordDetailComponent } from "./record/record-detail.component";
import { RecordRequestComponent } from "./record-request/record-request.component";
import { RecordRequestDetailComponent } from "./record-request/record-request-detail.component";


@Component({
  selector: "dnsaas-app",
  templateUrl: "static/app/app.component.html",
  directives: [ROUTER_DIRECTIVES],
  providers: [AuthService],
  styles: [" .main { padding-top:45px; }"]
})
 @RouteConfig([
  { path: "/add-record/", name: "AddRecord", component: RecordDetailComponent },
  { path: "/domains", name: "Domains", component: DomainComponent },
  { path: "/login", name: "Login", component: LoginComponent },
  { path: "/logout", name: "Logout", component: LogoutComponent },
  { path: "/records", name: "Records", component: RecordComponent },
  { path: "/record-detail/:id", name: "RecordDetail", component: RecordDetailComponent },
  { path: "/records-requests", name: "RecordRequests", component: RecordRequestComponent },
  { path: "/request-detail/:id", name: "RecordRequestDetail", component: RecordRequestDetailComponent },
])
export class AppComponent implements OnInit {

  homeUrl: string = ConfigService.get("homeUrl");

  constructor(
    public router: Router,
    public location: Location,

import { Component } from '@angular/core';
import { TitleBarComponent } from './titlebar/titlebar.component';
import template from './app.html';

import { HomeComponent } from './home/home.component';
import { CreateComponent } from './create/create.component';
import { EmbedViewContainerComponent } from './embed/embedviewcontainer.component';
import { ProjectListComponent } from './projectlist/projectlist.component';
import { ExamplesComponent } from './examples/examples.component';
import { HelpComponent } from './help/help.component';

import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';

import './app.less';

@RouteConfig([
  { path: '/',             name: 'Home',      component: HomeComponent, useAsDefault: true },
  { path: '/create/...',   name: 'Create',    component: CreateComponent },
  { path: '/projects',     name: 'Projects',  component: ProjectListComponent },
  { path: '/examples',     name: 'Examples',  component: ExamplesComponent },
  { path: '/help',         name: 'Help',      component: HelpComponent },
  { path: '/embed/...',    name: 'Embed',     component: EmbedViewContainerComponent }
])
@Component({
  selector: 'app',
  directives: [TitleBarComponent, ROUTER_DIRECTIVES],
  template
})
export class App {}

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
import TimerWidgetComponent from './timer-widget.component';

@Component({
  selector: 'pomodoro-timer',
  directives: [ROUTER_DIRECTIVES],
  template: ''
})
@RouteConfig([
  { path: '/task/:id',
    name: 'TaskTimer',
    component: TimerWidgetComponent
  }, {
    path: '/', name: 'GenericTimer',
    component: TimerWidgetComponent,
    useAsDefault: true
  }
])
export default class TimerComponent {}

import { DashboardComponent } from './component/DashBoard/DashBoard';
import { HeroesComponent } from './component/Heroes/Heroes';
import { HeroDetailComponent } from './component/HeroDetail/HeroDetail';
import { HeroService } from './service/HeroService';

@Component({
    selector: 'app',
    template: require('./app.html'),
    styles: [require('./app.scss')],
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})
@RouteConfig([
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    }

@Component({
  selector: 'app',
  template: `
    <nav class="navbar navbar-default">
      <ul class="nav navbar-nav">
        <li><a>Home</a></li>
        <li><a>Add developer</a></li>
      </ul>
    </nav>
    
  `,
  providers: [DeveloperCollection],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  new Route({ component: Home, name: 'Home', path: '/' }),
  new Route({ component: AddDeveloper, name: 'AddDeveloper', path: '/dev-add' }),
  new Route({ component: DeveloperDetails, name: 'DeveloperDetails', path: '/dev-details/:id/...' }),
  new Redirect({ path: '/add-dev', redirectTo: ['/dev-add'] })
])
class App {}

bootstrap(App, [
  ROUTER_PROVIDERS,
  { provide: LocationStrategy, useClass: HashLocationStrategy }
]);

import {Component} from "@angular/core";
import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, ComponentInstruction, RouteParams} from '@angular/router-deprecated';
import { NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS } from "nativescript-angular/router";

//pages
import {StartPage} from "./pages/start.component";
import {CardViewPage} from "./pages/cardview/cardView.page.componet";
import {VanillaPullToRefreshPage} from "./pages/pullToRefresh.page.component";
import {RefreshImagePage} from "./pages/refreshImage.page.component";
import {FabPage} from "./pages/fab.page.component";

@RouteConfig([
    { path: "/", component: StartPage, name: "Start", useAsDefault: true },
    { path: "/vanilla-cardview", name: "VanillaCardview", component: CardViewPage },
    { path: "/vanilla-pullToRefresh", name:  "VanillaPullToRefresh", component: VanillaPullToRefreshPage},
    { path: "/refresh-image", name: "RefreshPage", component: RefreshImagePage },
    { path: "/fab-page", name : "FabPage", component: FabPage}
])

@Component({
  selector: "main",
  directives: [NS_ROUTER_DIRECTIVES],
  providers: [NS_ROUTER_PROVIDERS],
  template: ""
})
export class AppComponent {}