File replacements are ignored for web workers

[jsangmeister]

Command

build, serve

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v18

Description

Hi, we recently updated to angular v19. During that we also migrated the builder to the recommended @angular/build builder, but in my tests the error also occured for the old devkit builder. After the update, we noticed that file replacements are ignored for web workers, see minimal reproduction. Before our upgrade, this was working without problems. I'm happy about any help :)

Minimal Reproduction

StackBlitz: https://stackblitz.com/edit/4gqtqodb

After everything was built, you will see in the console:

Component: production
Worker: development

However, as defined in the angular.json, the file env.ts should be replaced by env.prod.ts, which is done correctly in the component.

Exception or Error

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.0.7
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 19.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1900.7
@angular-devkit/core         19.0.7
@angular-devkit/schematics   19.0.7
@angular/build               19.0.7
@angular/cdk                 19.0.5
@angular/cli                 19.0.7
@angular/material            19.0.5
@schematics/angular          19.0.7
rxjs                         7.8.1
typescript                   5.6.3
zone.js                      0.15.0

Anything else relevant?

Seems to happen for both build and serve, local and on stackblitz and for both the devkit and the new builder.

[iJhefe]

same here after upgraded to 18 and started to use esbuild

[clydin]

We are investigating this issue. However, please consider switching to using conditional imports (https://angular.dev/tools/cli/build-system-migration#import-export-conditions) if possible. These provide improved capabilities for the common development/production use case including type-checking, improved IDE support, and leverage established methods for defining conditional behavior. A partial package.json containing only the imports section can be placed within the application source code directory structure as well to provide per application configuration.

[jsangmeister]

Thanks for the recommendation, it looks promising. Unfortunatly, I believe this does not suit our needs as we currently have three different deployment setups (dev, stage, prod) with different file replacements for each. From what I've gathered, your suggested solution only supports differentation based on the optimization flag, so we would not be able to differentiate between stage and prod, as the both have optimization: true. Or is this possible somehow?

[clydin]

Currently that is correct in that it works for production/development as well as browser/server bifurcation but not any additional. We are evaluating an added configuration option to support custom resolution conditions. This should handle the staging case as well as other more complex resolution scenarios. One of the benefits of the condition-based resolution is flexibility in configuration such as nested conditions and patterns.

[gigadie]

Same here, updated to v19 and now the Workers' code is compiled with the development environment file instead of production.

[gigadie]

We are investigating this issue. However, please consider switching to using conditional imports (https://angular.dev/tools/cli/build-system-migration#import-export-conditions) if possible. These provide improved capabilities for the common development/production use case including type-checking, improved IDE support, and leverage established methods for defining conditional behavior. A partial package.json containing only the imports section can be placed within the application source code directory structure as well to provide per application configuration.

I have tried this solution but I get this error: [ERROR] TS2307: Cannot find module '#environment' or its corresponding type declarations. [plugin angular-compiler]

[clydin]

That error may indicate a configuration issue with the application's tsconfig, and in particular, the module and/or moduleResolution options. With a new v19 project, the contents are as follows:

  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022"
  }

[vouxiong]

I am having the same problem. I have environment.ts, environment.prod.ts and I'm simply running a ng build --configuration=production and it will not work. I am using Angular 19 Stand Alone. My older solutions work, Angular 17 or so.