Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

angular: unable to use ng2-charts-schematics and @ngrx/* schematics with workspace.json v2

See original GitHub issue

I wasn’t sure whether to file an issue with ng2-charts or Nx, but Zack De Rose and Victor Savkin asked me to file an issue with reproduction steps to look into the matter, so here we go.

Current Behavior

When using workspace.json version 2, I’m unable to use ng2-charts-schematics to generate chart components.

If I switch to angular.json version 1, I’m able to use ng2-charts-schematics to generate chart components.

Expected Behavior

When using workspace.json version 2, I should be able to use ng2-charts-schematics to generate chart components.

Steps to Reproduce

Create and configure empty workspace

  1. Run yarn global add @nrwl/cli@11.0.15
  2. Run yarn global add create-nx-workspace@11.0.15
  3. Run yarn create nx-workspace nrwl-airlines --npm-scope=nrwl-airlines --preset=empty --linter=eslint --no-nx-cloud --style=css --package-manager=yarn
  4. Run npx json -I -f workspace.json -e "this.cli.packageManager = 'yarn';"
  5. Run yarn remove tslint

Add Angular capabilities

  1. Run yarn add --dev @nrwl/angular
  2. Run nx generate @nrwl/angular:init
  3. Run npx json -I -f workspace.json -e "this.generators['@nrwl/angular:application'].linter = 'eslint';"
  4. Run npx json -I -f workspace.json -e "this.generators['@nrwl/angular:library'].linter = 'eslint';"

Generate Angular projects

  1. Run nx generate @nrwl/angular:application --name=booking-app --prefix=booking --tags="project:booking-app,scope:booking,type:app" --no-interactive
  2. Run nx generate @nrwl/angular:library --name=feature-flight-search --directory=booking --prefix=booking --tags="project:booking-app,scope:booking,type:feature" --buildable --no-interactive
  3. Run yarn remove codelyzer

Generate chart component

  1. Run yarn add ng2-charts ng2-charts-schematics
  2. Run nx generate module my-line-chart --project=booking-feature-flight-search
  3. Run nx generate ng2-charts-schematics:line my-line-chart --project=booking-feature-flight-search --module=my-line-chart
  4. Exception is thrown.

If I change workspace.json version 2 into angular.json version 1, the ng2-charts-schematics:line schematic works.

Failure Logs

When running nx generate ng2-charts-schematics:line my-line-chart, this error is output:

SchematicsException [Error]: Could not find (undefined)
    at Object.getWorkspace (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@schematics\angular\utility\config.js:22:15)
    at Object.getProject (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@schematics\angular\utility\project.js:20:20)
    at C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@schematics\angular\component\index.js:92:35
    at MergeMapSubscriber.project (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\src\rules\call.js:75:24)
    at MergeMapSubscriber._tryNext (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
    at MergeMapSubscriber._next (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\operators\mergeMap.js:57:18)
    at MergeMapSubscriber.Subscriber.next (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\Subscriber.js:66:18)
    at Observable._subscribe (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\util\subscribeToArray.js:5:20)
    at Observable._trySubscribe (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\Observable.js:44:25)
    at Observable.subscribe (C:\Users\larsb\projects\sandbox\nrwl-airlines\node_modules\@angular-devkit\schematics\node_modules\rxjs\internal\Observable.js:30:22)
Could not find (undefined)

Environment

nx report output

  Node : 12.20.0
  OS   : win32 x64
  yarn : 1.22.10

  nx : Not Found
  @nrwl/angular : 11.0.15
  @nrwl/cli : 11.0.15
  @nrwl/cypress : 11.0.15
  @nrwl/devkit : 11.0.15
  @nrwl/eslint-plugin-nx : 11.0.15
  @nrwl/express : Not Found
  @nrwl/jest : 11.0.15
  @nrwl/linter : 11.0.15
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.0.15
  @nrwl/web : Not Found
  @nrwl/workspace : 11.0.15
  typescript : 4.0.5

workspace.json version 2 (doens’t work with this schematic)

{
  "version": 2,
  "projects": {
    "booking-app": {
      "projectType": "application",
      "root": "apps/booking-app",
      "sourceRoot": "apps/booking-app/src",
      "prefix": "booking",
      "targets": {
        "build": {
          "executor": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/apps/booking-app",
            "index": "apps/booking-app/src/index.html",
            "main": "apps/booking-app/src/main.ts",
            "polyfills": "apps/booking-app/src/polyfills.ts",
            "tsConfig": "apps/booking-app/tsconfig.app.json",
            "aot": true,
            "assets": [
              "apps/booking-app/src/favicon.ico",
              "apps/booking-app/src/assets"
            ],
            "styles": [
              "apps/booking-app/src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/booking-app/src/environments/environment.ts",
                  "with": "apps/booking-app/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "executor": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "booking-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "booking-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "executor": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "booking-app:build"
          }
        },
        "lint": {
          "executor": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "apps/booking-app/src/**/*.ts",
              "apps/booking-app/src/**/*.html"
            ]
          }
        },
        "test": {
          "executor": "@nrwl/jest:jest",
          "outputs": [
            "coverage/apps/booking-app"
          ],
          "options": {
            "jestConfig": "apps/booking-app/jest.config.js",
            "passWithNoTests": true
          }
        }
      }
    },
    "booking-app-e2e": {
      "root": "apps/booking-app-e2e",
      "sourceRoot": "apps/booking-app-e2e/src",
      "projectType": "application",
      "targets": {
        "e2e": {
          "executor": "@nrwl/cypress:cypress",
          "options": {
            "cypressConfig": "apps/booking-app-e2e/cypress.json",
            "tsConfig": "apps/booking-app-e2e/tsconfig.e2e.json",
            "devServerTarget": "booking-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "booking-app:serve:production"
            }
          }
        },
        "lint": {
          "executor": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "apps/booking-app-e2e/**/*.{js,ts}"
            ]
          }
        }
      }
    },
    "booking-feature-flight-search": {
      "projectType": "library",
      "root": "libs/booking/feature-flight-search",
      "sourceRoot": "libs/booking/feature-flight-search/src",
      "prefix": "booking",
      "targets": {
        "build": {
          "executor": "@nrwl/angular:ng-packagr-lite",
          "options": {
            "tsConfig": "libs/booking/feature-flight-search/tsconfig.lib.json",
            "project": "libs/booking/feature-flight-search/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "libs/booking/feature-flight-search/tsconfig.lib.prod.json"
            }
          }
        },
        "lint": {
          "executor": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "libs/booking/feature-flight-search/src/**/*.ts",
              "libs/booking/feature-flight-search/src/**/*.html"
            ]
          }
        },
        "test": {
          "executor": "@nrwl/jest:jest",
          "outputs": [
            "coverage/libs/booking/feature-flight-search"
          ],
          "options": {
            "jestConfig": "libs/booking/feature-flight-search/jest.config.js",
            "passWithNoTests": true
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@nrwl/angular",
    "packageManager": "yarn"
  },
  "generators": {
    "@nrwl/angular:application": {
      "unitTestRunner": "jest",
      "e2eTestRunner": "cypress",
      "linter": "eslint"
    },
    "@nrwl/angular:library": {
      "unitTestRunner": "jest",
      "linter": "eslint"
    },
    "@nrwl/angular:component": {}
  },
  "defaultProject": "booking-app"
}

angular.json version 1 (works with this schematic)

{
  "version": 1,
  "projects": {
    "booking-app": {
      "projectType": "application",
      "root": "apps/booking-app",
      "sourceRoot": "apps/booking-app/src",
      "prefix": "booking",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/apps/booking-app",
            "index": "apps/booking-app/src/index.html",
            "main": "apps/booking-app/src/main.ts",
            "polyfills": "apps/booking-app/src/polyfills.ts",
            "tsConfig": "apps/booking-app/tsconfig.app.json",
            "aot": true,
            "assets": [
              "apps/booking-app/src/favicon.ico",
              "apps/booking-app/src/assets"
            ],
            "styles": ["apps/booking-app/src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/booking-app/src/environments/environment.ts",
                  "with": "apps/booking-app/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "booking-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "booking-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "booking-app:build"
          }
        },
        "lint": {
          "builder": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "apps/booking-app/src/**/*.ts",
              "apps/booking-app/src/**/*.html"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "outputs": ["coverage/apps/booking-app"],
          "options": {
            "jestConfig": "apps/booking-app/jest.config.js",
            "passWithNoTests": true
          }
        }
      }
    },
    "booking-app-e2e": {
      "root": "apps/booking-app-e2e",
      "sourceRoot": "apps/booking-app-e2e/src",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@nrwl/cypress:cypress",
          "options": {
            "cypressConfig": "apps/booking-app-e2e/cypress.json",
            "tsConfig": "apps/booking-app-e2e/tsconfig.e2e.json",
            "devServerTarget": "booking-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "booking-app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": ["apps/booking-app-e2e/**/*.{js,ts}"]
          }
        }
      }
    },
    "booking-feature-flight-search": {
      "projectType": "library",
      "root": "libs/booking/feature-flight-search",
      "sourceRoot": "libs/booking/feature-flight-search/src",
      "prefix": "booking",
      "architect": {
        "build": {
          "builder": "@nrwl/angular:ng-packagr-lite",
          "options": {
            "tsConfig": "libs/booking/feature-flight-search/tsconfig.lib.json",
            "project": "libs/booking/feature-flight-search/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "libs/booking/feature-flight-search/tsconfig.lib.prod.json"
            }
          }
        },
        "lint": {
          "builder": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "libs/booking/feature-flight-search/src/**/*.ts",
              "libs/booking/feature-flight-search/src/**/*.html"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "outputs": ["coverage/libs/booking/feature-flight-search"],
          "options": {
            "jestConfig": "libs/booking/feature-flight-search/jest.config.js",
            "passWithNoTests": true
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@nrwl/angular",
    "packageManager": "yarn"
  },
  "schematics": {
    "@nrwl/angular:application": {
      "unitTestRunner": "jest",
      "e2eTestRunner": "cypress",
      "linter": "eslint"
    },
    "@nrwl/angular:library": {
      "unitTestRunner": "jest",
      "linter": "eslint"
    },
    "@nrwl/angular:component": {}
  },
  "defaultProject": "booking-app"
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
vsavkincommented, Dec 21, 2020

@LayZeeDK I think this might fix it: https://github.com/nrwl/nx/pull/4369 but I need to do a lot more testing. The community and the angular team themselves don’t use the config stuff consistently, so I’m always scared to break some edge case where some migration for some weird reason don’t do the right thing etc.

Thanks for reporting the issue!

1reaction
vsavkincommented, Jan 8, 2021

This has been fixed in 11.1.1 (at least in the packages I’ve tried). Thanks again for reporting this!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Schematics not loading when using version 2 of ...
Angular Schematics not loading when using version 2 of angular.json (NX workspace). 2. Using version 2: image.png. Using version 1: image1.png.
Read more >
angular - schematic not found in ngrx - Stack Overflow
It is built using workspace which consists of a library and a application. I have installed following dependencies in the angular application.
Read more >
@ngrx/schematics - npm
NgRx Schematics for Angular. Latest version: 15.1.0, ... Start using @ngrx/schematics in your project by running `npm i @ngrx/schematics`.
Read more >
Using NgRx - Nx
Nx provides a schematic to build out a new NgRx feature area that manages shared state. The @nrwl/angular package has an ngrx schematic...
Read more >
NX - How to Write a Generator - NgServe.io
Angular CLI allows for creating schematics to template code in a command line. nx ... 2. Creating a workspace generator and schema.json.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Building with "nx build --prod" leaves error: "Index html generation failed."

Next page

E2E tests fails when creating a new nx-plugin workspace