Как создать угловую библиотеку, которая перехватывает запросы http, сделанные из моего приложения - PullRequest
Новая
       32

Как создать угловую библиотеку, которая перехватывает запросы http, сделанные из моего приложения

1 голос
/ 10 апреля 2019

Я пытаюсь создать угловую библиотеку, которая перехватывает запросы http из приложения, в которое она импортирована. Проблема в том, что перехватчик не работает, если он импортирован из библиотеки, но если я переместил его в свое приложение, он работает.

код перехватчика из моей библиотеки выглядит так: 

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, throwError} from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class SimpleInterceptor implements HttpInterceptor {
    constructor () {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            return throwError(err);
        }))
    }
}

Я импортирую перехватчик в моем приложении следующим образом (app.module.ts): 

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateCompiler, TranslateLoader, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { SimpleInterceptor } from '@myname/angular-simple-library';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, 'languages/', '.json');
}

@NgModule({
  declarations: [],
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
      },
      compiler: {
          provide: TranslateCompiler,
          useClass: TranslateMessageFormatCompiler
      }
    })
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: SimpleInterceptor, multi: true },
  ]
})
export class AppModule {}

Есть идеи, что здесь может пойти не так? Спасибо!

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Я думаю, вам не хватает скобок в ваших провайдерах, как показано ниже 

providers: [
    [ { provide: HTTP_INTERCEPTORS, useClass: SimpleInterceptor, multi: true }, ]
  ]

Если вышеописанное не работает, вы можете посмотреть, как настроить перехватчик, в Angular HttpClient Guide

1 голос
/ 10 апреля 2019

Должно работать, когда перехватчик, который вы создаете в своей библиотеке, является частью модуля. Это означает, что вам нужно создать модуль внутри вашего библиотечного проекта и добавить к нему перехватчик.

Возьмите, например, пакет npm ngx-progressbar: 

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgProgressInterceptor } from './ng-progress.interceptor';
import { NgProgressHttpConfig, NG_PROGRESS_HTTP_CONFIG } from './ng-progress-http.interface';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: NgProgressInterceptor, multi: true }
  ]
})
export class NgProgressHttpModule {
  static withConfig(config: NgProgressHttpConfig): ModuleWithProviders {
    return {
      ngModule: NgProgressHttpModule,
      providers: [
        { provide: NG_PROGRESS_HTTP_CONFIG, useValue: config }
      ]
    };
  }
}

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

...