Interceptor support

[RomaDotDev]

Currently angular-svg-icon has HttpClientModule dependency which can't be configured. It works fine for simple apps, but for complex API logic using interceptors, it become an issue as all svg fetch requests are intercepted.

It seems to be more Angular architecture issue rather than this lib's but even if I make an alternative service without interceptor, I can't make this lib use it.

[czeckd]

What version of Angular and version of angular-svg-icon package are you using?

[RomaDotDev]

Angualar 5.2.0, angular-svg-icon 5.0.0

[czeckd]

Interceptors seem to work and they can be made to exclude svg.

Here's what I did. My interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse }
  from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class HelloInterceptor implements HttpInterceptor {

  private excludedUrlsRegex: RegExp[];
  private excludedUrls = [ ".svg" ]; 

  constructor() {
    this.excludedUrlsRegex =
      this.excludedUrls.map(urlPattern => new RegExp(urlPattern, 'i')) || [];
  }

  intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {
    const passThrough: boolean = 
      !!this.excludedUrlsRegex.find(regex => regex.test(req.url));

    if (passThrough) {
      return next.handle(req);
    }

    return next.handle(req).do(evt => {
      if (evt instanceof HttpResponse) {
        console.log('---> status:', evt.status);
        console.log('---> filter:', req.params.get('filter'));
      }
    });
  }
}

If the url is in the excluded patterns like ".svg", then skip interceptor processing.

My module:

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS }  from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AngularSvgIconModule } from 'angular-svg-icon';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HelloInterceptor } from './hello.interceptor';

@NgModule({
  imports:      [
    HttpClientModule,
    BrowserModule,
    FormsModule,
    AngularSvgIconModule
  ],
  declarations: [
    AppComponent,
    HelloComponent
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HelloInterceptor, multi: true }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Every time a svg is loaded the HelloInterceptor is called, but passes through without logging. Here's a link to the demo project on StackBlitz.

Maybe I'm misunderstanding what you're trying to accomplish, so could you provide a sample project?