To start, I need to automatically redirect to today's date as the default. Below is the routing configuration I currently have set up:
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
},
]
}
]
}
];
Below is how I create 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)
};
Everything functions smoothly in development mode and on localhost until I need to compile it for UAT/PROD, which requires AOT builds and then throws an error:
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 have yet to find a solution to this issue. There have been suggestions to use providers and useValue, but it seems excessive in this context. Is there an alternate workaround or a different way to structure my components? Any insights or suggestions?