0

I need to consume a remote micro frontend which is an Angular app, this app has its own services to call certain API, it has its own requests to a certain API. Also, that app has a config to set environment variables that contain the URL API. When I'm trying to consume from the main app (Angular as well) I don't know how to set those variables to avoid hard coding them directly to the remote micro frontend. For example the remote app calls

http://rutaapi/api/items

, where "rutaapi/api" is setted with env variables, but the resuult that I'm getting is

https://items/

. So I need to somehow provide that environment variable towards the remote micro frontend.

Additional info.: In the remote app, I'm setting the env variables using the APP_INITIALIZER provide in the AppModule. Maybe I have to use only one APP_INITIALIZER in the main app and not anymore in the remote app? Any suggestions please.

José Eras
  • 90
  • 4

1 Answers1

0

You can set environment variables using a config.json in the src root.
You can follow the examples in this guide:

//config.json
{
  "ENV": "development",
  "BASE_URL": "http://localhost:3000"
}

//app.ts
import { Component } from '@angular/core';
import Config from "../config.json";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  environment = Config.ENV;
  baseUrl = Config.BASE_URL;
}

For the topic of multiple environments (1 per MFE) vs 1 for all - check out my answer

Let me know if this helps

Eggcellentos
  • 1,570
  • 1
  • 18
  • 25