Access Angular build --configuration environment files within webpack.config and index-html-transform

[BenRacicot]

Is your feature request related to a problem? Please describe. I've been trying to set certain elements within index-html-transform.ts but was surprised to not have access to the expected angular-configured environment file.

Here's how it is configured in my angular.json:

"architect": {
         ...
	"build": {
		"configurations": {
		    "dev": { ...
		    "stage": { ...
		    "prod": {
		        "fileReplacements": [
		            {
		                "replace": "src/environments/environment.ts",
		                "with": "src/environments/environment.prod.ts"
		            }
		        ]

src/environments/environment.prod.ts is of course the active environment file in my app when I run this build target. But src/environments/environment.prod.ts is not available for use within webpack.config.js or index-html-transform.ts.

This would be hugely useful for many reasons and perhaps is available but I cannot find reference to how.

My ultimate goal is to set a variable within the targeted environment file for each build configuration but the above is the first step for me.

Describe alternatives you've considered Within webpack.config.js I can see by logging that the env file appears to be Angular's own @angular-devkit/build-angular:dev-server (I think) but contains no reference to any build target or src/environments/environment.prod.ts.

Additional context Perhaps this is possible? If not could this be a feature?

[just-jeb]

The replacement of the default environment with a build target specific one happens during the Webpack build, while your custom config is processed prior to the build (in order to build the merged config).
So I unless you explicitly import the environment file into your webpack config you won't have an access to this - it simply didn't happen yet.

Could you elaborate a bit on what you're trying to achieve? If all you want is to set a global variable then you could have several webpack configs (one per build config) that extend some common config and initialize the variable in global scope.

[BenRacicot]

Hey Jeb, thanks for responding with such detail.

I'm simply trying to customize my builds per environment. A small example is customizing favicons per build but the use-case for having access to the environment variables you've set for each build target are extensive.

I did not figure out any solutions for access to the build env within webpack.config.js. But did figure out that within index-html-transform.ts:

export default async (targetOptions: TargetOptions, indexHtml: string) => {
   console.log(targetOptions.configuration); // build target 

    if (targetOptions.configuration !== 'prod') { 
        // do stuff for lower environments
    }

Perhaps this is the best it gets for knowing what build is ... building? haha.

[just-jeb]

@BenRacicot How about using Custom Webpack Config Function feature?

[mloffer]

This surprised me, as well. I'm trying to transform my index.html to inject the correct Google Tag Manager ID for the environment. The obvious place to store that is in environment.ts.

Another scenario that I'll need to address is injecting the proper Google Search Console validation meta tag.

[BenRacicot]

Hi @mloffer after this discussion I wrote a 3 part on medium about how I got access to the env. (thanks to Jeb's work here).

Favicons for Each Environment

I wonder if there are better ways to accomplish this but there isn't much online.