@ui-router/angular pass in dynamic routes into module

Issue

Using https://ui-router.github.io/ for routing. I am trying to supply my module with data from and API to load up routes.

 UIRouterModule.forChild({ states: ROUTES })

For various reasons I have moved away from exporting ROUTES from my route.ts file as this had issues with having to instantiate the service where my API, therefore having to also pass in httpClient to that service. I ended up with multiple httpClient calls and this bypassed a httpInteceptor I have.

So is there another way using https://ui-router.github.io/ to call the api from the service file? I've experimented with putting this in the module constructor(), setting a global variable as ROUTES. However it seems that the module loads UIRouterModule.forChild({ states: ROUTES }) before it loads the constructor() - therefore although the data has been received ROUTES remains empty on initial load.

Ive been reading up on UIRouterModule.forChild({ config: configureMyModule, states: ROUTES, }) where you can supply a config declaration. Ive had a go at calling the services api from here too but again that gets executed after the module processes the imports. I am hoping there is a way by accessing this config to add additional routes from the api?

If I hard code the ROUTES from the module:

export let ROUTES: IAuthenticatedStateDefinition[] = [
    {
        name: 'main',
        url: 'help-guide',
        component: HelpGuideComponent,
        permission: [],
        breadcrumb: 'V',
        icon: '',
    }
];

The hard coded above gets executed in time.

Entire module(minus imports urls):

export let ROUTES: IAuthenticatedStateDefinition[] = [];

export const HELP_GUIDE_STATES = (injector: Injector) => {
    let myService: HelpGuideService = injector.get(HelpGuideService);
    myService.getRoutes().subscribe((routes) => {
        ROUTES = routes;
        console.log(ROUTES);
    });
};
export function configureMyModule(uiRouter: UIRouter, injector: Injector, module: StatesModule) {

    let myService: HelpGuideService = injector.get(HelpGuideService);
    myService.getRoutes().subscribe((routes) => {
        ROUTES = routes;

    });
}

/** The NgModule for the HelpGuideModule */
@NgModule({
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        SharedModule,
        SharedConfigProviderModule.forChild(),
        CoreModule,
        MaterialModule,
        ArchwizardModule,
        TranslateModule,
       // UIRouterModule.forChild({states: HELP_GUIDE_STATES}),
        UIRouterModule.forChild({ config: configureMyModule, states: ROUTES, }),
        MarkdownModule.forRoot({
            loader: HttpClient,
            sanitize: SecurityContext.NONE,
        }),
    ],
    providers: [
        HelpGuideService,
    ],
    declarations: [
        HelpGuideComponent,
        declarations
    ],
    exports: []
})
export class HelpGuideModule {}

Solution

The solution was to register the new states called from the service.This in effect updates the states after the first assignment. You need the first assignment to make the module truthy otherwise it won't have an initial route for the module to be created.

Adding:

uiRouter.stateRegistry.register(state);

to the configureMyModule() function adds the dynamic states called from the service. I had to keep in mind that the default route might have been duplicated at this point, so options would be to de-register that first default route OR not include it in your service route data and hardcode in.

let myService: HelpGuideService = injector.get(HelpGuideService);
myService.getRoutes().subscribe((routes) => {
routes.forEach(state => {
   uiRouter.stateRegistry.register(state);
  });
});

Answered By - Tom Rudge