Dev server not able to resolve dependencies with PNPM

[atsjo]

Command

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

Angular 19.1.1

Description

Local development not able to resolve som dependencies, see error message below... Downgrading angular to 19.1.1 fixes the problem (I can run with latest cli)

Minimal Reproduction

Test running ng:serve with a project using angular-calendar on windows...

Exception or Error

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
Failed to resolve dependency: angular-draggable-droppable, present in client 'optimizeDeps.include'
Failed to resolve dependency: angular-resizable-element, present in client 'optimizeDeps.include'
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
Request for HTML file "/index.html" was received but no asset found. Asset may be missing from build.
21:35:20 [vite] Pre-transform error: Failed to resolve import "angular-draggable-droppable" from ".angular/vite-root/devtest/main.js". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/repos/teve-no/task4s/.angular/vite-root/devtest/main.js:6393:23
  6391|  import * as i79 from "@angular/material/icon";
  6392|  import * as i87 from "angular-calendar";
  6393|  import * as i96 from "angular-draggable-droppable";
     |                        ^
  6394|  import * as i104 from "angular-resizable-element";
  6395|  function tvCalendarComponent_Case_25_Template(rf, ctx) {
21:35:21 [vite] Internal server error: Failed to resolve import "angular-draggable-droppable" from ".angular/vite-root/devtest/main.js". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/repos/teve-no/task4s/.angular/vite-root/devtest/main.js:6393:23
  6391|  import * as i79 from "@angular/material/icon";
  6392|  import * as i87 from "angular-calendar";
  6393|  import * as i96 from "angular-draggable-droppable";
     |                        ^
  6394|  import * as i104 from "angular-resizable-element";
  6395|  function tvCalendarComponent_Case_25_Template(rf, ctx) {
      at TransformPluginContext._formatError (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47397:41)
      at TransformPluginContext.error (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47392:16)
      at normalizeUrl (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:45642:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:45761:39
      at async Promise.all (index 317)
      at async TransformPluginContext.transform (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:45688:7)
      at async EnvironmentPluginContainer.transform (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47223:18)
      at async loadAndTransform (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:41034:27)
      at async viteTransformMiddleware (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:42478:24)

Your Environment

Using latest angular 19.1.3, with cli 19.1.4 on windows and nx.
Tried both angular and nx executors/builders...

Node           : 22.13.0
OS             : win32-x64
Native Target  : x86_64-windows
pnpm           : 9.15.4

nx                     : 20.3.2
@nx/js                 : 20.3.2
@nx/eslint             : 20.3.2
@nx/workspace          : 20.3.2
@nx/angular            : 20.3.2
@nx/devkit             : 20.3.2
@nx/esbuild            : 20.3.2
@nx/eslint-plugin      : 20.3.2
@nx/module-federation  : 20.3.2
@nx/vite               : 20.3.2
@nx/web                : 20.3.2
@nx/webpack            : 20.3.2
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/vite/plugin
---------------------------------------
Community plugins:
@analogjs/vite-plugin-angular : 1.12.1
@analogjs/vitest-angular      : 1.12.1
angular-calendar              : 0.31.1
angular-eslint                : 19.0.2

Anything else relevant?

Running windows...

[atsjo]

Not running SSR, but HMR enabled (as default, and its working fine with angular 19.1.1 and latest cli)

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[atsjo]

here is a repro https://github.com/atsjo/ng-repro @alan-agius4

It's an issue when using pnpm, it works with npm...

clone -> pnpm i -> ng serve

[atsjo]

adding

    "angular-draggable-droppable": "8.0.0",
    "angular-resizable-element": "7.0.2",

to dependencies solves the problem, then those libs are available top level in node_modules.... This also works to fix the problem in my original repo with lots of other deps, so there's probably some edge case with how angular-calendar includes these libs...

[alan-agius4]

Closing as reproduction has been deleted.

[atsjo]

angular calendar, which triggered the problem, has been updated to fix the problem... I think the root cause was some esm exports not done correctly...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}