How to fix Directory import '@angular-devkit\build-angular\src\dev-server' is not supported resolving ES modules after updating Angular to version 13

Question

When running ng serve I get the following error after updating my angular version:

An unhandled exception occurred: Directory import 'C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular-devkit\build-angular\src\dev-server' is not supported 
resolving ES modules imported from C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
Did you mean to import C:/Users/xxx/Documents/desktop-server-client-app/desktop/server/client/node_modules/@angular-devkit/build-angular/src/dev-server/index.js?
See "C:\Users\xxx\AppData\Local\Temp\ng-TMJqg5\angular-errors.log" for further details.

Log output:

[error] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular-devkit\build-angular\src\dev-server' is not supported resolving ES modules imported from C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
    Did you mean to import C:/Users/xxx/Documents/desktop-server-client-app/desktop/server/client/node_modules/@angular-devkit/build-angular/src/dev-server/index.js?
        at finalizeResolution (internal/modules/esm/resolve.js:272:17)
        at moduleResolve (internal/modules/esm/resolve.js:699:10)
        at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
        at Loader.resolve (internal/modules/esm/loader.js:85:40)
        at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
        at Loader.import (internal/modules/esm/loader.js:164:28)
        at importModuleDynamically (internal/modules/cjs/loader.js:1006:27)
        at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:30:14)
        at eval (eval at loadEsmModule (C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:195:12), <anonymous>:3:1)
        at loadEsmModule (C:\Users\xxx\Documents\desktop-server-client-app\desktop\server\client\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:195:68)

Could somebody explain to me what this error means and how I could fix it? It seems to me that this is some kind of compatibility problem I can't do much about. My angular project so far just contains some boilerplate code, so it shouldn't be the problem.

Edit: My versions are the following:

Node: 14.15.0
npm: 6.14.8
Angular: 13.2.4

@angular-devkit/architect: 0.1202.16
@angular-devkit/build-angular: 12.2.16
@angular-devkit/core: 12.2.16
@angular-devkit/schematics: 13.2.5
@angular/cdk: 12.2.13
@angular/cli: 13.2.5
@angular/material: 12.2.13
@schematics/angular: 13.2.5
rxjs: 6.6.7
typescript: 4.5.5

I would recommend you make all of the packages on the same version. — O.MeeKoh
– O.MeeKoh, Commented Feb 25, 2022 at 19:31

Sixteen · Accepted Answer · 2022-03-01 12:15:44Z

19

I faced this problem because I updated my project to Angular 13 using --legacy-peer-deps flag. Because of that, there were old dependencies still present in package.json.

Make sure you have the appropriate package version regarding the thrown error. In your precise case, try to change

"@angular-devkit/build-angular": "~12.2.16" to "@angular-devkit/build-angular": "~13.2.5"

then run npm install.

edited Mar 1, 2022 at 12:15

answered Feb 28, 2022 at 6:23

Sixteen

5531 gold badge6 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niklas Over a year ago

I upgraded from Angular 12 but your solution solved my problem, thanks a lot!

Pratik Agarwal Over a year ago

to add more to this, I was able to bypass the error by manually updating the "@angular-devkit/build-angular" to 16.2.8 for Angular 16

Collectives™ on Stack Overflow

How to fix Directory import '@angular-devkit\build-angular\src\dev-server' is not supported resolving ES modules after updating Angular to version 13

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related