Angular2 Routing: redirectTo a dynamically generated string

Question

Per default I need to redirect to today's date. Here is the routing config I have for now:

import { CALENDAR_ROUTE } from './_methods/utils';

export const appRoutes: Routes = [
   {
    path: CalendarComponent.path, 
    component: CalendarComponent,
    canActivate: [AuthGuard],
    resolve: refDataResolver,
    data: {
      navi: {
        at: 'main',
        icon: 'navbar-calendar'
      },
      roles: {
        employeeOnly: true
      }
    },
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: CALENDAR_ROUTE.DEFAULT_MONTH
      },
      {
        path: LAYOUT_MONTH,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: CALENDAR_ROUTE.MONTH
          },
          {
            path: ':year/:month',
            component: CalendarMonthViewComponent
          },
        ]
      },
      {
        path: LAYOUT_DAY,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: CALENDAR_ROUTE.DAY
          },
          {
            path: ':year/:month/:day',
            component: CalendarDayViewComponent
          },
        ]
      }
    ]
    }
  ];

Here is how I generate the strings in utils.ts :

import { LAYOUT_MONTH } from './../_classes/const';
import * as moment from 'moment';

export function getRoute(withDay: boolean, prefix?: string): string {
    const now = moment();
    const day = ( withDay ) ? now.format('DD') : null;
    return [prefix, now.format('YYYY'), now.format('MM'), day]
        .filter( str => !!str)
        .join('/');
}

export const CALENDAR_ROUTE = {
    DEFAULT_MONTH: getRoute(false, LAYOUT_MONTH),
    MONTH: getRoute(false),
    DAY: getRoute(true)
};

It all goes well - in dev mode and localhost – until I need to compile it for UAT/PROD, which utilizes AOT builds, which then throws a

ERROR in Error during template compile of 'AppRoutingModule' 
Function calls are not supported in decorators but 'getRoute' was called in 'appRoutes' 
'appRoutes' calls 'getRoute' at app/app-routing.module.ts(67,42).

I haven't yet found a solution to this problem. There are some issues which would use providers and useValue - but it feels like an overkill right here. Maybe there is a different kind of a workaround? Maybe I should structure my components differently? Any ideas?

Answer 1

One solution may be to inject the Router into your component and then update the route config at runtime.

I'v not tested this myself, but the idea would be something like this:

In your component

constructor(private router: Router) {
   this.router.config.unshift({path: '', component: '', redirectTo: 'Your new redirect path'})
}