Angular 5 + UI Router: Eagerly Loading Services for UI Router Resolve when your application is imported by a different root module

I am creating an Angular 5 application with a single module that will be imported by the larger "root" module in an Angular 5 application beyond my reach. I do not have direct access to this "root" module.

This "root" application will be lazy loading everything by route, as opposed to eagerly loading.

I am using UI Router for my routing/states within my application, and am making use of UI Router's resolve property to populate data from various APIs to pass to various components and other states.

resolve

Back when my app was independent of this "root", and was essentially the root itself, I was successfully able to resolve within my routes. However, now that we are lazy loading as part of a larger application, I am receiving Injection errors related to my dependency injection for my routes.

Here is my EntryModule in its current state:

@NgModule(
declarations: [ ... ],
imports: [
...,
UIRouterUpgradeModule
],
providers: [
...,
RoutingDataService (the service I use to for resolving data in routing)
],
entryComponents: [
EntryComponent,
...
],
exports: [ ... ]
)
export class EntryModule


And here is an example of one of my routes using the service:


name: "entry.itemDetails",
url: "/engagement/:id",
component: DetailComponent,
data: ... ,
resolve: [

token: "selectedId",
deps: [Transition],
resolveFn: (transitionService): string =>
const transitionParams = transitionService.params();
return transitionParams.id;

,

token: "itemDetails",
deps: [RoutingDataService, Transition],
resolveFn: (dataService, transitionService) =>
const selectedId = transitionService.params().id;
return dataService.getItemDetails(selectedId);

,

token: "itemFinancialDetails",
deps: [RoutingDataService, Transition],
resolveFn: (dataService, transitionService) =>
const selectedId = transitionService.params().id;
return dataService.getItemFinancialDetails(selectedId);


]



In my deps arrays I include Transition (and call it transitionService), and RoutingDataService (which I call dataService). I wrote RoutingDataService specifically to be used in my routes. RoutingDataService also injects a number of services to be used in a handful of the functions, such as getItemDetails().

getItemDetails()

Despite including RoutingDataService in my EntryModule, because this is a module that is imported by the "root" application, which is lazy loading, I receive this error when trying to use RoutingDataService in my routing only.

Error: StaticInjectorError(e)[RoutingDataService]:
StaticInjectorError(Platform: core)[RoutingDataService]:
NullInjectorError: No provider for RoutingDataService!


So my question is, how can I inject this RoutingDataService directly into my routing so that it can be eagerly loaded by the root application that imports by application? Otherwise, the root application lazy loads my application and my service that I need to inject is missing.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.