404 Error with webpack and interceptor

[n4lexeev]

Im using nativescript-angular

TranslateModule.forRoot({
            loader: {
            provide: TranslateLoader,
            deps: [HttpClient],
            useFactory: (createTranslateLoader)
            }
        })
....
     {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpInterceptorService,
            multi: true
        },
...
export function createTranslateLoader(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, "/i18n/", ".json");
}

when i build it with webpack it shows error

ERROR {
"headers": {
"normalizedNames": {},
"lazyUpdate": null,
"headers": {}
},
"status": 404,
"statusText": "ERROR",
"url": "/Users/(*/Library/Developer/CoreSimulator/Devices/2F58ECC2-2E99-46D3-91CC-FC74A3DED5DC/data/Containers/Bundle/Application/ED168D77-6FEE-427F-A08D-DF19CC9EA41F/*.app/app/i18n/ru.json",
"ok": false,
"name": "HttpErrorResponse",
"message": "Http failure response for /Users/*/Library/Developer/CoreSimulator/Devices/2F58ECC2-2E99-46D3-91CC-FC74A3DED5DC/data/Containers/Bundle/Application/ED168D77-6FEE-427F-A08D-DF19CC9EA41F/*.app/app/i18n/ru.json: 404 ERROR",
"error": "Not Found"
}

[LSmint]

I encountered this issue in my project as well, anyway to solve it?

[n4lexeev]

@LSmint like this worked for me, dunno right it or no

import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';
 
interface System {
  import(request: string): Promise<any>;
}


declare var System: System;

export class WebpackTranslateLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    return fromPromise(System.import(`./i18n/${lang}.json`)); // your path
  }
}

...

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

[LSmint]

@Nurgunkalol ,

Yes Thanks! It is works!

[antonlashan]

import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS, HttpBackend } from '@angular/common/http';

@Injectable({providedIn: 'root'})
export class HttpClientTrans extends HttpClient {
  constructor(handler: HttpBackend) {
    super(handler);
  }
}

export function HttpLoaderFactory(httpClient: HttpClientTrans) {
  return new TranslateHttpLoader(httpClient, "/i18n/", ".json");
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClientTrans]
            }
        }),
    ...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true,
    },
  ],

[Schmaga]

For anyone having a similar issue, this might be your solution without needing to bundle everything together: https://github.com/ngx-translate/core/issues/921

[wolgan09]

@Nurgunkalol Thanks it did helped, but while building the app faced a warning that using System variable is not a good practice and sooner or later will be removed.

So we can use (as per dynamic import for ES module) import('./i18n/${lang}.json') -> returns promise

instead of System.import('./i18n/${lang}.json')

[C0ZEN]

Had a similar issue, causing circular dependencies. Using instead the HttpBackend fixed it.