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
CodePudding user response:
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
.