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

Question

更新：该问题仅存在于开发模式中，并在使用 --prod 标志运行 ng build 或 ng serve 时消失。

在升级到 Angular 8 后，我注意到我正在处理的 Web 应用程序出现回归。在我的一个组件中，我开始收到此错误：

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>]

我已将问题缩小到组件路由中使用的解析器。 当我从构造函数中删除/注释掉注入时，组件加载正常。 任何想法可能导致这种情况？ 我难住了。

这是解析器：

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

我有同样的问题。 这是 Routes 数组中的语法错误

首先我写

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

但应该是

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

Answer 2

我当前的应用程序在 Angular v8.1.2 上运行

上周我遇到了这个错误，我能够在几个文件中添加 forRoot() 后进行编译：

1. app-routing.module 中的 RouterModule

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

2 如果您使用的是 NgRx，则 app.module.ts 中的 StoreRouterConnectingModule

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

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

3. 取消并重启终端：$ ng serve