core: ngx-translate is not working in Angular 9
Current behavior
ngx-translate is not working in Angular 9
Expected behavior
it has to work
How do you think that we should fix this?
Minimal reproduction of the problem with instructions
if i use like below it won’t work:
<e-column field="ImplantationDate" headerText="{{ a | translate}}"> </e-column>
The headerText value is not translated
sample download this sample and run below commands
npm i ng serve sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angualr-ngx-1485466251
Environment
“@ngx-translate/core”: “12.1.2"”, “@ngx-translate/http-loader”: “4.0.0”, Angular version: 9.0.6
Browser:
- Chrome (desktop) version XX
- Chrome (Android) version XX
- Chrome (iOS) version XX
- Firefox version XX
- Safari (desktop) version XX
- Safari (iOS) version XX
- IE version XX
- Edge version XX
For Tooling issues:
- Node version: XX <!-- run
node --version--> - Platform:
Others:
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 13
- Comments: 26
in app.component import { TranslateService, LangChangeEvent } from ‘@ngx-translate/core’;
constructor( private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, public translate: TranslateService, ) { this.initializeApp(); this.translate.setDefaultLang(‘en’); // this is solve my problem with translate }
Working fine for me on Angular 9. Do you added localize? See: https://angular.io/guide/migration-localize
In my case, I was trying to access the Bearer token from amplify inside the interceptor to set the Authorization header. So when the user not logged in, it gets an error and will not go through. So I had to explicitly bypass such urls. my implementation is like this.
byPassurls: string[] = ['/assets/i18n/en.json'];if (this.byPassurls.includes(req.url)) { // req without token } else { // req with token }I updated the Angular version from 9.0.6 to 9.1.1 hoping it may start working but it still didn’t work. Then I used subscribe (as translate.use() returns an observable) to check what may be going wrong since it was not throwing any error explicitly, came to know it was not working because I am using http loader and all the requests were going through the http interceptor which I had configured earliar with some authentication logic which was preventing those requests. Fixed that and now it’s in working state 😃
@ribchakraborty Your example project is working fine but still not working for Angular 9.1.9. I’ve tried
And
Translations are not appearing, anyone has solved it?
@Cephei , @BanupriyaSelvaraj and whoever struggling with ngx-translate in Angular 9, this might help.
I have attached my demo application where I have used ngx-translate in
@angular version - 9.0.6 my-learning-app.zip
run - npm i run - ng serve
Seems to work in Angular 9.1 with 12.x version for me
It works for me but with this compiler errors:
Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/translate.loader.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/translate.loader.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/missing-translation-handler.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/missing-translation-handler.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/translate.parser.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/translate.parser.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/translate.compiler.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/translate.compiler.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/translate.service.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/translate.service.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/translate.directive.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/translate.directive.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/lib/translate.pipe.d.ts.map" for "/*/node_modules/@ngx-translate/core/lib/translate.pipe.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/public_api.d.ts.map" for "/*/node_modules/@ngx-translate/core/public_api.d.ts": RangeError: Maximum call stack size exceeded [ng] Error: Error when flattening the source-map "/*/node_modules/@ngx-translate/core/ngx-translate-core.d.ts.map" for "/*/node_modules/@ngx-translate/core/ngx-translate-core.d.ts": RangeError: Maximum call stack size exceeded[ng] Error: Error when flattening the source-map “//node_modules/@ngx-translate/http-loader/ngx-translate-http-loader.d.ts.map" for "//node_modules/@ngx-translate/http-loader/ngx-translate-http-loader.d.ts”: RangeError: Maximum call stack size exceeded