Utilização do Mingle com o TranslateHttpLoader

Oi,

Ao utilizar o MingleHttpInterceptor não é possível utilizar o comando de busca do arquivo das strings para tradução TranslateHttpLoader(http, './assets/i18n/', '.json'), pois o Mingle está interceptando a busca do arquivo e com isso não consegue encontrar o mesmo.

Como posso resolver tal situação?

SOLUÇÃO:

Utilizado a resposta abaixo, apenas com a modificação do código do interceptor para o abaixo:


const index = req.url.indexOf('/assets');

if (index >= 0) {
   let headersNewReq = new HttpHeaders();

   const newReq = req.clone({
      url: req.url.substring(index),
      headers: headersNewReq
   });

   return next.handle(newReq);            
}

return next.handle(req);

Voce pode criar outro interceptor para tratar o './assets' depois do interceptor do Mingle:

interceptor.ts


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

@Injectable()

export class HttpsRequestInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const index = req.url.indexOf('./assets');
        if (index >= 0) {
            const dupReq = req.clone({ url: req.url.substring(index) });
            return next.handle(dupReq);
        }
        return next.handle(req);
    }
};

app.module.ts


@NgModule({
  declarations: [
    MyApp,
    PAGES
  ],
  imports: [
    ThfModule,
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    RouterModule.forRoot([]),
    MingleModule.forRoot({
            provide: Configuration,
            useFactory: mingleFactory
        })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    PAGES
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    PROVIDERS,
    { provide: HTTP_INTERCEPTORS, useClass: MingleHttpInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: HttpsRequestInterceptor, multi: true }
  ]
})

Bom dia,

Realizei o teste e não funcionou. Deu o erro:
“ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘length’ of undefined
TypeError: Cannot read property ‘length’ of undefined at HttpHeaders.applyUpdate”

Verificamos que primeiro ele passa no HttpsRequestInterceptor, porém depois ele vai para o MingleHttpInterceptor. No MingleHttpInterceptor está caindo dentro da condição (req.url.indexOf(‘http’) == -1).

Colocando nessa sequencia o ultimo a ser executado é o seu interceptor, tenho o app de exemplo onde fiz a chamada http.get de um arquivo como voce indicou.

Entendi… Coloquei na ordem que você informou, primeiro o MingleHttpInterceptor depois HttpsRequestInterceptor, porém continou o erro. Verifiquei agora que ele está passando primeramente no MingleHttpInterceptor e caindo na condição (req.url.indexOf(‘http’) == -1). Dentro desta condição, além de modificar a URL, está modificando o headers da requisição que está causando problema. Depois cai no HttpsRequestInterceptor, porém com a requisição já modificada.

Alterei o código do interceptor para o código abaixo e funcionou:

if (index >= 0) {
let headersNewReq = new HttpHeaders();

const newReq = req.clone({
url: req.url.substring(index),
headers: headersNewReq
});

return next.handle(newReq);
}