Creating a dynamic configuration for service instantiation in Angular 4/5

Currently working on a library that has an AuthModule with an AuthService for managing OAuth2 authentication using oidc-client-js. I want the application using this library to be able to set up the configuration for the OAuth client. One way to do this is by providing the configuration in the forRoot method of the AuthModule:

AuthModule.forRoot({
    applicationNamespace: 'ConsumingApp',
    clientId: 'consuming.app'
});

In the forRoot method, I would like to initialize the service with the provided config.

I found a workaround by setting the properties on the window object and then accessing them in the AuthService as window.clientId and window.applicationNamespace.

(window as any).applicationNamespace = authConfig.applicationNamespace;
(window as any).clientId = authConfig.clientId;

Is there a more efficient or proper way to achieve this?

javascriptangulartypescriptauthenticationangular-services

Answer №1

To achieve this, you can utilize an injection token as outlined below.

First: Establish an InjectionToken to represent the configuration object that will be provided:

export const CONFIG_OPTIONS = new InjectionToken<ConfigOptions>('configOptions');

Second: Inject the token into the ConfigurationService constructor

Third: Make sure to pass the configuration object when calling the initialization function for your module

public static initialize(configOptions: ConfigOptions): ModuleWithProviders

Finally: Set the received configuration as the value for the injection token

{ provide: CONFIG_OPTIONS, useValue: configOptions }

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

Acquire the model from a field within an Angular Formly wrapper

I'm in the process of designing a wrapper that will exhibit the model value as regular text on the page. Once the mouse hovers over this text, it transforms into a Formly field, which works perfectly fine. However, I'm encountering an issue where ...

javascripthtmlangularjsangular-formly

Generating distinctive content within the confines of the Selenium WebDriver

Is there a way to generate a unique username value for the signup page username textbox using selenium webdriver instead of hardcoding it? For example: driver.findElement(By.id("username")).sendKeys("Pinklin") ; When "Pinklin" is hardcoded, running the ...

javascriptjavaseleniumselenium-webdriver

Having trouble making an ajax request using Cordova?

I recently started a new project and included some code for making a request. Below is how my JavaScript file looks: (function () { "use strict"; document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false ); function onDeviceR ...

javascriptjqueryajaxcordova

Having trouble populating the input text field with the selected value from a dropdown using JavaScript

I have implemented a JavaScript function to retrieve the id of a dropdown select with id='odrid'. The script looks like this: $('#odrid').change(function(){ $.getJSON( 'fetch.php', 'odrid='+$(&ap ...

javascriptphpjqueryjsonajax

Are you facing a version issue when trying to install npm packages like [email protected] and [email protected]?

Previously, I encountered unmet dependencies in npm installation. To resolve this issue, I referred to this helpful discussion. However, now I am facing problems related to npm deprecated versions: [email protected] and [email protected] when try ...

npmangularnpm-install

Verifying the "select" dropdown option prior to final submission

My website features multiple select dropdowns that require validation before submission. For instance, there may be a situation where seven select dropdowns are present as described below. My desired validation criteria is: If there are 5 or more "sel ...

javascriptphpjqueryhtml

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

javascripthtmld3.js

JavaScript treats string as a primitive value

When it comes to JavaScript, a String is considered a primitive value. However, it can also be treated as a String object. In programming terms, a primitive value refers to a value assigned directly to a variable. This raises the question: var d = "foo"; ...

javascript

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

javascriptjquerycsshtml

Using InputAdornment with MUI AutoComplete causes the options list to disappear

I created a custom AutoComplete component with the following structure: <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} ...

javascriptreactjsmaterial-uijsx

I'm curious about how to implement textarea functionality within Angular for modeling purposes

I have a desire to utilize the model and transmit it to the server. One instance of this is sending comments. comment.model.ts export interface Comment { article_no: number; username: string; nickname: string; creatat: Date; content: string; } ...

angulartypescript

Incorporating a filtering search bar in Ionic React to efficiently sort pre-existing lists based on their titles

Struggling to implement a search bar in my Ionic application has been quite challenging. I've searched for examples and tutorials, but most of them are based on Angular with Ionic. The React example in the Ionic docs didn't provide much help eith ...

reactjstypescriptionic-frameworkionic-react

Ensuring the input box value is up-to-date with jQuery validation

Currently, I am utilizing jQuery v1.9.1 in combination with jQuery-validate v1.9 to validate a user-provided id using the remote method. The main objective is to verify if this id exists within a database. However, there seems to be an issue with the json ...

javascriptphpjqueryajaxjquery-validate

Sharing information between controllers in OnsenUI using AngularJS and PhoneGap

I've encountered similar questions to mine that have been addressed, but I believe my scenario is unique. I began with the sample code available on this page for a basic app featuring a sliding menu integrated with Google Maps. My current project inv ...

javascriptangularjscordovaonsen-ui

Prevent the Spread of an Event for a Particular Controller

tl;dr Summary Develop a function that is able to handle a specific event on multiple elements within a hierarchy. The function should execute when the event is triggered on the first element reached during bubbling, but should not continue executing or re ...

javascripthtmleventsdom-events

Retrieve JSON object based on its unique identifier from a different JSON file

I am working with 2 API resources: and it returns JSON data like this: { "id": 771, "title": "Call to Alyce Herman - Engine Assembler", "assigned_with_person_id": 317, } provides ...

javascriptjsonlaravelvue.jsaxios

Is there a way to access the actionsObserver value from the Angular state?

When attempting to view state data using the code line this.store.select(selectUser), I am able to see the data as expected under actionsObserve. However, I am facing difficulty reading the data in actionsObserve with this line: this.store.select(selectUs ...

angularstate

AngularJS $http.get('') is throwing an error because some parameters are missing

I am currently working on an application that utilizes OAuth for authentication, but I am facing some issues with passing the URL parameters correctly. Despite trying various methods, my API keeps returning an error stating that the username and password a ...

javascriptangularjscordovaoauth

Jquery(Ajax) call encountered a problem when attempting to send the object

Struggling to send data to a MongoLab DB using JS and JQueryAjax call. The issue lies in being able to see the OID in the DB but no data is actually populated. Upon checking the code and network settings, it's evident that the payload always remains e ...

javascriptjqueryajaxmongodbmlab

What is the best way to identify the type of an element using AngularJS?

Is it possible to use ng-model to identify the type of an element? For example: How can we determine if a specific element is a dropdown or a checkbox? HTML Code Snippet <select multiple ng-model='p.color'> <option value="red">Re ...

javascriptangularjs