Nx: Common Environment Variables

[wbhob]

Nx IS AWESOME! I love it soo much. I have just a couple feature requests:

1. Shared assets folder. This is particularly useful if you have CSS libraries shared between apps.
2. Shared environments. This is useful when sharing apiUrls and the like.

Otherwise, keep rocking!

[jschwarty]

Thanks @wbhob, glad you like it! In terms of your feature requests, you can actually set up your Nx Workspace to accomplish these things right now.

1. You can make a new lib (ng g lib assets) in your workspace, put your shared asset files in the src dir of that, and in the .angular-cli.json file in the apps array and add a glob entry for your shared assets to be used by each app:

{
  "input": "../../../libs/assets/src/",
  "output": "assets/",
  "glob": "**/*"
}

1. You can do a similar thing with environments, creating a new lib (ng g lib environments) and then importing constants from those into your app environment files and merging them into your app environment constants. Add something like a sharedEnvironments const to the lib that has properties for development and production and use them in your app environments:

/apps/yourapp/src/environments/environment.ts

import {sharedEnvironment} from '@nxenv/environments';

export const environment = {
  production: false,
  apiUrl: sharedEnvironment.development.apiUrl
};

/apps/yourapp/src/environments/environment.prod.ts

import {sharedEnvironment} from '@nxenv/environments';

export const environment = {
  production: true,
  apiUrl: sharedEnvironment.production.apiUrl
};

[wbhob]

That's awesome! Thank you!

[FallenRiteMonk]

@jschwarty Could you please give me a hint on how you would then point an api in a lib to different urls?
Meaning I have a local deployed api endpoint during development (https://localhost/...) and a deployed one for production (https:example.com/...)

I cant seem to get my head wrapped around it. Using your approach from point 2 I would have to import the libs variables in every app and use a HttpsInterceptor to inject the url or something like that, but that would interfere with any other api endpoint that I would like to contact.

The other solution I can think of is importing environment into the api lib, but that would then make it useless to have it in a lib.

[SWGeekPD]

@FallenRiteMonk did you found any solution.

[FallenRiteMonk]

@SWGeekPD I use injection.

In a helper lib I define a InjectionToken:
export const ENVIRONMENT = new InjectionToken<{}>('Environment');
Which I then inject wherever it's needed:
constructor(@Inject(ENVIRONMENT) private environment: {}) {}