Angular 2 - Is it possible to store my routes in another file and import them into the app.ts file (because over time the routes will build up)

Here is an example of my current app.ts that works. I basically want to move the route config routes to another file to make it cleaner:

   import {Todo} from './ponents/todo/todo';
   import {About} from './ponents/about/about';
   import {AuthService} from './authService';

   import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
   import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
   import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';

   @Component({
       selector: 'app'
   })

   @View({
       template: `
           <div class="container">
               <nav>
                   <ul>
                       <li><a [router-link]="['/Home']">Todo</a></li>
                       <li><a [router-link]="['/About']">About</a></li>
                   </ul>
               </nav>
               <router-outlet></router-outlet>
           </div>
       `,
       directives: [RouterOutlet, RouterLink]
   })

   @RouteConfig([
       { path: '/', redirectTo: '/home' },
       { path: '/home', ponent: Todo, as: 'Home' },
       { path: '/about', ponent: About, as: 'About' }
   ])

   export class AppComponent {
       constructor(router: Router, _authService: AuthService, _location: Location){

           //Subscribe - watches routes pop state events.
           router.subscribe((val) => {      

               _authService.isUserLoggedIn().then((success) => {                 
                   router.parent.navigate(['/About']);
               });

           })       
       }
   }

   bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), AuthService]);

Angular 2 - Is it possible to store my routes in another file and import them into the app.ts file (because over time the routes will build up)

Here is an example of my current app.ts that works. I basically want to move the route config routes to another file to make it cleaner:

   import {Todo} from './ponents/todo/todo';
   import {About} from './ponents/about/about';
   import {AuthService} from './authService';

   import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
   import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
   import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';

   @Component({
       selector: 'app'
   })

   @View({
       template: `
           <div class="container">
               <nav>
                   <ul>
                       <li><a [router-link]="['/Home']">Todo</a></li>
                       <li><a [router-link]="['/About']">About</a></li>
                   </ul>
               </nav>
               <router-outlet></router-outlet>
           </div>
       `,
       directives: [RouterOutlet, RouterLink]
   })

   @RouteConfig([
       { path: '/', redirectTo: '/home' },
       { path: '/home', ponent: Todo, as: 'Home' },
       { path: '/about', ponent: About, as: 'About' }
   ])

   export class AppComponent {
       constructor(router: Router, _authService: AuthService, _location: Location){

           //Subscribe - watches routes pop state events.
           router.subscribe((val) => {      

               _authService.isUserLoggedIn().then((success) => {                 
                   router.parent.navigate(['/About']);
               });

           })       
       }
   }

   bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), AuthService]);

• javascript
• angular

2 Answers 2

i personally have created an route.interface.ts and a route.ts files.

Routes file

import {Route} from './route.interface'
import {AuthComponent} from './auth/auth.ponent'

export const Routes: Route[] = [
    {
        path: '/auth',
        name: 'Authenticate',
        ponent: AuthComponent
    },
];

Route Interface

export interface Route {
    path: string,
    name: string,
    ponent: any,
}

Usage in main ponent.

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'
import {Routes} from './routes'

@Component({
    selector: 'app',
    templateUrl: './angular2/app/layout.ponent.html',
    directives: [
        ROUTER_DIRECTIVES
    ],
    providers: [
        HTTP_PROVIDERS,
        ROUTER_PROVIDERS
    ],
})

@RouteConfig(Routes)

Hope that helps. you can even create a route service and inject it you main ponent. Enjoy coding!

You can add your RouteConfig per ponent

Lets say you have home and about as in your example, then you would define the routing from that specific ponent in the ponent itself.

So in your about ponent you can add

 // './ponents/about/about'

 @RouteConfig([
       { path: '/about', ponent: About, as: 'About' }
 ])

And in your home ponent you can do the same

 // './ponents/home/home'

 @RouteConfig([
       { path: '/home', ponent: Todo, as: 'Home' }
 ])