Utilizing the HttpClient in @NgModule Constructor for Method Invocation

Currently, in my application, I am utilizing Transloco for translation purposes. The @NgModule I am using is outlined below.

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: MyService().getLanguages(),
        defaultLang: 'en',
        fallbackLang: 'en',
        reRenderOnLangChange: true,
        prodMode: environment.production,
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
  ]
})

The MyService class triggers an external API call and includes HttpClient in its constructor. I am trying to set the availableLangs parameter by invoking getLanguages() and injecting HttpClient within MyService(...). However, I am facing a challenge in injecting dependencies in the @NgModule.

Is it feasible to achieve this or are there any other solutions available?

Answer №1

If you want to optimize the loading time of your Angular application, consider using Angular's APP_INITIALIZER feature to load language data before the application starts running.

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

How can Angular 4 manage an object containing other objects most effectively?

Who can guide me on the best way to handle a data structure like this: { "1":{ "id":"1", "name":"Facebook", "created_at":"", "updated_at":"", "fields":{ "1":{ "id":"1" ...

Having trouble with @viewChild not activating the modal popup and displaying an error message stating that triggerModal is not a function in

I am facing an issue where the click event is not being triggered from the parent component to display a Bootstrap 3 modal. I am getting the following error: ERROR TypeError: this.target.triggerModal is not a function This is what I have done so far: Pa ...

Exploring Angular: Retrieving a Variable in TypeScript Using a String Passed from HTML

Is there a way to retrieve the value of a variable in .TS by passing its name as a string from HTML? For example: In HTML: <div id="myID"><button mat-button (click)="foo('name')">Export to Excel</button></div> In TS v ...

Configuring price range filtering without the need for an apply button using Angular Material in Angular 6

I need help with implementing a feature where the user can select a starting price and an ending price, and based on that selection, I want to display relevant products without the need for a button. I want to achieve this using mat-slider to sort the prod ...

Angular 2 variable reference

Within my appComponent, I have the line this.loggedIn = this.authenticationService.isLogged;. This means that appComponent is utilizing authenticationService to retrieve the isLogged data. I assume that this.loggedIn is referencing the data from the servi ...

What is the reason behind prettier's insistence on prefixing my IIAFE with ";"?

I've encountered async functions in my useEffect hooks while working on a JavaScript project that I'm currently transitioning to TypeScript: (async ():Promise<void> => { const data = await fetchData() setData(data) })() Previously, ...

Manufacturing TypeScript classes that are returned by a factory

Developed a custom library that generates classes based on input data and integrates them into a main class. To enhance code maintainability and readability, the logic for generating classes has been extracted into a separate file that exports a factory f ...

Error in Angular FormArray: Unable to access the 'push' property because it is undefined

Currently, I am working with a form that is divided into 3 subcomponents, each containing 3 form groups. The 3rd group contains a FormArray which will store FormControls representing true/false values for each result retrieved from an API call. Initially, ...

What causes the focus on input to be lost when using ngFor with a function that returns an array of objects?

When using *ngFor to iterate over an array of objects returned by a function, the focus blocks input preventing any typing. Strangely, this issue does not occur when the array of objects is directly inside the template. What could be causing this problem? ...

Can a discriminated union be generated using mapped types in TypeScript?

Imagine you have an interface called X: type X = { red: number, blue: string } Can a union type Y be created using mapped types? If not, are there other ways to construct it at the type level? type Y = { kind: "red" payload: number } | ...

CORS policy has blocked the Node.JS OvernightJS Express CORS XMLHttpRequest request

I have a back-end API created using Node.js and Typescript that is listening on localhost:3001. Additionally, I have a front-end application built with Angular and Typescript that is listening on localhost:4200. Currently, I am attempting to upload an ima ...

Connecting RxJS Observables with HTTP requests in Angular 2 using TypeScript

Currently on the journey of teaching myself Angular2 and TypeScript after enjoying 4 years of working with AngularJS 1.*. It's been challenging, but I know that breakthrough moment is just around the corner. In my practice app, I've created a ser ...

Why is my index.tsx file not properly exporting? (React + Typescript)

I've developed a basic Context Provider that I'd like to package and distribute via npm. To package my code, I utilized the create-react-library tool. In my project, I've set up an index.tsx file that should serve as the entry point for im ...

Tips for removing data from documents that include automatically generated IDs

In my Angular project, I am utilizing google-cloud-firestore as the database. To import Firestore, I used the code import { AngularFirestore } from '@angular/fire/firestore';. The following function is used to add data to the database: changeLev ...

Can you explain the distinction between angular-highcharts and highcharts-angular?

Our team has been utilizing both angular-highcharts and highcharts-angular in various projects. It appears that one functions as a directive while the other serves as a wrapper. I'm seeking clarification on the distinctions between the two and recomme ...

The requested property does not exist within the 'CommonStore' type in mobx-react library

I'm diving into the world of TypeScript and I'm running into an issue when trying to call a function from another class. I keep getting this error - could it be that functions can only be accessed through @inject rather than import? What am I mis ...

NPM is currently experiencing difficulties installing or uninstalling packages

I'm having trouble installing or uninstalling any npm package because of an error that says "Cannot find module 'emoji-regex'." Does anyone know what might be causing this issue? Here are my configurations. I also tried running "npm install ...

Angular 7 is throwing an error message stating that it is unable to locate the module named './auth.service'

Currently, I am facing a challenge while using Angular Guards to secure my pages from unauthorized access. import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot , Router } from '@angular/router'; import { Observable } from 'rxjs& ...

The async and await functions do not necessarily wait for one another

I am working with Typescript and have the following code: import sql = require("mssql"); const config: sql.config = {.... } const connect = async() => { return new Promise((resolve, reject) => { new sql.ConnectionPool(config).connect((e ...

Ways to transfer information from a parent component to a child component in Angular 5 without the need for *ngFor

Currently, I am utilizing *ngFor to iterate through a selector and passing data to the child component. Let's take a look at the code snippet below: <app-piegraph *ngFor="let studentData of studentData" [studentData]="studentData"></app-pieg ...