0

I recently migrated a usual Angular Application into an Nx Workspace. Badly, I always get an error when trying to run any command with ng. Running it with nx instead does not work either.

ng g c

Workspace config file cannot be loaded: C:\Users\stefan.haas\Lokal\workspaces\LUIS\angular.json
Invalid format version detected - Expected:[ 1 ] Found: [ 2 ]

nx g c enter image description here

angular.json:

 {
  "$schema": "./node_modules/nx/schemas/workspace-schema.json",
  "version": 2,
  "projects": {
    "assisteur-portal": "apps/assisteur-portal",
    "core-claim": "libs/core/claim",
    "core-claim-creation": "libs/core/claim-creation",
    "core-contract": "libs/core/contract",
    "core-contract-details": "libs/core/contract-details",
    "core-document-management": "libs/core/document-management",
    "core-navigation": "libs/core/navigation",
    "core-primeng": "libs/core/primeng",
    "core-shared": "libs/core/shared",
    "core-table": "libs/core/table",
    "luis": "apps/luis",
    "travel-claim": "libs/travel/claim",
    "travel-contract": "libs/travel/contract",
    "travel-shared": "libs/travel/shared",
    "travel-travel-details": "libs/travel/travel-details"
  }
}

nx.json:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "luis",
  "affected": {
    "defaultBase": "master"
  },
  "cli": {
    "defaultCollection": "@nrwl/angular",
    "packageManager": "npm"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDependencies": {
    "build": [
      {
        "target": "build",
        "projects": "dependencies"
      }
    ]
  },
  "generators": {
    "@nrwl/angular:application": {
      "style": "scss",
      "linter": "eslint",
      "unitTestRunner": "jest",
      "e2eTestRunner": "cypress"
    },
    "@nrwl/angular:library": {
      "linter": "eslint",
      "unitTestRunner": "jest"
    },
    "@nrwl/angular:component": {
      "style": "scss"
    }
  },
  "defaultProject": "luis"
}

package.json:

{
  "name": "luis",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
    "start": "nx serve",
    "start:assisteur-portal": "nx serve assisteur-portal",
    "start:all": "nx run-many --target=serve --all",
    "analyze": "webpack-bundle-analyzer dist/apps/luis/stats.json",
    "build:stats": "ng build --stats-json",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@angular-architects/module-federation": "^14.2.3",
    "@angular/animations": "~13.3.0",
    "@angular/cdk": "^13.3.7",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/material": "^13.3.7",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@nrwl/angular": "^14.1.5",
    "flag-icon-css": "^4.1.7",
    "guid-typescript": "^1.0.9",
    "keycloak-angular": "^10.0.1",
    "keycloak-js": "^18.0.1",
    "ngx-filesize": "^2.0.16",
    "primeflex": "^3.2.0",
    "primeicons": "^5.0.0",
    "primeng": "^13.4.0",
    "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",
    "@nrwl/cli": "14.1.5",
    "@nrwl/cypress": "14.1.5",
    "@nrwl/eslint-plugin-nx": "14.1.5",
    "@nrwl/jest": "14.1.5",
    "@nrwl/linter": "14.1.5",
    "@nrwl/workspace": "14.1.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",
    "ngx-build-plus": "^13.0.1",
    "nx": "^14.1.5",
    "prettier": "^2.5.1",
    "ts-jest": "27.1.4",
    "ts-node": "9.1.1",
    "typescript": "~4.6.2",
    "webpack-bundle-analyzer": "^4.5.0"
  }
}

nx report:

   Node : 16.13.2
   OS   : win32 x64
   npm  : 8.4.1

   nx : 14.4.2
   @nrwl/angular : 14.4.2
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : 14.4.2
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : 14.4.2
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
Stefan
  • 1,122
  • 3
  • 14
  • 38
  • Is `nx serve` working ? Have you checked effective version installed (nx, @nrwl/...), tried a new clean yarn install? Please add your `nx report` output. – Thierry Falvo Jul 07 '22 at 12:23
  • @ThierryFalvo, nx serve is working weirdly. I already ran nx migrate latest and added the nx report to the original post – Stefan Jul 07 '22 at 12:34
  • Weirdly? Strange. Versions seems ok. Maybe try to remove (or archive bak) `node_modules` folder and restart a full `yarn install`. – Thierry Falvo Jul 07 '22 at 12:39
  • I figured out that the global Angular CLI version was ahead of the local one and that caused the issue. Now I get a different error when trying to generate a component: Specify the generator name (e.g., nx generate @nrwl/workspace:library) – Stefan Jul 07 '22 at 13:16
  • in order to create an angular component, use `nx g @nrwl/angular:component ...` – Thierry Falvo Jul 07 '22 at 13:21
  • Thats the same thing. nx g c is just a short form – Stefan Jul 07 '22 at 14:21

0 Answers0