It’s often the case where we need to alter our application’s index.html file, based on the environment. The most common example is adding some analytics scripts to our production environment. In this article, I want to show you two different ways to do it using Angular CLI.
First, let’s take a look at the straightforward way; if we examine the JSON input schema of the schematics browser builder, we see the index option — the path of a file to use as the application’s HTML index file. The filename in the specified path is used as the name of the generated file, created in the root of the application’s configured output path.
So what we can do is create an additional index.html file for our production environment, and use it when building for production:
The downside to this method is that we need to maintain two HTML index files. In most cases this is not a major factor, because it’s a file that doesn’t often change.
Let’s look at the second, more flexible option. First, we need to enable the use of a custom Webpack config in our project, using the @angular-builders/custom-webpack library. I’ll not go over the process of doing that, as I already addressed it in detail in the following article:
Customize Webpack Configuration in Your Angular Application
As a side note, this is an opportunity for you to contribute to this library and add schematics that’ll create the entire configuration automatically.
Now that we’ve added it to our project, we can use the index transform option to modify the HTML file output, based on the environment.
indexTransform is a path (relative to the workspace root) to a .js or .ts file, that exports a transformation function for index.html. The function receives target options and original index.html content (generated by Angular CLI), and returns a new content as a string or a Promise:
In the above example, we’re using cheerio to update the HTML, and add the analytics script. Moreover, we also have the opportunity to minify our HTML file. We can use any available tool, such as the EJS template language, to modify the HTML content.
🚀 In Case You Missed It
Here are a few of my open source projects:
- Akita: State Management Tailored-Made for JS Applications
- Spectator: A Powerful Tool to Simplify Your Angular Tests
- Transloco: The Internationalization library Angular
- error-tailer — Seamless form errors for Angular applications
- Forms Manager: The Foundation for Proper Form Management in Angular
- Cashew: A flexible and straightforward library that caches HTTP requests
- Error Tailor — Seamless form errors for Angular applications
And many more!
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
Environment-Based Index HTML with Angular CLI was originally published in Netanel Basal on Medium, where people are continuing the conversation by highlighting and responding to this story.
