Angular project language conversion

Question

Angular project language conversion

In my Angular project, I am working with a json file located in src\assets\i18n that contains Swedish translations:

{
  "COMMON": {
    "BUTTON-NO-FILE": "Dokument saknas",
    "BUTTON-EDIT": "Redigera",
    "BUTTON-SAVE": "Spara",
    "BUTTON-CANCEL": "Avbryt",
    "BUTTON-OK": "Ok",
    "BUTTON-CLOSE": "Stäng",
    "ERRORS": {
      "GENERAL-TITLE": "Ett fel har inträffat",
      "401-MSG": "Testing 401 message",
      "499-MSG": "Applikationen svarar inte, försök igen senare.",
      "403-MSG": "Handlingen kan inte utföras, kontrollera din behörighet."",
      "404-MSG"": "Resurserna som du försöker nå finns inte.",
      "400-MSG": "Ett fel har inträffat. Kontakta HSB om felet fortfarande kvarstår."
    }
  }
}

I have added a custom message for error code 401: "Testing 401 message".

Now, there is a logic implemented to map the error messages in the translation json file based on their respective error status:

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { MessageDialogService } from '@hsbweb/hsb-shared-components-module';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(
    private messageDialogService: MessageDialogService,
    private translate: TranslateService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(request)
          .pipe(
              catchError((error: HttpErrorResponse) => {
                  let errorMessage = '';
                  switch (error.status) {
                    case 499:
                      errorMessage = this.translate.instant('COMMON.ERRORS.499-MSG');
                      break;
                    case 404:
                      errorMessage = this.translate.instant('COMMON.ERRORS.404-MSG');
                      break;
                    case 403:
                      errorMessage = this.translate.instant('COMMON.ERRORS.403-MSG');
                      break;
                    case 400:
                      errorMessage = this.translate.instant('COMMON.ERRORS.400-MSG');
                      break;
                    case 401:
                      errorMessage = this.translate.instant('COMMON.ERRORS.401-MSG');
                      break;
                    default:
                      errorMessage = this.translate.instant('COMMON.ERRORS.400-MSG');
                      break;
                  }
                  this.messageDialogService.error(
                    this.translate.instant('COMMON.ERRORS.GENERAL-TITLE'),
                    errorMessage,
                    this.translate.instant('COMMON.BUTTON- OK'));

                  return throwError(error);
              })
          );
  }
}

Although I have specified the case for the 401-message, it still refers to COMMON.ERRORS.401-MSG instead of the actual value in the translation file.

Do I need to make any changes to the json file after editing it? Even re-compiling the Angular project did not resolve the issue. Being new to Angular, what steps should I take next?

javascript angular typescript

Answer 1

Answer №1

There are a few things to consider in this situation.

Instead of passing the string literal 'COMMON.ERRORS.4xx-MSG', it is recommended to remove the quotes.
To access items in JSON using Angular, you can utilize the HttpClient to fetch them.

Here is an example of a service that can help you retrieve JSON objects from a file (please note that I have not tested this code yet).

@Injectable({
    providedIn: 'root'
})
export class AppConfigProvider {
    public settings: AppConfig;

    constructor(
        private http: HttpClient
    ) {}

    load(): Promise<any> {
        const jsonFile = `src\assets\i18n.json`;
        return this.http
            .get<AppConfig>(jsonFile)
            .pipe(
                tap(res => {
                    this.settings = res;
                })
            )
            .toPromise();
    }

    public getAppSetting(path: string) {
           return Object.keys(this.settings)
            .filter(setting => setting.includes(path))
            .map(filteredSetting => this.settings[filteredSetting]);
    }
}

You will also need to include the following code for any assets you want your Angular project to load and reference properly.

In your angular.json file under projects.app-name.architect.build.assets[]:

{
 "glob": "*.json",
 "input": "src/assets/config",
 "output": "assets/config"
}

If this seems like too much work, consider replacing the .json file with a constants file in your project. This way, you can simply import those constants as needed instead of creating a complex service like this one.

If you have any questions or need further clarification, feel free to reach out. Thanks!

Answer 2

There are a few things to consider in this situation.

Instead of passing the string literal 'COMMON.ERRORS.4xx-MSG', it is recommended to remove the quotes.
To access items in JSON using Angular, you can utilize the HttpClient to fetch them.

Here is an example of a service that can help you retrieve JSON objects from a file (please note that I have not tested this code yet).

@Injectable({
    providedIn: 'root'
})
export class AppConfigProvider {
    public settings: AppConfig;

    constructor(
        private http: HttpClient
    ) {}

    load(): Promise<any> {
        const jsonFile = `src\assets\i18n.json`;
        return this.http
            .get<AppConfig>(jsonFile)
            .pipe(
                tap(res => {
                    this.settings = res;
                })
            )
            .toPromise();
    }

    public getAppSetting(path: string) {
           return Object.keys(this.settings)
            .filter(setting => setting.includes(path))
            .map(filteredSetting => this.settings[filteredSetting]);
    }
}

You will also need to include the following code for any assets you want your Angular project to load and reference properly.

In your angular.json file under projects.app-name.architect.build.assets[]:

{
 "glob": "*.json",
 "input": "src/assets/config",
 "output": "assets/config"
}

If this seems like too much work, consider replacing the .json file with a constants file in your project. This way, you can simply import those constants as needed instead of creating a complex service like this one.

If you have any questions or need further clarification, feel free to reach out. Thanks!

Angular project language conversion

Answer №1

Similar questions

Uploading Multipart Files and JSON Data using Spring Boot

Tips on annotating a SolidJS component with Typescript

Data binding not being subscribed to the input decorator

The integration of slot as a prop in rootlayout creates chaos in all routing processes when using Next.js parallel routing

What is the best method to delete a value from localStorage using redux-persist?

Sweet treats, items, and data interchange format

What are the steps to turn off the blue hyperlinks on iOS devices?

Create a Bootstrap modal that includes an object tag to embed a PDF file

The removeAllOptions() function is restricted to select, ol, and ul elements. If you try to use it with any other element, an alert will appear during a keyup event on Firefox

Clicking the mouse within three.js

Exploring Angular 2/4: Unpacking the Process of Accessing API Data Using Tokens

The name 'CallSite' is missing from the Error stack trace when working with Node.js and TypeScript

Triggering actionsheet button clicks in Ionic 3

Unable to associate JSON data using the map method

What is the best way to handle my JavaScript libraries in Grunt - Bower or NPM?

Navigating back to the top of a webpage within an Angular iframe on Safari desktop

execute task to optimize CSS encoding in the build process

Confirm that the array contains exactly 2 elements

Extract the entire div including all its elements and then transmit it using the PHP mail function

Is there a way to automatically update and utilize the access token for a socket connection?