@nx/angular:webpack-browser bug whith custom Webpack config.

[plonkton228]

Current Behavior

I am using "@nx/angular:webpack-browser" to apply a custom Webpack configuration. However, when running the nx build --verbose command, I get the following error: " webpack 5.94.0 compiled with 4 warnings in 6344 ms
✔ Index html generation complete.
NX Cannot read properties of undefined (reading 'colors')
TypeError: Cannot read properties of undefined (reading 'colors')
at statsToString (C:\localProject\nxAngular\Angular\node_modules@angular-devkit\build-angular\src\tools\webpack\utils\stats.js:79:32)
at webpackStatsLogger (C:\localProject\nxAngular\Angular\node_modules@angular-devkit\build-angular\src\tools\webpack\utils\stats.js:280:17)
at C:\localProject\nxAngular\Angular\node_modules@angular-devkit\build-angular\src\builders\browser\index.js:287:48"

I am also attaching the files nx.json, project.json
nx.json
project.json

Screenshots of the Webpack configuration

Expected Behavior

The error is gone, the bundle is building.

GitHub Repo

https://github.com/plonkton228/Angular

Steps to Reproduce

1. Use @nx/angular:webpack-browser as the executor for building the project, specifically the nx build command.
2. Make sure to use your custom Webpack configuration.

Nx Report

Node           : 18.20.5
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.8.2

nx                 : 20.0.12
@nx/js             : 20.0.12
@nx/jest           : 20.0.12
@nx/eslint         : 20.0.12
@nx/workspace      : 20.0.12
@nx/angular        : 20.0.12
@nx/devkit         : 20.0.12
@nx/eslint-plugin  : 20.0.12
@nx/web            : 20.0.12
@nx/webpack        : 20.0.12
typescript         : 5.5.4

Failure Logs

Executing task: npm run build 


> @tik-tok/[email protected] build
> nx build --verbose

[NX CLOUD] Verifying current cloud bundle
[NX CLOUD] A local bundle currently exists:  {
  version: '2411.15.7',
  fullPath: 'C:\\localProject\\nxAngular\\Angular\\.nx\\cache\\cloud\\2411.15.7'
}
[NX CLOUD] Last verification was more than 30 minutes ago, verifying bundle is still valid
[NX CLOUD] Currently installed bundle is invalid, downloading version 2411.15.7  from  https://cloud.nx.app/nx-cloud/static/client-bundle
[NX CLOUD] Done:  C:\localProject\nxAngular\Angular\.nx\cache\cloud\2411.15.7
Was not able to require.resolve module nx/src/utils/app-root from the following paths: C:\localProject\nxAngular\Angular\node_modules\nx\node_modules,C:\localProject\nxAngular\Angular\node_modules. This may be expected.
Was not able to require.resolve module nx/src/utils/app-root from the following paths: C:\localProject\nxAngular\Angular\node_modules\nx\node_modules,C:\localProject\nxAngular\Angular\node_modules. This may be expected.

 NX   Running target build for project TikTok and 1 task it depends on:

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— 
[NX CLOUD] Verifying current cloud bundle
[NX CLOUD] A local bundle currently exists:  {
  version: '2411.15.7',
  fullPath: 'C:\\localProject\\nxAngular\\Angular\\.nx\\cache\\cloud\\2411.15.7'
}
[NX CLOUD] Last verification was within the past 30 minutes, will not verify this time
[NX CLOUD] Done:  C:\localProject\nxAngular\Angular\.nx\cache\cloud\2411.15.7
[Nx Cloud Debug] Attempting to acquire filesystem lock with path:  C:\Users\Roma\AppData\Local\Temp\client-instance-id.lock
[Nx Cloud Debug] Failed to create folder lock at path: C:\Users\Roma\AppData\Local\Temp\client-instance-id.lock
[Nx Cloud] Unable to detect a VCS context from the environment.

 NX   RunStart


{
  "meta": {},
  "branch": null,
  "runGroup": "7b262c20f8b4916ad3b8ca72bbe3fb98b14afad6",
  "ciExecutionId": null,
  "ciExecutionEnv": "",
  "hashes": [
    "11500774932636138200",
    "9338699802485925779"
  ],
  "machineInfo": {
    "machineId": "5ZgKOa4fXzLP6XSzGdw2xw==",
    "platform": "win32",
    "version": "Windows 10 Pro",
    "cpuCores": 12
  },
  "vcsContext": null,
  "clientInstanceSource": "CLOUD_RUNNER",
  "clientInstanceId": "69d648fb-9e64-4e6e-97a5-8d1359f40a5b"
}


> nx run TikTok:pre_build

> ts-node generateConfigProjectJson.ts


 NX   Connection to Nx Cloud failed with status code 401

This workspace is more than three days old and is not connected. Workspaces must be connected within 3 days of creation. Claim your workspace at https://cloud.nx.app.


 NX   Nx Cloud: Cache miss 11500774932636138200.


> nx run TikTok:build:production

- Generating browser application bundles (phase: setup)...
- Generating index html...
asset main.js 456 KiB [emitted] [minimized] [big] (name: main) 1 related asset
orphan modules 2.38 MiB [orphan] 234 modules
runtime modules 670 bytes 3 modules
./src/main.ts + 36 modules 2.07 MiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.js (456 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (456 KiB)
      main.js

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.94.0 compiled with 4 warnings in 6239 ms
✔ Index html generation complete.
 NX   Cannot read properties of undefined (reading 'colors')
TypeError: Cannot read properties of undefined (reading 'colors')
    at statsToString (C:\localProject\nxAngular\Angular\node_modules\@angular-devkit\build-angular\src\tools\webpack\utils\stats.js:79:32)
    at webpackStatsLogger (C:\localProject\nxAngular\Angular\node_modules\@angular-devkit\build-angular\src\tools\webpack\utils\stats.js:280:17)
    at C:\localProject\nxAngular\Angular\node_modules\@angular-devkit\build-angular\src\builders\browser\index.js:287:48

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Running target build for project TikTok and 1 task it depends on failed

Failed tasks:

- TikTok:build:production

Hint: run the command with --verbose for more details.


 NX   Storing terminal outputs for TikTok:pre_build with hash 9338699802485925779


 NX   Storing terminal outputs for TikTok:build:production with hash 11500774932636138200


 NX   Nx Cloud Problems

Package Manager Version

10.8.2

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[pawel-twardziak]

hi @plonkton228 let me check on it. Thanks for reporting.

[pawel-twardziak]

@plonkton228 first question https://github.com/plonkton228/Angular - this is an Angular workspace, not NX one. Have you migrated the workspace to NX -> https://nx.dev/recipes/angular/migration/angular ?

[plonkton228]

Hi, @pawel-twardziak my mistake, I should have initially mentioned that the fully configured project by Nx is located on the "NxConfiguration" branch.

[pawel-twardziak]

thanks @plonkton228 for the clarification 👍I am checking