In app.component.ts, the Transloco translateService.translate function is failing to function properly

I have encountered an issue where when I put the following code in my app.component.ts constructor, it does not work:

alert(this.translateService.translate('navigation.dashboard'));

But interestingly, if I place the same code in a submodule, it works perfectly fine.

Here is a snippet of my .json file:

    "navigation": {
    "dashboard": "Dashboard"
   }

In addition, in my app.module.ts, I made sure to import the TranslocoRootModule as well:

import { TranslocoRootModule } from './transloco/transloco-root.module';

imports: [
 ...  
 HttpClientModule,
 TranslocoRootModule
],

Is there anything that I might have overlooked?

angulartypescripttranslationtransloco

Answer №1

I encountered a similar issue and discovered that the transloco file (the json file) had not finished loading when I attempted to access the translation. It appears that the sequence of HTTP requests being made does not allow all translation files to load before the component is initialized.

For instance, navigating to a different page and then moving to this specific page using Angular would work fine because the translations file would have already been loaded. The problem only arose when trying to refresh the current page.

To circumvent this issue, here's what I did:

...
constructor(private translocoService: TranslocoService,
  private translocoHttpLoader: TranslocoHttpLoader ...) {
...
}

ngOnInit(): void {
...
this.translocoHttpLoader.getTranslation(this.translocoService.getActiveLang())).subscribe(translation => {
  alert(translation.navigation.dashboard);
})
...
}

I hope this example provides some clarity.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating EJS Statements in a Simple HTML Document along with TypeScript

Trying to comprehend a seed project for Angular 2 which is quite complex, something caught my attention in the index.html file that I can't explain. There seems to be ejs statements included: <!-- src/client/index.html --> <title><%= A ...

expressangulargulp

"Seamlessly Incorporating Angular into the Hybris Platform: A Comprehensive Guide

One crucial aspect I am looking to grasp is the integration of Angular in Hybris projects for front-end development. The process involves creating Angular components and adding a proxy within the Angular application to handle mapping and calling the approp ...

angularsap-commerce-cloud

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

javascriptangulartypescriptangular-material

Using vuex-class to interact with Vuex in non-Vue components

Is it possible to access Vuex outside of a Vue component using vuex-class? In a typical scenario, the process is quite straightforward: // some JS file import store from './../store'; // path to Vuex store store.commit('ux/mutationName&ap ...

javascripttypescriptvue.jsvuex

Dynamic setting of application URL in Spring Social at runtime

Our Application Structure: We utilize APIs such as Spring Boot, Spring Security, and Spring Social. UI-1 is powered by Angular 5 and communicates with the APIs. UI-2 also runs on Angular 5 and interacts with the same APIs. Users are authenticated via Sp ...

angularspring-bootjhipsterspring-social

Have you attempted to configure a JSON file to facilitate language translations?

I need some guidance on structuring my data.json file efficiently. Currently, it is set up as shown in the example below. The goal is to have a drop-down menu where users can select a language and then display 50 different pages with specific content. I wa ...

javascriptjqueryjsondrop-down-menutranslation

The FileReader's onload event handler does not seem to be triggering as expected

In short, my issue revolves around reading a csv file from an android device using JavaScript's FileReader. Although my code was functioning properly a month ago, upon revisiting it recently I discovered that the onload function no longer seems to be ...

javascripttypescriptfilereader

Linking typescript error messages with their respective compiler configurations (tsconfig.json)

Is there a way to identify which compiler option corresponds to a specific Typescript error? While working with Typescript in VSCode, I often encounter errors like initializer provides no value for this binding element. (Please note that these are warnin ...

typescriptvisual-studio-codetsc

Looking to create a dynamic Angular reactive form using API response data? Seeking guidance on how to achieve this? Let's

[ { "name": "jkjk", "firstName": "hgh", "lastName": "ehtrh", "replytype": "svdv", "prodCode": "svv", "execu ...

htmlangularformsdynamicangular-reactive-forms

Jest tests are failing to render React IonDateTime component

While executing Jest on an Ionic React component, I encountered a test failure consistently, regardless of whether the component had a time value or not. test('IonDateTime display', () => { render(<IonDatetime data-testid="foo" ...

reactjstypescriptionic-frameworkjestjs

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Encountering a specific error, I am aware of what the code signifies but unsure about the correct interface format: An error is occurring due to an 'any' type being implicitly assigned as the index expression is not of type 'number'. ...

javascripttypescriptvue.js

Problems encountered while starting npm in Angular 13

Versions -> PS C:\Users\user> npm --version 8.8.0 PS C:\Users\user> node --version v16.15.0 Executing the following command-> npx -p @angular/cli ng new JokeFrontB After that, I run Serve -> npm start and encountered t ...

node.jsangularnpm

Priority is given to strings over numbers

Here's some code I'm working with: <tbody> <tr> <td class="float-left"> <!-- {{selectedTemplat?.modifiedAt | da ...

javascriptangulartypescriptstringdate

Error in Angular-CLI: The return type of a public method from an exported class is referencing the name 'ErrorObservable' from an external module, but it cannot be named as such

Upon completing the development of an app that mirrors an existing Angular 2 (non-cli) application, I am encountering errors in several of my files now that the project has been transitioned to Angular-CLI. I am puzzled as to why these errors are arising i ...

javascriptangulartypescriptrxjsangular-cli

Next.js developers faced with GraphQL Apollo Client insistence on utilizing cache

Our Apollo Client implementation in Next.js (v14.2.5) SSR using the getClient() method is currently facing an issue where cached data is not being updated with the new data from the server. import { HttpLink } from "@apollo/client"; import { re ...

typescriptnext.jsserver-side-renderingapollo

Saving interface within parent interface in TypescriptorIn Typescript

Looking for assistance with building an Angular2 application that can receive messages via WebSocket. These messages vary in content but always include a message identifier. To handle this, I am aiming to implement a child-parent architecture. However, I e ...

angulartypescript

Guide on showcasing file content in a modal popup within a Kendo Grid

Currently, I am facing an issue with displaying the content of a JSON file within a modal window. All I can manage to do is display the file name as a link, but what I really want is to display the actual content of the file. Do you have any ideas on how ...

javascriptangulartypescriptkendo-uikendo-grid

How to create a karma-jasmine test case in Angular 2 to trigger a modal opening when a link is clicked

I need to verify that when a link is clicked, a modal should open. In my spec.ts file, I have written the following test: describe('NavbarComponent', () => { let comp: NavbarComponent; let fixture: ComponentFixture<NavbarComponent& ...

javascriptangularunit-testingkarma-jasmine

Incorporate CoreUI icons into a Vue.js TypeScript application

Currently, I am developing a Vue.js application using CoreUI in TypeScript. The issue I am facing pertains to CoreUI's icons. While my application runs smoothly and displays the icons, Visual Studio Code raises a concern about the specific line: icon ...

typescriptvue.jsiconscore-ui

What is the most effective way to determine the data type of a value associated with a key in an interface?

In my TypeScript interface, I have defined the following structure: MyInterface { 'key1': number | string; 'key2': string; 'key3': SomeOtherInterface; } I am looking to create a new type that utilizes the properties of ...

typescript