Skip to content

Dev server not able to resolve dependencies with PNPM #29455

Open
@atsjo

Description

@atsjo

Command

serve

Is this a regression?

  • 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/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47397:41)
      at TransformPluginContext.error (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47392:16)
      at normalizeUrl (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/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/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/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/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:45688:7)
      at async EnvironmentPluginContainer.transform (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47223:18)
      at async loadAndTransform (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:41034:27)
      at async viteTransformMiddleware (file:///D:/repos/teve-no/task4s/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_jiti@1.21.7_less@4.2.1_sass@1.83.1_stylus@0.64.0_terser@5.37.0_yaml@2.7.0/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...

Activity

atsjo

atsjo commented on Jan 22, 2025

@atsjo
Author

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

alan-agius4

alan-agius4 commented on Jan 22, 2025

@alan-agius4
Collaborator

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

atsjo commented on Jan 22, 2025

@atsjo
Author

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

atsjo commented on Jan 22, 2025

@atsjo
Author

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...

changed the title [-]Angular 19.1.2 and 19.1.3 fails ng:serve with dev server not able to resolve dependencies (on windows)[/-] [+]Angular 19.1.2 and 19.1.3 fails ng:serve with dev server not able to resolve dependencies PNPM[/+] on Jan 23, 2025
changed the title [-]Angular 19.1.2 and 19.1.3 fails ng:serve with dev server not able to resolve dependencies PNPM[/-] [+] ng:serve with dev server not able to resolve dependencies with PNPM[/+] on Jan 23, 2025
changed the title [-] ng:serve with dev server not able to resolve dependencies with PNPM[/-] [+]dev server not able to resolve dependencies with PNPM[/+] on Jan 23, 2025
changed the title [-]dev server not able to resolve dependencies with PNPM[/-] [+]Dev server not able to resolve dependencies with PNPM[/+] on Jan 23, 2025

1 remaining item

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Dev server not able to resolve dependencies with PNPM · Issue #29455 · angular/angular-cli