angular
Feature request: add indexHtmlTransformer and plugins options to application builder
Command
build
Description
Hi. This feature exists for a long time in angular-builders and nx custom builders' code.
plugins allows adding vite plugins; we use this option to use custom plugin with .env file parsing, adding ENVIRONMENT_NAME and APP_VERSION global variables and much more. I guess there are plenty of other use-cases for this.
indexHtmlTransformer allows to replace some placeholders in index.html while building or serving an app. Useful to make similar DX when building or developing locally my app.
There is not much to do with these two, but i think this will boost DX many times. Thanks for your time!
Describe the solution you'd like
No response
Describe alternatives you've considered
https://github.com/nrwl/nx/blob/master/packages/angular/src/executors/application/application.impl.ts
@zip-fa, thanks for this feature request.
While we do offer the option to add additional plugins and modify the index.html file, we do not consider this to be part of the "recommended" or optimal path.
What is the use-case of including environment variables directly in the index.html instead of embedding them in the JS bundle and setting them with the --define option?
You misunderstood me a bit. NX parses .env.{envName} files automatically and set them inside process.env
We have three environments: staging, prod and dev.
While it's ok to use --define option, it's much easier to depend on .env files. Our plugin to define global env vars is:
const path = require('path');
const { dirname } = require('node:path');
const envPrefix = /^APP_/i;
function getProjectEnvVars() {
const envVars = {};
for (const key in process.env) {
if (envPrefix.test(key)) {
envVars[key] = process.env[key];
}
}
return envVars;
}
const envVarPlugin = {
name: 'env-var-plugin',
setup(build) {
const options = build.initialOptions;
const envVars = getProjectEnvVars();
const sourceDirectory = dirname(build.initialOptions.tsconfig);
const packageJsonPath = sourceDirectory + '/package.json';
options.define['__APP_VERSION__'] = `"${ require(packageJsonPath).version }"`;
options.define['__SOURCE_DIRECTORY__'] = `"${ sourceDirectory }"`;
options.define['BUILD_ENV'] = JSON.stringify(envVars);
options.define['ENVIRONMENT_NAME'] = `"${ process.env.NX_TASK_TARGET_CONFIGURATION }"`;
}
};
module.exports = envVarPlugin
For index.html we change placeholders on the fly:
<head>
{analytics_scripts}
</head>
transformer:
export default function(indexContent: string) {
const replacements: Record<string, string> = {
'{analytics_scripts}': '...'
};
for (const key in replacements) {
indexContent = indexContent.replaceAll(key, replacements[key]);
}
return indexContent;
Hi all, adding another use case, some scripts needs to be added in head section like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-XXXX"></script>
currently we can't use variable for GTM id in index.html, we can also load script using js/angular, but it will have some issue if its loaded later from angular app code. sometimes script's domain name can also be different based on env, fonts can also be different for each env, currently we need to create different index.html files for each env & replace it using fileReplacements config.
@imaksp Have you tried using in the "index" property in angular.json to provide different index.html files for different configurations? https://angular.dev/reference/configs/workspace-config#index-configuration
Hi @stephanietuerk yes I forgot to mention but I am using it but it also requires new index file for each env like file replacement, variables support in index would not require new file for each env, currently we need to create new file even if only 2-3 things are different between each env.