Angular 9 NullInjectorError on Resolver Service in sub-sub-lazy loaded Module

Question

I have an Angular 9 app. It has a lazy loaded module, which in turn has a child lazy loaded module. The SubSubModule has its own SubSubRoutingModule. There is a SubSubThingRouteResolver that is only needed in SubSubRoutingModule, and it's this route guard that is having a heck of a time with NullInjectorErrors.

I am importing the resolver into the routing module, where I am also adding it to the "providers" array (see below).

My resolver is marked as @Injectable() (no providedIn), it implements resolve, and this routing module is imported into SubSubModule. The app builds without issue.

When I try to access my route I get the following error in the browser console (note that the module that is erroring is NOT the routing module, but it IS the lazy loaded module). ERROR Error: Uncaught (in promise):

NullInjectorError: R3InjectorError(SubSubModule)[SubSubThingResolver_Factory -> SubSubThingResolver_Factory -> SubSubThingResolver_Factory -> SubSubThingResolver_Factory -> SubSubThingResolver_Factory ]: NullInjectorError: No provider for SubSubThingResolver_Factory!

The final weird thing is, VS Code keeps popping up a "quick fix light bulb" on my Resolver class, with a prompt to move the class to a new file. When I try that, it creates a new file (title-cased, instead of camel-cased), with all the dots removed (except .ts). I've tried it, and it doesn't fix the problem.

Everything works just fine without the resolver.

Is there some weird rule I'm not aware of, where resolvers can't be declared in lazy loaded modules? Am I trying to import it wrong? This is my first project with lazy loaded modules and resolvers.

import { SubSubThingRouteResolver } from "file";

const routes: Routes = [
    {
        path: "",
        children: [
            {
                path: "whatever",
                component: WhateverComponent,
                resolve: SubSubThingRouteResolver
            }
        ]
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    providers: [SubSubThingRouteResolver]
})
export class SubSubRoutingModule {}

score 0 · Answer 1 · answered Aug 15 '20 at 16:38

0

Try register your SubSubThingResolver resolver on the root injector:

@Injectable({providedIn: 'root'})

answered Aug 15 '20 at 16:38

Eliran Eliassy

1,590
12
25

Thanks @Eliran, I did try that (just to see if it would work), and it did not. But even so, I don't really want this service provided in the *root*, right? – emery.noel Aug 16 '20 at 10:36

score 0 · Answer 2 · answered Oct 01 '20 at 20:13

You should export the RouterModule that uses the resolver with exports: [RouterModule]:

import { SubSubThingRouteResolver } from "file";

const routes: Routes = [
    {
        path: "",
        children: [
            {
                path: "whatever",
                component: WhateverComponent,
                resolve: SubSubThingRouteResolver
            }
        ]
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [SubSubThingRouteResolver]
})
export class SubSubRoutingModule {}

Angular 9 NullInjectorError on Resolver Service in sub-sub-lazy loaded Module

2 Answers2