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

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
• Platform:

Others:

[BanupriyaSelvaraj]

Any update on this?

[Cephei]

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

[sebrojas14]

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

[sebrojas14]

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

[rajeshtezu90]

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.

[rajeshtezu90]

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?

[JPerfectSolution]

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: [],
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
}