Angular Resolver not working no provider for ()

Question

I have this issue in a new project. I have created a route:

const routes: Routes = [
    {
        path: '',
        component: CategoriesComponent,
    },
    {
        path: ':categoryId',
        component: CategoryComponent,
        resolve: CategoryResolver,
    },
];

As you can see, it's trying to use a resolver, which looks like this:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { Category, CategoryService } from '@situlive/angular/data';

@Injectable({
    providedIn: 'root',
})
export class CategoryResolver implements Resolve<Category> {
    constructor(private categoryService: CategoryService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Category> {
        return this.categoryService.get(route.paramMap.get('categoryId'));
    }
}

When I use this code, I get an error:

Uncaught (in promise): NullInjectorError: R3InjectorError(CategoriesModule)[() => [ -> () => [ -> () => [ -> () => [ -> () => []: NullInjectorError: No provider for () => [!

If I comment out the resolver like this:

const routes: Routes = [
    {
        path: '',
        component: CategoriesComponent,
    },
    {
        path: ':categoryId',
        component: CategoryComponent,
        //resolve: CategoryResolver,
        children: [
            {
                path: 'criteria',
                loadChildren: () => import('../criteria/criteria.module').then((m) => m.CriteriaModule),
            },
            {
                path: 'feeds',
                loadChildren: () => import('../feeds/feeds.module').then((m) => m.FeedsModule),
            },
            {
                path: 'fields',
                loadChildren: () => import('../fields/fields.module').then((m) => m.FieldsModule),
            },
        ],
    },
];

I no longer get the error, but obviously nothing is resolved. My code in my CategoryComponent just looks like this:

ngOnInit(): void {
    this.getCategory();
}

private getCategory(): void {
    this.category = this.route.snapshot.data.category;
}

Does anyone know why this might be happening?

This is a shot in the dark but did you try not injecting CategoryService in CategoryResolver? — user13258211
– user13258211, Commented Jan 28, 2021 at 12:23
Yes, simply have an empty constructor and return of(null) in the resolve method. — user13258211
– user13258211, Commented Jan 28, 2021 at 12:26
that does the same as commenting out the resolver. Are you thinking it can't find the CategoryService? It's used in other places with no issues. — r3plica
– r3plica, Commented Jan 28, 2021 at 12:31

Eduardo Junior · Accepted Answer · 2021-01-28 12:44:56Z

2

You first need to fix your routes definition. That may be the problem. Try to change the:

    {
        path: ':categoryId',
        component: CategoryComponent,
        resolve: CategoryResolver,
    }

to :

    {
        path: ':categoryId',
        component: CategoryComponent,
        resolve: {
          category: CategoryResolver
        },
    }

Because the resolve needs to be an object and not the direct reference to the resolver as you can se here

answered Jan 28, 2021 at 12:44

Eduardo Junior

3501 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

r3plica Over a year ago

well spotted; no idea how I made that mistake

Collectives™ on Stack Overflow

Angular Resolver not working no provider for ()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related