Separazione della rotta 2 angolare dal file dell'app principale

Question

Desidero separare la configurazione del percorso dal file app in un file diverso come (routeConfig.ts). È possibile?

Ad esempio:

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 {} 

voglio spostare @RouteConfig params in file di diverso e basta caricarlo all'interno del file applicazione principale. È possibile? Grazie. (Il percorso di configurazione sarà molto grande, quindi voglio dividere questo).

Primo problema, è che quando provo a spostare la configurazione in un file diverso e cerco di importare JSON nel file app, ho degli errori con Componente indefinito. Perché componentsName è s not a string. Can t risolvere questo problema.

Answer 1

È possibile spostare tutte le definizioni di percorso in un file separato.

In un file come percorso-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 
    } 
]; 

Poi di nuovo nei tuoi app.component.ts il file basta fare:

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 { }