(@nx/angular v19 + ng-packagr v18) cannot build angular library due to error while running postcss

[DibyodyutiMondal]

Current Behavior

@nx/angular - 19.0.0-beta.2
ng-packagr - 18.0.0-next.3

Running a build errors with the following message:
"Cannot read properties of undefined (reading 'has')"

Expected Behavior

It should build

GitHub Repo

No response

Steps to Reproduce

I'll try to set one up later. But the additional info below should be quite helpful, I think.

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.11.1
OS     : linux-x64
pnpm   : 9.0.5

nx (global)    : 19.0.0-beta.2
nx             : 19.0.0-beta.2
@nx/js         : 19.0.0-beta.2
@nx/jest       : 19.0.0-beta.2
@nx/eslint     : 19.0.0-beta.2
@nx/angular    : 19.0.0-beta.2
@nx/cypress    : 19.0.0-beta.2
@nx/devkit     : 19.0.0-beta.2
@nx/esbuild    : 19.0.0-beta.2
@nx/node       : 19.0.0-beta.2
@nx/storybook  : 19.0.0-beta.2
@nrwl/tao      : 19.0.0-beta.2
@nx/web        : 19.0.0-beta.2
typescript     : 5.4.5
---------------------------------------
Community plugins:
@fortawesome/angular-fontawesome : 0.14.1
@storybook/angular               : 7.6.17

Failure Logs

> nx run angular-common:build

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@dd/angular-common'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy full compilation mode.

 NX   Cannot read properties of undefined (reading 'has')

Pass --verbose to see the stacktrace.


 NX   Ran target build for project angular-common (2s)

   ✖  1/1 failed
   ✔  0/1 succeeded [0 read from cache]

Package Manager Version

No response

Operating System

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

Additional Information

More information:

1. The verbose stacktrace reveals that the error originated from the following line in ng-packagr, inside the findFile function. The specific part is the files.has on line 41.

2. It is obvious that that findFile(searchDirecories) expects searchDirectories to be an array of objects, but for some reason searchDirectories is not an array of objects, but a string (more on that later)

3. findFile is being called by ng-packagr, from loadPostcssConfiguration

4. loadPostcssConfiguration itself also expects the searchDirectories parameter to be an array of objects, to be passed directly into findFile

5. Here's the problem: @nx/angular passes a string to the loadPostcssConfiguration function, but instead of passing an array of objects, it passes in a string.
   

   nx/packages/angular/src/executors/utilities/ng-packagr/stylesheet-processor.ts

   Lines 98 to 101 in c49c07d

   	const {
   	loadPostcssConfiguration,
   	} = require('ng-packagr/lib/styles/postcss-configuration');
   	postcssConfiguration = loadPostcssConfiguration(this.projectBasePath);

Possible fix

Replace this part

nx/packages/angular/src/executors/utilities/ng-packagr/stylesheet-processor.ts

Lines 98 to 101 in c49c07d

	const {
	loadPostcssConfiguration,
	} = require('ng-packagr/lib/styles/postcss-configuration');
	postcssConfiguration = loadPostcssConfiguration(this.projectBasePath);

with

  const { 
    loadPostcssConfiguration, 
    generateSearchDirectories 
  } = require('ng-packagr/lib/styles/postcss-configuration');
  const searchDirectories = generateSearchDirectories([this.projectBasePath]);
  postcssConfiguration = loadPostcssConfiguration(searchDirectories);

I verified this by patching the file in node_modules. Works as expected

[leosvelperez]

Thanks for reporting this!

Angular 18 is not supported by Nx yet, so issues are expected. You must wait for support to be added, which is currently in progress. Please note that support won't land until the Angular 18 stable version is released.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.