如何解決 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