404 Error with webpack and interceptor
n4lexeev opened this issue · 7 comments
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"
}
I encountered this issue in my project as well, anyway to solve it?
@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)
}
})
@Nurgunkalol ,
Yes Thanks! It is works!
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,
},
],
For anyone having a similar issue, this might be your solution without needing to bundle everything together:
ngx-translate/core#921
@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')
Had a similar issue, causing circular dependencies.
Using instead the HttpBackend
fixed it.