Angular 8 Resolver isn't working: No provider for Resolver

Question

I have a router that uses a resolver and it's not working right now.

This is the error message:

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

This is the resolver's function code:

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

This is the router

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

I've never encoutered this error and haven't found anything similar to it. Any help is 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,
  ],
})

Answer 1

You forgot to provide the BlogResolver somewhere in your code. It could be in the

AppModule:

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

or in the very same BlogResolver:

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

Check this Stackblitz if you want to see same kind of error message: https://stackblitz.com/edit/angular-m8azja

Answer 2

Looks like you need to provide the resolver. You can do this a couple ways.

1. When you declare the resolver, add the Injectable({providedIn: 'root'}) decorator.

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

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

2. Or you can add it 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 // <-- Add resolver here.
  ],
  exports: [RouterModule]
})
export class BlogRoutingModule {}

And make sure to add the BlogRoutingModule to the feature or main app module.