My application's permissions are dynamically received from the server. I have implemented a solution where I modify the router tree (using Router.config) before navigating to any item's URL in my navigation bar. Here is the function that sets the routes after receiving data from the server:
setRoutes(data) {
data.map(module => {
module.menus.map(menu => {
menu.programs.map(program => {
programs.push ({
moduleCode: module.code,
menuCode: menu.code,
programCode: program.code,
programLabel: program.dsc,
formType: program.formType
});
});
});
});
let children = programs.filter(program => program.formType == 'DynamicForm').map(program => {
if(program.formType == "DynamicForm"){
return {
path: program.programCode,
children: [
{
path: "edit",
component: UpdateRecordComponent,
data: { program: program }
},
{
path: "queryForm",
component: DynamicProgramComponent,
data: { program: program }
},
{
path: "add",
component: AddRecordComponent,
data: { program: program }
},
{
path: "",
redirectTo: "queryForm"
}
]
};
}
});
this.router.config.forEach(route => {
if (route.path === "app") {
route.children.forEach(child => {
if (child.path === "main") {
child.children = [...child.children, ...children];
}
});
}
});
Everything works fine when I navigate through the app step by step. However, the problem arises when I refresh the page at a certain point or try to access it via link. The router tree becomes empty and the app throws an error (Cannot match any routes to URL segment) before I can set the routes first before the URL event starts.
I have attempted using APP_INITIALIZER but found that the Router service or any custom services are undefined when I execute the code in the APP_INITIALIZER service.
Is there a solution to my issue in Angular?