Home:ALL Converter>Cannot serve angular application in newly generated nx workspace

Cannot serve angular application in newly generated nx workspace

Ask Time:2022-05-03T10:32:48         Author:Henrik Bøgelund Lavstsen

Json Formatter

I wanted to try out NX but i cannot build-run the angular app. Commands i used:

npx create-nx-workspace --preset=angular-nest

after it was done I ran: nx serve

Following error output

> nx run angular-nest:serve:development

(node:16556) ExperimentalWarning: The ESM module loader is experimental.
✔ Browser application bundle generation complete.
<e> [webpack-dev-middleware] file:///D:/Source/bamma/node_modules/@angular/compiler-cli/bundles/chunk-EIFOOEXQ.js:12
<e> import { decode, encode } from "sourcemap-codec";
<e>          ^^^^^^
<e> SyntaxError: The requested module 'sourcemap-codec' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
<e> For example:
<e> import pkg from 'sourcemap-codec';
<e> const { decode, encode } = pkg;
<e>     at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
<e>     at async ModuleJob.run (internal/modules/esm/module_job.js:136:20)
<e>     at async Loader.import (internal/modules/esm/loader.js:179:24)
<e>     at async AngularWebpackPlugin.initializeCompilerCli (D:\Source\bamma\node_modules\@ngtools\webpack\src\ivy\plugin.js:533:35)

I am wondering if it has something to do with some bad version matching between nx and angular, but since i have never used NX before i am not sure what to look for.

package.json

"dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@nestjs/common": "^8.0.0",
    "@nestjs/core": "^8.0.0",
    "@nestjs/platform-express": "^8.0.0",
    "@nrwl/angular": "14.0.5",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.0",
    "@angular-eslint/eslint-plugin": "~13.1.0",
    "@angular-eslint/eslint-plugin-template": "~13.1.0",
    "@angular-eslint/template-parser": "~13.1.0",
    "@angular/cli": "~13.3.0",
    "@angular/compiler-cli": "~13.3.0",
    "@angular/language-service": "~13.3.0",
    "@nestjs/schematics": "^8.0.0",
    "@nestjs/testing": "^8.0.0",
    "@nrwl/cli": "14.0.5",
    "@nrwl/cypress": "14.0.5",
    "@nrwl/eslint-plugin-nx": "14.0.5",
    "@nrwl/jest": "14.0.5",
    "@nrwl/linter": "14.0.5",
    "@nrwl/nest": "14.0.5",
    "@nrwl/node": "14.0.5",
    "@nrwl/workspace": "14.0.5",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "~5.18.0",
    "@typescript-eslint/parser": "~5.18.0",
    "cypress": "^9.1.0",
    "eslint": "~8.12.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.5.1",
    "jest-preset-angular": "11.1.1",
    "nx": "14.0.5",
    "prettier": "^2.5.1",
    "ts-jest": "27.1.4",
    "ts-node": "9.1.1",
    "typescript": "~4.6.2"
  }

I can run the Nest project just fine. Its only the angular app that seems to fail.

Edit:

I realized i have not updated my Node.JS in ages was running version 12.x.x

So i installed version 16.x.x and it works fine.

Author:Henrik Bøgelund Lavstsen,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/72094275/cannot-serve-angular-application-in-newly-generated-nx-workspace
yy