Dynamic routing based on external data

Solution 1:

In the new router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig can be used to load new routes

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

You would have a custom routerLink directive or just some link or button that calls an event handler on click where new routes are loaded and then router.navigate(...) is called to navigate to the appropriate route.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 provides an RC.6 Plunker

Solution 2:

I don't know if one of the above comments is your solution of the result that you wanted but I have a new method that might be interested in you and other developers out there.

I created a javascript file where I add my routes.

"use strict";
const home_component_1 = require("location javascript component file");
exports.DYNAMIC_ROUTES = [
    { path: '', component: your_component_name_component_1.YourComponentName },
]

Then in the app.routing.ts (your routing file), you will have to add an import statement to your javascript file

// JAVASCRIPT IMPORT
import { DYNAMIC_ROUTES } from 'location javascript file';

const appRoutes: Routes = [
    { path: 'home', component: NormalLayoutComponent, children: DYNAMIC_ROUTES },
]

Hereby by doing this method you now can manipulate the javascript file with Typescript for dynamic changes. You can even create the file by php and then keep it in the same place. Notice you need to have an already compiled component in my case there is one and it handles all the routes in one component for me.

Also, make sure if you are using a compiler that removes your javascript make sure to read them to the build folder or make sure it compiles with your application.