Невозможно ввести ни `Route`, ни` ActivatedRouteSnapshot` в `HttpInterceptor`

Question

Упрощенная версия кода:

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(
    private readonly router: Router,
    private readonly activatedRouteSnapshot: ActivatedRouteSnapshot,
    @Inject(AuthServiceFactory) private readonly authServiceFactory: ServiceFactoryBase<IAuthService>,
    @Inject(LoggingServiceFactory) private readonly loggingServiceFactory: ServiceFactoryBase<ILoggingService>) {
    console.log('router', router);
    console.log('activated-route-snapshot', activatedRouteSnapshot);
  }

Ничто из этого не может быть решено.Сбой со стандартным сообщением следующего содержания:

StaticInjectorError (AppModule) [InjectionToken HTTP_INTERCEPTORS -> ActivatedRouteSnapshot]: StaticInjectorError (Платформа: ядро) [InjectionToken HTTP_INTERCEPTORS -> ActivatedRouredRouredSoured :RouctedRouredSouredRouredSouredSouredRouredSouredSouredRouredSouredSouredRouredSouredSouredRouratedRouratedRouredSouredRou.!

.. Как правильно импортировать RouterModule в приложение?

PS Я получил SharedModule вместо AppModule для экспорта всех моих материалов, но не Angular:

@NgModule({
    declarations: any.concat(pipes),
    providers: any
        .concat(serviceFactories)
        .concat(guards)
        .concat(otherProviders)
        .concat([{
            provide: HTTP_INTERCEPTORS,
            useClass: JwtInterceptor,
            multi: true
        }]),
    exports: any.concat(pipes)
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: any
                .concat(serviceFactories)
                .concat(guards)
                .concat(otherProviders)
        };
    }
}

The AppModule:

@NgModule({
  declarations: appComponents.concat(auxComponents),
  imports: [
    // theirs
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,

    // ours
    SharedModule,
    CoursesModule
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Answer 1

Когда вы используете ClassProvider, как вы должны сделать для HttpInterceptor, Angular не может компилировать зависимости провайдера, как это было бы для провайдеров, которые включены в модуль как сами токены.По сути, токены типа на самом деле не существуют во время выполнения, и Angular использует эти токены для внедрения зависимостей - поскольку ClassProvider или ValueProvider оцениваются во время выполнения, они не получают надлежащую обработку DI, которую они заслуживают.

Вам просто нужно быть немного более декларативным:

    {
        provide: HTTP_INTERCEPTORS,
        useClass: JwtInterceptor,
        deps: [Router, ActivatedRoute],
        multi: true
    }

Токены в массиве deps будут внедрены в компонент при создании.Одна хитрая вещь здесь заключается в том, что deps должен быть в том же порядке , что и в параметрах конструктора.

Кроме того, провайдер ActivatedRouteSnapshot является просто ActivatedRoute.

Вы должны быть в состоянии сделать то же самое с помощью декоратора @Inject(), как вы это сделали сдругие провайдеры - Angular будет проходить по дереву зависимостей для первого совпадения и вставлять его (хотя я не уверен на 100% в этом).