Angular2 named routes

Ask Time：2016-06-24T02:34:09 Author：Kamil Kiełczewski

I use Angular2 Webpack Starter in this newest version and in file ./src/app/app.routes.ts I add 'my-new-route' and i want to name it as: "my.route"

export const routes: RouterConfig = [
  { path: '',      component: Home },
  { path: 'home',  component: Home },
  // make sure you match the component type string to the require in asyncRoutes
  { path: 'about', component: 'About' },
  { path: 'my-new-route', component: 'Dashboard', name:"my.route" },
  { path: '**',    component: NoContent },
];

but there is a problem - it not working! TypeScript writes: (name) "... is not assignable to type Route[]". I check file node_modules/@angular/router/config.d.ts (which was pointed in index.d.ts) and indeed - there is no 'name' field in RouterConfig (Route class). So how to do named routes in Angular2 ?

Author:Kamil Kiełczewski，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/37999286/angular2-named-routes

Kamil Kiełczewski :

There is a way to have named routes in new Angular2 router (which don't support it) (the main idea is from checked answer - @Michael Robison) :\n\nin file app.routes.ts i have:\n\n...\nimport { Url } from './common/url';\n\nexport const routes: RouterConfig = [\n { path: '', component: LoginForm },\n { path: Url.to('login'), component: LoginForm },\n { path: Url.to('home'), component: Home, canActivate: [AllAuthGuard] },\n { path: Url.to('clients'), component: Cliens, canActivate: [AdminAuthGuard] },\n { path: Url.to('projects'), component: Projects, canActivate: [AdminAuthGuard] },\n ...\n { path: '**', component: LoginForm },\n];\n\n\nAnd in /app/common/url.ts I have something similar to (i make below code here by hand without checking it):\n\nexport class Url {\n map = {\n 'login': 'my-super-login',\n 'home': 'my-link-home',\n 'clients': 'favourite-clients',\n 'projects': 'bets-projects',\n }\n\n public static to(routingName : string) {\n return this.map[routingName];\n }\n\n}\n\n\nAnd every where in your project in links you must also use Url.to(...) method (in Controllers make method links(route) which call Url.to, and use it in template...). \nAbove Url static class is theoretical. In practice i user polyglot.js small library to have support to parameters and translation for url - so my Url.to method looks something like that:\n\nexport class Url {\n public static to(routingName : string, values?:any) {\n return Lang.t('routing.'+routingName, values);\n }\n}\n\n\nWhich use class:\n\nvar Polyglot = require('../../../../node_modules/node-polyglot/build/polyglot.min.js');\n\nimport { Auth } from '../';\nimport { en } from './en';\nimport { pl } from './pl';\n\nexport class Lang {\n private static instance = null;\n public polyglot:any;\n private static emergencyLang = 'en';\n\n constructor() {\n this.polyglot = new Polyglot();\n this.polyglot.extend({\n en, \n pl,\n });\n if(Lang.instance) return;\n Lang.instance = this;\n }\n\n public static t(key:string, values?:any) {\n let self = Lang.getInstance();\n let user = Auth.user();\n let userLang = user ? user.lang : (navigator.language || navigator.userLanguage);\n let langKey = userLang + '.'+key;\n if(self.polyglot.has(langKey)) return self.polyglot.t(langKey, values);\n\n return self.polyglot.t(Lang.emergencyLang + '.'+key, values);\n }\n\n\n private static getInstance() {\n if(Lang.instance == null) Lang.instance = new Lang();\n return Lang.instance;\n }\n\n}\n\n\nFor instance in ./en.ts I have:\n\nexport const en = {\n routing : {\n login: 'login',\n clients: 'my-clients',\n projects: 'my-projects',\n \"project.pages\": 'my-projects/%{project_id}/pages',\n ...\n }\n\n login : \"Login\"\n ....\n}\n\n\nAnd similar for other languages.\n\n=== EDIT: AoT support ===\n\nI notice that aboce solution (Url class) not cooperating with AoT. Using command npm run build:aot in angular-starter we will see below error:\n\n\n Error: Error encountered resolving symbol values statically. Calling\n function 'Url', function calls are not supported. Consider replacing\n the function or lambda with a reference to an exported function,\n resolving symbol ROUTES in...\n\n\nBecause on AoT compilation app.routes.ts file is compiled using metadata js subset . So below I give solution for named routes (with parameters) writen using compatibile with AoT js subset: \n\nexport class Url {\n\n public static to(routingName: string, values?: any) {\n\n return {\n 'clients' : 'favourite-clients/' + values['client_id'],\n 'projects' : 'projects/' + values['project_id'] + '/best',\n ...\n }[routingName];\n }\n\n}\n\n\nMay be using some trick in app.routes.ts and above Url.to method it will be also posible to incorporate multilang compatibile with AoT.",

2016-07-08T12:11:27

Michael Robison :

I would just use ng2-translate and create the link for each language in your JSON files.",

2016-06-24T15:18:01

Angular2 named routes