Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

215
Vistas
Webpack 4 + Angular 10 paquete web personalizado: el cargador de búsqueda y reemplazo no funciona

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?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda