Angular で HTML から属性を削除する

概要

Angular で prod ビルドする際に HTML からテスト用の属性 data-testid を削除します。

環境

• Angular CLI: 12.2.13
• Node: 14.15.0
• Package Manager: npm 6.14.8
• OS: linux x64

手順

1. カスタム Webpack ビルダー をインストールします。

   npm i -D @angular-builders/custom-webpack@12
   

2. HTML からテスト用の属性 data-testid を削除するコードを作成します。

   data-testid-loader.js

   module.exports = source => {
       let dataAttr = 'data-testid="([^"]*)"';
       if (source.match(dataAttr)) {
           source = source.replace(new RegExp(dataAttr, 'g'), '');
       }
       return source;
   };
   

3. カスタム Webpack の構成ファイルを作成します。

   webpack.custom.js

   let path = require('path');
   
   module.exports = {
       module: {
           rules: [
           {
               test: /\.html$/,
               use: ['data-testid-loader'],
           },
           ],
       },
       resolveLoader: {
           alias: {
           'data-testid-loader': path.join(__dirname, 'data-testid-loader.js'),
           },
       },
   };
   

4. プロジェクトの builder にカスタム Webpack を設定します。

   angular.json

   {
       "projects": {
           "app-web": {
               "architect": {
                   "build": {
                       "builder": "@angular-builders/custom-webpack:browser",
                       "options": {
                           "customWebpackConfig": {
                           "path": "./webpack.custom.js"
                           }
                       },
                   },
               },
           },
       },
   }