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

Rick

Which node version do you have? – Hellgrammite

Node: v14.15.0 npm: v6.14.8 – Rick

I would recommend you make all of the packages on the same version. – Interlock

Answer 1

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.

Brassbound

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

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 – Intercalation