ngx-translate is not working in Angular 9

[BanupriyaSelvaraj]

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}}">

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:

[BanupriyaSelvaraj]

Any update on this?

[dgioulakis]

Can anyone please advise on this. Sees like this lib is completely broken on Angular 9; I've followed every documentation I can find and nothing is working with lazy loaded modules.

[KBroichhausen]

Working fine for me on Angular 9. Do you added localize? See: https://angular.io/guide/migration-localize

[sersart]

Does not working in Angular 9

[quedicesebas]

Broken with Angular 9.1

[vadimwe]

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

[KBroichhausen]

@vadimwe That's more likely a problem with Angular itself when trying to create the vendor.js. See: https://github.com/angular/angular/issues/35757

[dorje42]

Broken with Angular 9.1

[DaanTul]

Seems to work in Angular 9.1 with 12.x version for me

[quedicesebas]

I had to create a new project and move file to get ir work

[rajeshtezu]

Any update on this? Not working with Agnular 9.x. Any error is also not being thrown.

[ocombe]

Hello, like it was stated previously this seems to be an error with ngcc that is not recompiling the module that have been installed before the update to a new version of Angular. Cleaning node_modules and dist should do the trick.

I tried @BanupriyaSelvaraj's project and it works fine for me with a fresh install. If someones can provide a repro with a fresh install I'll try to see what the error is, but I'm not sure it's because of this lib... it was working fine for 9.0.0, and there shouldn't be a breaking change until v10. If there is one, then it's an error on the framework's side (and they shipped a breaking change when they shouldn't have)

[bytejan]

Also the same issue, translations are totally gone. I removed the dist folder and node modules.

I am using: @ngx-translate/core 12.1.2 @ngx-translate/http-loader: 4.0.0 @angular/localize ^9.1.1

Angular version 9.1.1

Sometimes the translations are there, and at once they are gone again. No error messages at all.

[rajeshtezu]

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 :)

[aidyclarke]

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 :)

@rajeshtezu90: Can you share what you did to "fix" the interceptor?

[vadimwe]

It's strange, but the package works for me with angular 9.1.2 with Ivy on. It throws warnings while ngcc compilation but still works.

I installed package with angular 8@latest and after updated it to 9@latest version

Here is warnings: 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

[ribchakraborty]

@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

• Root App
• Feature Module
• Lazy loading Module and working seamlessly.

@angular version - 9.0.6 my-learning-app.zip

run - npm i run - ng serve

[rsibanez89]

@ribchakraborty Your example project is working fine but still not working for Angular 9.1.9. I've tried

"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",

And

"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",

Translations are not appearing, anyone has solved it?

[yoedusvany]

Same issue with angular 9.1.7

[brendanalexdr]

I am about to install ngx-translate in an Angular 10 project. Is this still a problem?

[jps-hiro]

same here. I am using Angular 10.0.14 & node 12, but translate pipe is not working for me

[yoedusvany]

You have to add translate module to every module that you use, only import it. I had the same problem.

[PPInfy]

In all Modules where you want to use translation you can use

import { TranslateModule, TranslateLoader } from "@ngx-translate/core"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { HttpClient } from "@angular/common/http";

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

@NgModule({ declarations: [<your_declarations>], imports: [ yourImportedModules, TranslateModule.forChild({ loader: { provide: TranslateLoader, useFactory: customHttpLoader, deps: [HttpClient], }, isolate: false }), ], })

Works in

node 14.x
angular-core 9.1.12
ngx-translate/core 12.1.2
ngx-translate/http-loader 5.0.0

[OscarStack]

It's working fine over here, but there is an issue with the auto import.

If you apply manually, just like @PPInfy example ` // import { TranslateLoader } from '@ngx-translate/core/lib/translate.loader';

// import { TranslateModule } from '@ngx-translate/core/public_api';

// import { TranslateHttpLoader } from '@ngx-translate/http-loader/lib/http-loader';

// like below...

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader'; `

[MohamedAbdElmawgoud]

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 }

[charitha95]

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 }