Así que estoy tratando de usar una configuración de paquete web personalizado en mi aplicación Angular 10.x donde quiero eliminar los atributos de 'prueba de datos' de mis plantillas durante la compilación, por lo que el código de producción no contiene referencias de selector e2e. Para esto, estoy usando el generador de paquetes web personalizados ( https://www.npmjs.com/package/@angular-builders/custom-webpack ) con una configuración de paquete web personalizada. Estoy cargando la configuración en angular.json así:
"builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./extra-webpack.config.ts", "mergeStrategies": { "externals": "append" } },Y la configuración del paquete web se ve así:
import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack'; import { EnvironmentType, getEnumValues } from '@enum-package/core/enumeration'; import * as webpack from 'webpack'; export default (config: webpack.Configuration, options: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => { const env: EnvironmentType = <EnvironmentType>( getEnumValues(EnvironmentType).find(environmentType => targetOptions.configuration?.toLowerCase().includes(environmentType.toLowerCase()), ) ) ?? EnvironmentType.DEVELOPMENT; if (config.module?.rules) { // Remove E2E testing attributes from production code if (env === EnvironmentType.PRODUCTION) { const testSelectorRegex = new RegExp(/data-test="(.*)"|@HostBinding\('attr.data-test'\)(.*);/g); config.module.rules.push({ test: /\.(js|ts|html)$/, enforce: 'pre', loader: 'string-replace-loader', options: { search: testSelectorRegex.source, replace: match => { console.log(`Replace E2E selector '${match}'.`); return ' '; }, flags: 'g', }, }); } } return config; }; El paquete search-replace-loader ( https://www.npmjs.com/package/string-replace-loader ) es lo que se encarga de reemplazar los atributos reales de las plantillas. Mientras ejecuto el comando ng build , puedo ver que el reemplazo en sí funciona, ya que el Replace E2E selector '${match}'. se está ejecutando y puedo ver las etiquetas que quiero eliminar registradas durante la compilación.
Por alguna razón, cuando ejecuto la aplicación desde la carpeta dist después de la compilación, las etiquetas aún están en su lugar cuando inspecciono el DOM en mi navegador.
¿Me estoy perdiendo de algo? ¿Hay algún paso de compilación antes o después de ejecutar este cargador de paquetes web que no use el código fuente reemplazado? ¿Tiene esto algo que ver con el motor de compilación Ivy que estamos usando?