feat(custom-webpack): support TS for indexTransform (#689)

packages/custom-webpack/README.md

@@ -362,7 +362,7 @@ module.exports = async config => {
 **_Requires `@angular-devkit/build-angular@0.801` and `@angular-builders/custom-webpack@8.1.0`._**
 
 Since Angular 8 `index.html` is not generated as part of the Webpack build. If you want to modify your `index.html` you should use `indexTransform` option.  
-`indexTransform` is a path (relative to workspace root) to a `.js` file that exports transformation function for `index.html`.  
+`indexTransform` is a path (relative to workspace root) to a `.js` or `.ts` file that exports transformation function for `index.html`.  
 Function signature is as following:
 
 ```typescript
@@ -409,6 +409,20 @@ module.exports = (targetOptions, indexHtml) => {
 };
 ```
 
+Alternatively, using TypeScript:
+
+```ts
+import { TargetOptions } from '@angular-builders/custom-webpack';
+
+export default (targetOptions: TargetOptions, indexHtml: string) => {
+  const i = indexHtml.indexOf('</body>');
+  const config = `<p>Configuration: ${targetOptions.configuration}</p>`;
+  return `${indexHtml.slice(0, i)}
+            ${config}
+            ${indexHtml.slice(i)}`;
+};
+```
+
 In the example we add a paragraph with build configuration to your `index.html`. It is a very simple example without any asynchronous code but you can also return a `Promise` from this function.
 
 Full example [here](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack/examples/full-cycle-app).

packages/custom-webpack/examples/full-cycle-app/angular.json

@@ -68,6 +68,10 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "itwcw": {
+              "customWebpackConfig": null,
+              "indexTransform": "./index-html.transform.ts"
             }
           }
         },
@@ -79,6 +83,9 @@
           "configurations": {
             "production": {
               "browserTarget": "full-cycle-app:build:production"
+            },
+            "itwcw": {
+              "browserTarget": "full-cycle-app:build:itwcw"
             }
           }
         },
@@ -128,6 +135,9 @@
           "configurations": {
             "production": {
               "devServerTarget": "full-cycle-app:serve:production"
+            },
+            "itwcw": {
+              "devServerTarget": "full-cycle-app:serve:itwcw"
             }
           }
         }

packages/custom-webpack/examples/full-cycle-app/e2e/protractor-ci-itwcw.conf.js

@@ -0,0 +1,5 @@
+const config = require('./protractor-ci.conf').config;
+
+config.specs = ['./src/**/*.e2e-spec-itwcw.ts'];
+
+exports.config = config;

packages/custom-webpack/examples/full-cycle-app/e2e/src/app.e2e-spec-itwcw.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display paragraph coming from transform function', async () => {
+    await page.navigateTo();
+    expect(await page.getParagraphText()).toEqual('Configuration: itwcw');
+  });
+});

packages/custom-webpack/examples/full-cycle-app/index-html.transform.ts

@@ -0,0 +1,9 @@
+import { TargetOptions } from '@angular-builders/custom-webpack';
+
+export default (targetOptions: TargetOptions, indexHtml: string) => {
+  const i = indexHtml.indexOf('</body>');
+  const config = `<p>Configuration: ${targetOptions.configuration}</p>`;
+  return `${indexHtml.slice(0, i)}
+            ${config}
+            ${indexHtml.slice(i)}`;
+};