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

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.