Mastering the Art of Injecting Objects from the Server

Question

Mastering the Art of Injecting Objects from the Server

Utilizing Angular Universal, I am serving my Angular application through an Express server.

The objective is to embed an environment object (from the server) into my application. To achieve this, I have created an InjectionToken

export const ENVIRONMENT = new InjectionToken('ENVIRONMENT');

and assigned it on the server side in the following manner:

app.engine(
  'html',
  ngExpressEngine({
    bootstrap: AppProdServerModule,
    providers: [{ provide: ENVIRONMENTS, useValue: environments }],
  })
);

Retrieving the environmental object works seamlessly while the application is operating on the server. However, encountering a NullInjectionError arises when the app switches to client-side execution.

constructor(@Inject(ENVIRONMENTS) private env) { }

Hence, what approach is deemed most effective for injecting an object originating from the server across the entire application (including the client)?

angular typescript express angular-universal

Answer 1

Answer №1

Your client-side application may not have access to the value of this provider during runtime.

Without a complete view of the use case, it is challenging to provide a definitive answer. However, when executing on the client side, you can define the provider value through an HTTP request. Consider the following example:

export class SetEnvService () {
  constructor(
    private httpClient: HttpClient,
    private injector: Injector
  ) { }

  setEnv(){
    this.httpClient.get('URL_OF_ENV_CONFIG').pipe(
      take(1),
      tap(config => Injector.create({
        providers: [
          { provide: ENVIRONMENT, useValue: config }
        ]
      }, parent: this.injector)
      )
    )
  }
}

Answer 2

Your client-side application may not have access to the value of this provider during runtime.

Without a complete view of the use case, it is challenging to provide a definitive answer. However, when executing on the client side, you can define the provider value through an HTTP request. Consider the following example:

export class SetEnvService () {
  constructor(
    private httpClient: HttpClient,
    private injector: Injector
  ) { }

  setEnv(){
    this.httpClient.get('URL_OF_ENV_CONFIG').pipe(
      take(1),
      tap(config => Injector.create({
        providers: [
          { provide: ENVIRONMENT, useValue: config }
        ]
      }, parent: this.injector)
      )
    )
  }
}

Mastering the Art of Injecting Objects from the Server

Answer №1

Similar questions

Encounter an Unexpected Token Issue when using NextJS-auth0 in Jest

Is there a way to prevent the URL of my Next.js app from constantly changing?

I'm experiencing issues with my Ionic application Dockerize not properly functioning in the browser

developed a website utilizing ASP MVC in combination with Angular 2 framework

As soon as my fingers grace the keyboard, the website springs to life before my

Ways to access the chosen value from Ionic's popover modal

Connecting to the Redis server

Currently, I am working on developing a to-do task manager using Angular 2. One of the tasks I am tackling involves updating the value

Implementing TypeScript type declarations for merging core types

Oops, it seems like there was an issue with NextJS 13 Error. The createContext functionality can only be used in Client Components. To resolve this, simply add the "use client" directive at the

Angular: Redirecting to destination that necessitates initial visit to the login page

Accelerate the deployment process on Heroku

Listening to changes in a URL using JQuery

Error in Ionic Cordova Build prod: Module "." not found - Requires Typescript version >3

A guide on loading modules dynamically using React and Typescript from a server

A critical issue occurred: array length is invalid. The attempt to include EJS in the template failed due to

What is the best way to set a JSON string as a variable?

Issue: The --outFile flag only supports 'amd' and 'system' modules

Employ ion-grid for a layout reminiscent of Duolingo's design

Guide on Creating a Custom Property within the Same Component in Angular 2