Angular 8 Resolver not functioning properly: Resolver provider not found

Question

Angular 8 Resolver not functioning properly: Resolver provider not found

My router, which utilizes a resolver, is currently experiencing issues.

The error message reads:

Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[BlogResolver]: StaticInjectorError(Platform: core)[BlogResolver]: NullInjectorError: No provider for BlogResolver!

Here is the code for the resolver's function:

resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> {
  const id = route.params.id;
  return this.service.findById(
}

This is how the router is defined:

{
path: 'blog/:id',
component: BlogpostComponent,
resolve: {
  blogpost: BlogResolver,
},

I have never come across this error before and haven't been able to find a similar solution. Any assistance would be greatly appreciated.

Edit:

app.module

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    NavbarComponent,
    HomeComponent,
    NotFoundComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    AppRoutingModule,
    MinhaEmpresaModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

child module:

@NgModule({
  declarations: [
    AEmpresaComponent,
    ComoChegarComponent,
    TrabalheConoscoComponent,
    BlogComponent,
    BlogpostComponent,
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    AEmpresaRoutingModule,
    NgbPaginationModule,
  ],
})

angular typescript

Answer 1

Answer №1

It appears that you have forgotten to include the BlogResolver in your code. You can add it in either the

AppModule:

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ BlogResolver ]  // **** DON'T FORGET TO ADD THIS LINE ****
})
export class AppModule { }

or within the BlogResolver itself:

@Injectable({
  providedIn: "root"  // **** DON'T FORGET TO ADD THIS LINE ****
})
export class BlogResolver implements Resolve<Somedata> {
  data: Somedata[] = [{ id: 1, name: "ABC" }];

If you would like to see a similar error message and resolution, you can check out this Stackblitz example: https://stackblitz.com/edit/angular-m8azja

Answer 2

It appears that you have forgotten to include the BlogResolver in your code. You can add it in either the

AppModule:

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ BlogResolver ]  // **** DON'T FORGET TO ADD THIS LINE ****
})
export class AppModule { }

or within the BlogResolver itself:

@Injectable({
  providedIn: "root"  // **** DON'T FORGET TO ADD THIS LINE ****
})
export class BlogResolver implements Resolve<Somedata> {
  data: Somedata[] = [{ id: 1, name: "ABC" }];

If you would like to see a similar error message and resolution, you can check out this Stackblitz example: https://stackblitz.com/edit/angular-m8azja

Answer 3

Answer №2

If you're looking to set up the resolver, there are a couple of methods you can use.

One way is to include the Injectable({providedIn: 'root'}) decorator when declaring the resolver.

@Injectable({
  providedIn: 'root',
})
export class BlogResolver implements Resolve<Blog> {
  constructor(private bs: BlogService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Blog> {
  ...
  }
}

Alternatively, you can add the resolver to the providers array in your routing module.

const routes: Routes = [{
  path: 'blog/:id',
  component: BlogpostComponent,
  resolve: {
    blogpost: BlogResolver,
  }
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    BlogResolver // <-- Don't forget to add the resolver here.
  ],
  exports: [RouterModule]
})
export class BlogRoutingModule {}

Remember to also include the BlogRoutingModule in either the feature or main app module.

Answer 4

If you're looking to set up the resolver, there are a couple of methods you can use.

One way is to include the Injectable({providedIn: 'root'}) decorator when declaring the resolver.

@Injectable({
  providedIn: 'root',
})
export class BlogResolver implements Resolve<Blog> {
  constructor(private bs: BlogService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Blog> {
  ...
  }
}

Alternatively, you can add the resolver to the providers array in your routing module.

const routes: Routes = [{
  path: 'blog/:id',
  component: BlogpostComponent,
  resolve: {
    blogpost: BlogResolver,
  }
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    BlogResolver // <-- Don't forget to add the resolver here.
  ],
  exports: [RouterModule]
})
export class BlogRoutingModule {}

Remember to also include the BlogRoutingModule in either the feature or main app module.

Answer 5

Answer №3

During my search for a solution to a familiar error, I discovered that although I had provided the correct resolver, the issue was with how I defined it within my route:

{
  // ...
  resolve: BlogResolver
}

Instead of specifying it correctly as:

{
  // ...
  resolve: {
    blogpost: BlogResolver
  }
}

Answer 6

During my search for a solution to a familiar error, I discovered that although I had provided the correct resolver, the issue was with how I defined it within my route:

{
  // ...
  resolve: BlogResolver
}

Instead of specifying it correctly as:

{
  // ...
  resolve: {
    blogpost: BlogResolver
  }
}

Angular 8 Resolver not functioning properly: Resolver provider not found

Answer №1

Answer №2

Answer №3

Similar questions

The `HubConnection` class constructor is restricted to private access and can only be accessed within its class declaration

Steps for confirming a property setting on an interface

The use of props within components is broken in the interface of Nuxt and Vuejs

Using CKEditor5 to Capture and Edit Key Presses

navigating through different pages on a react-native application

How can an array be generated functionally using properties from an array of objects?

Angular service is continuously throwing the error message "NullInjectorError: No provider for anotherService"

Removing HTML Tags in Ionic - A How-To Guide

What is the primary function of the platform-server module within Angular 2?

What is the best way to activate the dirty flag of an Angular form using JavaScript?

Tips for integrating Less and Bootstrap in an Angular 6 project

NestJS is having trouble importing generated types from the Prisma client

Frozen objects in Typescript 2 behave in a variety of ways depending on their shape

Encountering a problem with ng-select in Angular 5: The following error occurred - TypeError: Object(...) is not a function at NgDropdownPanelComponent.ngOnInit within

Is transitioning from AngularJS to Angular truly imperative?

Angular2: How to deactivate a specific element in a form created with formbuilder

Having trouble with Nestjs Global Validation Pipe when parsing Boolean query parameters?

Input for uncomplicated changing identifier

Attempting to send numerous identifiers in an API request

Improving efficiency with batch processing in angular-apollo-client