'Embed asset translation files into Angular web component

I am trying to create a web components with Angular. To manage translations I use ngx-translate (https://github.com/ngx-translate/core).

This is how I load the tranlstion file:

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

This is a simple .html file where I included my web component:

<!DOCTYPE html>
<html>
<head>
  <title>Example Website with Embedded Angular Web Component</title>
  <script src="https://mydomain.it/widget-calendar.js"></script>
  <link href="https://mydomain.it/widget-calendar.css" rel="stylesheet">
</head>
<body>
<optix-calendar api-key="apiKey"
                signup-title="Amazing newsletter!">
</optix-calendar>
</body>
</html>

My webcomponents should be used in several sites, so different domains. I'm wondering how to embed my translation files into my webcomponent. I tried to use a absolute url to load them (otherwise Angular is looking for them in the local pc of the user that is using my web component) but I'm facing problem with CORS and I'm asking myself if it's the right solution. I was looking for documentation about it but I didn't find any best practice to handle asset content. What's the best approach to embed asset translations in my web component?

angular web-component

Solution 1:^[1]

I had the same problem and solved it by writing the translation files in a .ts, not .json files. Then load them in service, which is initiated in the main component.

localization.servise.ts:

import { TranslateService } from '@ngx-translate/core';
import { Injectable } from '@angular/core';
import en from 'src/app/shared/i18n/en';
import es from 'src/app/shared/i18n/es';
import de from 'src/app/shared/i18n/de';

@Injectable({
  providedIn: 'root'
})
export class LocalizationService {

  constructor(private translate: TranslateService) {
    this.translate.setTranslation('de', de);
    this.translate.setTranslation('en', en);
    this.translate.setTranslation('es', es);

    this.translate.setDefaultLang('en');
  }

  use(language: string): void {
    this.translate.use(language);
  }
}

And in the main component

app.component.ts:

import { Component, Input } from '@angular/core';
import { LocalizationService } from 'src/app/shared/localization.service';

@Component({
  selector: 'app-warehouse',
  template: '<span>{{"food.bestCookies" | translate}}</span>',
})
export class WarehouseComponent {
  @Input() language: string = 'en';

  constructor(localization: LocalizationService) {
    localization.use(this.language);
  }
}

en.ts

export default {
  food: {
    bestCookies: 'The perfect cookies'
  }
};

es.ts

export default {
  food: {
    bestCookies: 'Las galletas perfectas'
  }
};

de.ts

export default {
  food: {
    bestCookies: 'Die perfekten Kekse'
  }
};

inspired from https://blog.kalvad.com/export-your-angular-component-as-a-web-component/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	grozdanovgg

'Embed asset translation files into Angular web component

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]