without include component how I can use Async Route, or how dynamically route add in @RouteConfig

Question

any one can help me to write angular2 @RouteConfig with typescript without include component in top of the file and without System.import in ts file means how dynamically route add in @RouteConfig form component class

Answer 1

You could leverage Async routes to do this. Based on your route configuration, you could load route from modules. In this case, you need to add the module path to get the components to associate with routes.

Here is a sample:

var routes = {
  path: '/path',
  name: 'some name',
  module: './my.component',
  component: 'MyComponentName'
}
routes.forEach((route : any) => {
  this.routeConfigArray.push(
      new AsyncRoute({
          path : route.path,
          loader : () => System.import(route.module).then(m => m[route.component]),
          name : route.name
      });
  );
});

this._router.config(this.routeConfigArray);

Another approach could be to add a function to get the name of functions. Based on this you can check if you have a potential component that matches.

Here is a sample:

ngOnInit() {
  this.routes = [
    {
      path: '/test', component: 'OtherComponent', name: 'Test'
    }
  ];
  this.configureRoutes(this.routes);
  this.router.config( this.routes);
}

configureRoutes(routes) {
  var potentialComponents = [ OtherComponent ];
  routes.forEach((route) => {
    route.component = potentialComponents.find((component) => {
      return component.name === route.component;
    });
  });
}

See this plunkr: https://plnkr.co/edit/KKVagp?p=preview.

I haven't tried this myself.

See this question for more details:

• Dynamic Route Loading in Angular 2 Fails. (Beta)