Use ngx-translate in an hybrid (AngularJs + Angular) app

[RilRil]

Hi everyone, I've got this hybrid app with Pascal Precht 's module for the AngularJs part and ngx-translate for the Angular part. It works great. Now, I want to use only ngx-translate, so I need to downgrade ngx-translate directive. But I can't seem to make it work... I did this in my app.module.ts :

angular.module('aqf.i18n').directive('translate', downgradeComponent({component: TranslateDirective}));

and in my AngularJs template <h1 translate="home.hello"></h1>

nothing work. I get no errors. nothing. the directive is not interpreted.

Have someone done that already ? Thanks for your help

[erperejildo]

You shouldn't get any weird issue on a hybrid app. Does this work on desktop?

[RilRil]

@erperejildo hmm when I say hybrid , I mean it's a mix of AngularJs and Angular. And it's just a web app.

[erperejildo]

Maybe worth changing the title to avoid further confusions then.

If you're loading it using AngularJS I'm not quite sure. I use it with Angular.

I suggest you creating a simple demo without anything else on top and just translating something. Feel free to link to Plunker

[RilRil]

I am loading it in Angular but I downgrade it to be able to use it in the AngularJs app... but it's not working. I can downgrade TranslateService though. But I'd need the directive as well

[erperejildo]

hmmm not sure. How are you using AngularJS? With TS?

Send the link to have a look

[ansarikhurshid786]

This package is required angular 2+. If you want to use it with angularjs or angular 1.x.x then use https://github.com/angular-translate/angular-translate.

[RilRil]

Thx @ansarikhurshid786 but as I said It's an hybrid app. I use angularJS AND Angular in the same time...

[erperejildo]

that sounds more like a different problem

[jonathanlie]

+1 having kinda similar problem here.

Running a hybrid ng-upgrade app, using angular-translate for AngularjS rendered templates, and ngx-translate for Angular rendered templates. Couldn't get an Angular rendered template to translate when downgraded.

[IgorWolbers]

You have to install both the angularjs version and the angular2+ version of the translate libraries side by side. This is because you can't downgrade or upgrade directives or pipes/filters and these are usually critical pieces that you want to be using. If all you want is the service then you can downgrade just that and ignore everything here.

I get my localized resources from an http end point, if that is not the case for your app you can modify it as necessary. What I did think was important was that only 1 call be made to get the translations from the end point at any point in time. The code here demonstrates just that. It should be easy enough to also add some handlers so the language can be changed and both translation services (angularjs and angular2x) get updated with a single call although I did not do that because my app does not yet use that feature.

---

npm packages to install

@ngx-translate/core
@ngx-translate/http-loader // optional but I load my resources from a url
angular-translate

your-angular-module.js

var app = angular.module('yourModule', ['all-your-modules-here', 'pascalprecht.translate']);

your-angularX.module.ts

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';

declare var angular: angular.IAngularStatic;

// getting my resources from an http end point
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/api/resource/', '');
}

// I omitted everything but the parts necessary to demonstrate what is needed to do this
@NgModule({
  declarations: [/*components, pipes, etc*/],
  imports: [
    UpgradeModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]}
    })
  ],
  providers: [],
  entryComponents: [],
  bootstrap: []
})
export class MyRootModule {
  constructor(private readonly upgrade: UpgradeModule, private readonly translate: TranslateService) {}

    ngDoBootstrap() {
      this.translate.setDefaultLang(userLanguage);
      const module = angular.module('yourModule');

      // configure the angularjs $translateProvider
      module.config(['$translateProvider', ($translateProvider: any) => {
        translateService.use(userLanguage).subscribe(_ => {
          $translateProvider.translations(userLanguage, _);
          $translateProvider.preferredLanguage(userLanguage);
          $translateProvider.use(userLanguage);
        });
      }]);

      // optional but this is how i bootstrap angularjs to my angular2+
      this.upgrade.bootstrap(document.body, ['yourModule'], { strictDi: true });
  }
}

[jimmylin212]

Not sure if you solve the problem yet. We are using hybrid app currently. We create a pipe called translate in AngularJS and call the service that created in Angular2 for the downgrade.

// app.js
app
.filter('translate', function() {
  const filter = (input) => {
    if (input) {
      return ourTranslate.getTranslate(input);
    }
  };
  filter.$stateful = true;
  return filter;
},

// service ourTranslate
getTranslate(value: any): string {
  if (typeof value === 'string') {
    const translatedResult = this.translate.instant(value);
    return translatedResult ? translatedResult : value;
  } else {
    return value;
  }
}

It works very well. Maybe not exactly what you want, but this is how we do in hybrid app.

[ed-bezna]

Hi, I'm running an Angular hybrid app with the downgrade module. How did you manage to make ngx-translate to work alongside angular-translate? I'm asking this because i can't seem to address the angular cli from any of the project's folder since there is no angular.json to be found.

[ggnaegi]

Maybe some of you still have problems with the translations... This is my solution (keeping both angular and angularjs modules):

const translate = platformRef.injector.get(TranslateService);
const angular = getAngularJSGlobal();
angular
       .module('app')
       .config([
             '$translateProvider',
             ($translateProvider: any) => {
            translate.onLangChange.subscribe((event: LangChangeEvent) => {
                $translateProvider.translations(event.lang, event.translations);
                $translateProvider.use(event.lang);
            });
            }
        ]);