Split angular 2 route configuration from main application file

Question

I want to split the route configuration from the application file into another file (routeConfig.ts). Is it possible?

For example:

import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {DashboardComponent} from './dashboard/dashboard.component'; import {MessagesComponent} from '../modules/messages/messages.component'; @Component({ selector: 'app', directives: [ ROUTER_DIRECTIVES ], templateUrl: './built/application/app.html' }) @RouteConfig([ { path: '/', name: 'Dashboard', component: DashboardComponent, useAsDefault: true } ]) export class AppComponent {} 

I want to move the @RouteConfig options to another file and just load it into the main application file. Maybe? Thank you (The route configuration will be very large, so I want to break it down).

The first problem: when I try to move the configuration to another file and just try to import JSON into the application file, I got errors with the Undefined Component. Because componentsName it s not a string. Can s not a string. Can t solve this problem.

Answer 1

You can move all route definitions to a separate file.

In a file such as route-definitions.ts:

 import { RouteDefinition } from 'angular2/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { InfoComponent } from './info/info.component'; export const RouteDefinitions: RouteDefinition[] = [ { path: '/', name: 'Home', component: HomeComponent, useAsDefault: true }, { path: '/about', name: 'About', component: AboutComponent }, { path: '/info', name: 'Info', component: InfoComponent } ]; 

Then go back to the app.component.ts file:

 import { Component } from 'angular2/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; import { RouteDefinitions } from './route-definitions'; @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS ] }) @RouteConfig(RouteDefinitions) export class AppComponent { }