Customize the forRoot value in the app module with dynamic Angular settings from the API

Looking to dynamically insert a value into the ngModule of the app module, retrieved from an api call (which fetches configuration details).

In the module below, I am trying to update the rootUrl based on the fetched configuration. I have attempted various methods without success. Is there a solution to this problem?

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    ApiModule.forRoot({rootUrl: config.url})   <-- Need help here
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: (config: AppConfig) => () => config.load(),
      deps: [AppConfig],
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer №1

After some exploration, I discovered an alternative method to accomplish my task. Originally, I was trying to set the base URL of my endpoint based on the configuration. However, I realized this could also be done by implementing an interceptor to modify the request URL dynamically.

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

JavaScript => Compare elements in an array based on their respective dates

I have an array consisting of more than 50 objects. This array is created by concatenating two arrays together. Each object in this array contains a 'date' key with the date string formatted as: `"2017-03-31T11:30:00.000Z"` Additionally, there ...

Make sure to wait for a Promise to resolve before initiating another Promise within a for loop in Angular

Issue: I am trying to call multiple APIs in sequence within a for loop and need each API call to wait for the previous one to resolve before making the next call. Within my code, I have a for loop that calls a Get API to generate documents on the server s ...

Guide to dynamically including a tooltip in an input box using Angular 2

I need to implement a feature where a Tooltip message is displayed when hovering over an input box. The content of the Tooltip message will depend on the response received from a service. If the service responds with 'true', the Tooltip message s ...

Using agSelectCellEditor to populate Angular Grid dropdowns with values from a database

Utilizing refData and agSelectCellEditor in Angular 8 to display dropdown values during editing. I found a solution at the following link: https://www.ag-grid.com/javascript-grid-reference-data/ However, the dropdown list data is fetched from the Databas ...

VS code shines a spotlight on Jasmine functions within Angular 6

Recently, I made the switch to Angular 6.0. However, in VS Code, all jasmine functions are being highlighted as unknown even though they work fine and the tests run successfully. How can I make intellisense recognize Jasmine? In previous versions, a worka ...

Exploring the benefits of using getServerSideProps with NextJS and Typescript for

Dear community, I am facing a challenge with integrating NextJS Layout and Typescript. Although everything seems to be working fine, I can't seem to get rid of the squiggly line under the props when passing them from getServerSideProps. The prop {som ...

Identifying browsers in Angular - a comprehensive guide

Does Angular (TypeScript) have the capability to identify whether the browser being used is either IE or Edge? If so, what method can be employed to accomplish this task? ...

What is the reason for the failure of class binding when used with ngOnChanges?

I am new to working with Angular. I attempted to include a class if the property isMajor is true. An if statement alters the value of the isMajor property based on the generated propName in ngOnChanges. If I remove the following line propName === &apos ...

What is the role of the handleSubmit parameter in React Hook Form?

I'm encountering an issue with TypeScript in the handleSubmit function. To start off, I am accessing the handleSubmit function through the useForm hook: const {handleSubmit, control, watch, reset} = useForm() Next, I define a submit function: con ...

Mastery over the manipulation of manipulations

As I work on validating my forms using mat-errors and hasErrors, everything runs smoothly until I encounter the need for another control within an "inner" form group. Here is what I mean: prozessPersonenzuordnungenForm = new FormGroup({ person: new ...

Is it possible to retrieve cached data from React Query / Tan Stack Query outside of the React tree?

Currently, I am in the process of developing an error handler for our mobile app that will send user data to the server when unexpected errors occur. Previously, I was able to easily retrieve user information from a global state. However, after removing t ...

Ways to transfer data between components in Angular 2: Passing variables between children

Within my application, I have a parent component (P) and two children components (C1) and (C2). Both C1 and C2 are children of the parent component P, but they are not nested. In the parent template, it is structured as follows: <c1-component></c ...

Trouble arising when attempting to delete a recently added element from an array

Allow me to elaborate on the issue I am facing: This is the class for my component : export class DataArray implements OnInit { private data: string[] = []; addData(msg: string) { this.data.push(msg); } deleteMsg(index: number) { ...

Exploring Angular 2 Beta 8: An Introduction to @Query Usage

My attempt to utilize @Query to fetch data regarding an element in my template has not been successful. I made an effort using the following approach: Referenced here. Here is a snippet of my code, import {Component, Query, QueryList, ElementRef} from &a ...

experimenting with a polling platform

I have an Angular service that continuously polls the API every 60 seconds to check if the client is still connected: export class AppService { get isOnline$(): Observable<{ online: boolean }> { return this.isOnlineSource.asObservable(); } ...

Angular 2 ensures that all of the columns receive updates

Currently, I am facing an issue with my angular 2 editable table created using ngFor. The problem arises when I attempt to edit one column, as all the columns get updated with the same value. One solution could be creating a new component, but I would pr ...

Is there a way to transfer an updated variable to a different component without causing the component to reload?

I'm unsure if such a query exists because I am not entirely certain of the terminology related to the concept I am seeking. Here's the scenario: I have a shared service with the following property: // shared.service.ts public showLoginForm: bool ...

Despite adding a policy to allow any and setting up middleware, CORS policy is still blocking access

I've been wrestling with this problem for days. My goal is to set up a CORS policy so that my application doesn't rely on a CORS plugin (extension) to function. I have followed numerous tutorials on how to correctly add the policy and arrange the ...

I am facing an issue where certain Material icons are not displaying properly in my Angular project

I am encountering a problem in my Angular project where some Material icons are not displaying properly: <mat-icon>domino_mask</mat-icon> <mat-icon>hourglass</mat-icon> Interestingly, all other icons appear as expected. I have take ...

Are there specific files or classes that store constants for different keyboard events?

When working in Angular, I often bind data with a host listener using code similar to the example below: @HostListener('window:keyup', ['$event']) onKeyUp(event: KeyboardEvent) { if (event.keyCode === 13) { this.onEnterClicked(ev ...