Injection of environmental variables into app services

Question

Injection of environmental variables into app services

Through the use of Nx, I have created multiple apps that each have their own environment with different API URLs. The Nx Workspace library includes shared services that are utilized among all apps, however, it is necessary to pass the environment-api-url when injecting the service into a component.

    @Component({
      standalone: true,
      imports: [
       ReactiveFormsModule,
       FormsModule,
       HttpClientModule
      ],
      providers: [AuthenticationService],
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css'],
    })
    export class LoginComponent implements OnInit {
     ngOnInit() {}
    }

Is it possible to pass parameters like this?

providers: [AuthenticationService<environment>]

Or is there another method to achieve this?

Any advanced suggestions are highly appreciated!

angular typescript nrwl-nx

Answer 1

Answer №1

Start by creating a new library named app-config. Inside, create an index.ts file at

lib/app-config/src/lib/config/index.ts

.

In the index.ts file, export an InjectionToken as follows:

import { InjectionToken } from '@angular/core';

export const APP_CONFIG = new InjectionToken('App Configuration');

Add this to the Providers array in your LoginComponent:

import { APP_CONFIG } from '@YourWorkspaceName/app-config';

providers: [
    {
      provide: APP_CONFIG,
      useValue: environment,
    },
    AuthenticationService
]

Next, inject APP_CONFIG into your AuthenticationService to access environment variables:

import { APP_CONFIG } from '@YourWorkspaceName/app-config';

    export class AuthenticationService {
     private readonly url: string = this.appConfig.authServiceUrl;
    
     constructor(
        private http: HttpClient,
        @Inject(APP_CONFIG) private appConfig: any
      ) {}
    
     login(EmailAddress: string, Password: string): Observable<any> {
        return this.http.post<{ authToken: string }>(`${this.url}/login`, {
          EmailAddress,
          Password,
        });
      }
    }

Hopefully you find these instructions beneficial.

Answer 2

Start by creating a new library named app-config. Inside, create an index.ts file at

lib/app-config/src/lib/config/index.ts

.

In the index.ts file, export an InjectionToken as follows:

import { InjectionToken } from '@angular/core';

export const APP_CONFIG = new InjectionToken('App Configuration');

Add this to the Providers array in your LoginComponent:

import { APP_CONFIG } from '@YourWorkspaceName/app-config';

providers: [
    {
      provide: APP_CONFIG,
      useValue: environment,
    },
    AuthenticationService
]

Next, inject APP_CONFIG into your AuthenticationService to access environment variables:

import { APP_CONFIG } from '@YourWorkspaceName/app-config';

    export class AuthenticationService {
     private readonly url: string = this.appConfig.authServiceUrl;
    
     constructor(
        private http: HttpClient,
        @Inject(APP_CONFIG) private appConfig: any
      ) {}
    
     login(EmailAddress: string, Password: string): Observable<any> {
        return this.http.post<{ authToken: string }>(`${this.url}/login`, {
          EmailAddress,
          Password,
        });
      }
    }

Hopefully you find these instructions beneficial.

Injection of environmental variables into app services

Answer №1

Similar questions

Fastify Typescript: dealing with an unidentified body

Issue with Angular Material: Default selection not being applied in mat-select component

Is Angular4 preloaded with bootstrap library?

There is a complete absence of text appearing on the html page when Angular is

The text editor within the NG nickname terminal

Issue with Material UI v5: "spacing" property not found on custom theme object

Struggling to map a JSON file in a NextJS project using Typescript

What is the process for utilizing global packages when running `ng serve`?

Is it possible to retrieve a constant value while developing a customized rule in typescript-eslint?

Is it possible to generate a user profile using Firebase Cloud Functions and assign the user id as the document id?

Exploring in Angular 2 by using First Name, Last Name, and Email for queries

Steps for showing a component (popup modal) just one time with React hooks

The Angular map function is throwing an error stating "undefined is not a function"

Error occurred during the Uglify process: Unable to access the 'kind' property as it is undefined

Troubleshoot: Issue with binding data from DynamicComponentLoader in Angular 2 template

Three.js and Angular - the requested function cannot be found

Previewing images with Dropzone through extending file types

Retrieve data from Ionic storage

Accelerated repository uses TypeScript to compile a node application with dependencies managed within a shared workspace

The variable is accessed before it is initialized in the context of Next.js and Server Actions