Closed rajeshwarpatlolla closed 4 years ago
I found the solution.
export function HttpLoaderFactory(http: HttpClient) {
const path = window.location.origin + '/assets/i18n/';
return new TranslateHttpLoader(http, path, '.json');
}
The issue was with the path/url. In local env it hits https://localhost:8100/ but in real device it is hitting https://localhost/ only. There is no port number.
I am answering it myself as it might help someone who has similar issue.
For more details on the code, please check this stack overflow link for the answer
I am still seeing problems, I am using bare Angular 11 AOT with Ivy + a simple interceptor makes the translation not work. They are being GETed successfully but no translation is used.
import {
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest,
} from '@angular/common/http'
import { Injectable } from '@angular/core'
import { Observable } from 'rxjs'
import { tap } from 'rxjs/operators'
@Injectable()
export class ServerErrorInterceptor implements HttpInterceptor {
intercept(
request: HttpRequest<any>,
next: HttpHandler,
): Observable<HttpEvent<any>> {
return next.handle(request).pipe(tap(console.log))
}
}
Even using the HttpLoaderFactory suggested ain't working
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json')
}
EDIT: disregard, It works but I have sporadic issues most likely related to something else. 50:50 chance the translation file is loaded but no translations happen
Here is my solution:
https://github.com/ngx-translate/core/issues/1050#issuecomment-952389069
@neikxd An idea for you, if you use fetch Api instead of the angular http client to get the i18n json files, then it would not get intercepted.
Would save you the if !request.url.includes('/assets/i18n/') statement check on every other requests
Just in case someone stumbles on this issue this is how I implemented a TranslateLoader using the fetch api.
@Injectable()
export class TranslationLoaderService implements TranslateLoader {
getTranslation(lang: string): Observable<any> {
return from(fetch("./assets/i18n/${lang}.json").then(resp => resp.json()));
}
}
@NgModule({
declarations: [
HomeComponent
],
imports: [
CommonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useClass: (TranslationLoaderService)
},
defaultLanguage: "en",
useDefaultLang: true
})
],
providers: [
TranslateStore
]
})
export class HomeModule {
}
Current behavior
The translations are working fine in local machine. But when i generate the apk using ionic and install it in device it's not working. It is throwing an error.
Expected behavior
It should also work fine without any error in mobile app as well
How do you think that we should fix this?
I am not very sure about the way to fix it.
Minimal reproduction of the problem with instructions
I added the code below. Please correct me if something is missing
// THIS IS THE CODE I AM USING FOR HTTP INTERCEPTOR
// THIS IS THE CODE I AM USING FOR TRANSLATIONS LOADER
// THIS IS THE CODE I AM USING IN MY app.module.ts
Environment
Yes
Browser:
For Tooling issues:
Others: The issue here is only when i run the ionic app in device after installing the apk. As i mentioned, in local env it's working fine.