如何解决 Angular 8 解析器中的“NullInjectorError: StaticInjectorError”

Question

UPDATE: The problem is only present in development mode, and vanishes when running ng build or ng serve with the --prod flag.

I've noticed a regression in a web app I'm working on after upgrading to Angular 8. In one of my components, I've started recieving this error:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[function () { return []: 
  StaticInjectorError(Platform: core)[function () { return []: 
    NullInjectorError: No provider for function () { return [!
Error: NullInjectorError: No provider for function () { return [!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:725) [angular]
    at resolveToken (core.js:11812) [angular]
    at tryResolveToken (core.js:11756) [angular]
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:11660) [angular]
    at resolveToken (core.js:11812) [angular]
    at tryResolveToken (core.js:11756) [angular]
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:11660) [angular]
    at resolveNgModuleDep (core.js:20006) [angular]
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20677) [angular]
    at getToken (router.js:2844) [angular]
    at getResolver (router.js:3492) [angular]
    at resolveNode (router.js:3475) [angular]
    at runResolve (router.js:3461) [angular]
    at MergeMapSubscriber.project (router.js:3455) [angular]
    at resolvePromise (zone.js:852) [angular]
    at resolvePromise (zone.js:809) [angular]
    at polyfills.js:3918:17 [angular]
    at Object.onInvokeTask (core.js:25977) [angular]
    at drainMicroTaskQueue (zone.js:601) [<root>]

I've narrowed the problem down to the resolver used in the route to the component. When I remove/comment out the injections from the constructor, the component loads fine. Any ideas what could be causing this? I'm stumped.

Here's the resolver:

IMPORTS REMOVED FOR BREVITY

@Injectable()
export class MemberListResolver implements Resolve<User[]> {
  constructor(
    private authService: AuthService,
    private router: Router,
    private alertify: AlertifyService,
    private distributorService: DistributorService
  ) {
  }

  resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
    return this.authService.currentDistributor.pipe(
      flatMap((d: Distributor) => {
        return this.distributorService.getUsers(d.id).pipe(
          catchError(error => {
            this.alertify.message('Problem retrieving users');
            this.router.navigate(['/home']);
            return of(null);
          })
        );
      })
    );
  }
}

Answer 1

I had the same problem. It was a syntax error in the Routes array

First I wrote

const routes: Routes = [
  {
    path: '',
    component: GalleryComponent,
    resolve: PhotoListResolver
  }
];

But it should be

const routes: Routes = [
  {
    path: '',
    component: GalleryComponent,
    resolve: {
        photos: PhotoListResolver
    }
  }
];

Answer 2

My current app is running on Angular v8.1.2

Last week I had this error and I was able able to compile after adding forRoot() in a couple of files:

1. The RouterModule in app-routing.module

   import { Routes, RouterModule } from '@angular/router';
@NgModule ({ imports: [RouterModule.forRoot(routes)], <!--edit here --> exports: [RouterModule], })

2 And if your are using NgRx, the StoreRouterConnectingModule in app.module.ts

`import { StoreRouterConnectingModule } from '@ngrx/router-store'

 @NgModule ({
   imports: Store.RouterConnectingModule.forRoot() <!--edit here -->
   })`

3. Cancel and restart the terminal: $ ng serve