0

в app.module

...
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
...
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        appRouter,
        ToasterModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [Http]
            }
        }),
        AuthorizationModule,
        Ng2Webstorage,
        BsDropdownModule.forRoot(),
        TooltipModule.forRoot(),
        ModalModule.forRoot(),
        SidebarModule.forRoot(),
        BrowserAnimationsModule
    ],
    declarations: [
        AppComponent,
        ...APP_CONTAINERS,
        ...APP_COMPONENTS,
        ...APP_DIRECTIVES
    ],
    providers: [
        {provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true},
        CardService,
        TokenService,
        MainRequestService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Interceptor

import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse, HttpParams, HttpResponse} from '@angular/common/http';
import 'rxjs/add/operator/first';
import {SessionStorageService} from 'ng2-webstorage';
import { ToasterService } from 'angular2-toaster';
import {Router} from '@angular/router';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
    private toasterService: ToasterService;

    constructor(
        public router: Router,
        private sessionStorage: SessionStorageService,
        toasterService: ToasterService
    ) {
        this.toasterService = toasterService;
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const url = 'https://...';
        req = req.clone({
            url: url + req.url,
            // responseType: 'text',//needed to avoid problem witch shows 201 status as error. don't forget to JSON.parse data
            headers: req.headers.set('Authorization', this.sessionStorage.retrieve('access_token'))
        });
        return next.handle(req).catch(err => {
            if (err instanceof HttpResponse) {
                if (err.status == 401) {
                    req = req.clone({
                        method:'put',
                        url: url + '/emauth/token',
                        body: {
                            token: this.sessionStorage.retrieve('refresh_token')
                        }
                    });
                     next.handle(req).subscribe(res => {
                    });

                    return Observable.throw(err);
                }
                else {
                    this.toasterService.pop('error', 'Error', 'token');
                }
            }
        });
    }
}

Без перехватчика все работает отлично. Даже с ним, при открытии раздела Network в браузере, я вижу что нужный файл с переводами подтягивается. Но на странице переводы не отображаются. Гуглил, нашел такого рода проблему, человек решил путем мапинга запросов в перехватчике. Но если я ставлю .map вместо .catch, IDE сразу выделяет все красным и там пакован ошибок. Как не пытался прикрутить мап, не получилось.

Вот у человека такая же ситуация. Может кто то лучше поймет как мне справится. У него получилось, но у него мап.

Переделал для теста перехватчик. Но не помогло.

 intercept(req: HttpRequest<any>, next: HttpHandler): any {
        const url = 'https://';
        req = req.clone({
            url: url + req.url,
            // responseType: 'text',//needed to avoid problem witch shows 201 status as error. don't forget to JSON.parse data
            headers: req.headers.set('Authorization', this.sessionStorage.retrieve('access_token'))
        });
        return next.handle(req)
            .map(res => {
                console.log('result', res);
                if (res instanceof HttpResponse) {
                    // If response is "204 Not Content" then returns an empty array list
                    if (res.status === 204) {
                        return [];
                    }
                }
                return res;
            });
    }

2 ответа 2

1

Нужно мапить запрос и возвращать в любом случае результат. Иначе файлы пролетают "мимо".

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
    private toasterService: ToasterService;

    constructor(
    public router: Router,
    private sessionStorage: SessionStorageService,
    toasterService: ToasterService
) {
    this.toasterService = toasterService;
}

intercept(req: HttpRequest<any>, next: HttpHandler): any {
    const url = '';
    req = req.clone({
        url: url + req.url,
        // responseType: 'text',//needed to avoid problem witch shows 201 status as error. don't forget to JSON.parse data
        headers: req.headers.set('Authorization', this.sessionStorage.retrieve('access_token'))
    });
    return next.handle(req)
        .map(res => {
            console.log('result', res);
            if (res instanceof HttpResponse) {
                // If response is "204 Not Content" then returns an empty array list
                if (res.status === 204) {
                    return [];
                }
            }
            return res;
        });
}

}

Еще в ходе тестов забыл откатить один момент. Я использовал Http вместо HttpClien в импорте

TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient] `здесь`
        }
    }),

Так же спасибо парню который помог.

0

Нашел более свежий ответ. Как я понял нужно уйти от HttpClient в HttpBackend.

1) В app.module метод который получает файлы перевода Заменить:

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

На:

export function translateHttpLoaderFactory(httpBackend: HttpBackend): TranslateHttpLoader { return new TranslateHttpLoader(new HttpClient(httpBackend)); }

2) В app.module в imports Заменить:

TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] } })

На:

TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: translateHttpLoaderFactory, deps: [HttpBackend] } })

Источник на github

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.