nx cli + workspace.json fails some schematics

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version nx --version => 9.2.2
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to React, Angular or any dependency) Seems like Nx could easily say “well, that is actually an Angular Material problem” but I’m not certain, so please see below

Expected Behavior

When using workspace.json (after creating a blank mono-repo), the following commands should all work:

1. nx g @nrwl/angular:lib
2. nx g @angular/material:navigation

Current Behavior

(1) succeeds, but (2) fails. The only way to be able to run all successfully seems to be to move workspace.json to angular.json (and make sure @angular/cli is installed as well, at that point).

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create blank mono-repo

$ npx create-nx-workspace@latest repro-workspace --preset empty --cli nx
npx: installed 199 in 8.366s
Creating a sandbox with Nx...
warning " > @nrwl/workspace@9.2.2" has incorrect peer dependency "prettier@^1.19.1".
new repro-workspace "empty" "nx" --preset="empty" --interactive=false --collection=@nrwl/workspace
✔ Packages installed successfully.
    Successfully initialized git.
CREATE repro-workspace/nx.json (470 bytes)
CREATE repro-workspace/tsconfig.json (509 bytes)
CREATE repro-workspace/README.md (2552 bytes)
CREATE repro-workspace/.editorconfig (245 bytes)
CREATE repro-workspace/.gitignore (503 bytes)
CREATE repro-workspace/.prettierignore (74 bytes)
CREATE repro-workspace/.prettierrc (26 bytes)
CREATE repro-workspace/workspace.json (1059 bytes)
CREATE repro-workspace/package.json (1108 bytes)
CREATE repro-workspace/apps/.gitkeep (1 bytes)
CREATE repro-workspace/libs/.gitkeep (0 bytes)
CREATE repro-workspace/tools/tsconfig.tools.json (218 bytes)
CREATE repro-workspace/tools/schematics/.gitkeep (0 bytes)
CREATE repro-workspace/.vscode/extensions.json (109 bytes)

———————————————————————————————————————————————


>  NX   NOTE  Nx CLI is not installed globally.

  This means that you might have to use "yarn nx" or "npm nx" to execute commands in the workspace.
  Run "yarn global add @nrwl/cli" or "npm install -g @nrwl/cli" to be able to execute command directly.

1. Install necessary dependencies

$ npm i -D @nrwl/angular @angular/cli @angular/material @angular/cdk

> @nrwl/angular@9.2.2 postinstall /home/troyw/repro-workspace/node_modules/@nrwl/angular
> node ./scripts/nx-cli-warning.js


> @angular/cli@9.1.1 postinstall /home/troyw/repro-workspace/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN jest-preset-angular@8.1.2 requires a peer of @angular/core@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN jest-preset-angular@8.1.2 requires a peer of @angular/platform-browser-dynamic@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@9.2.1 requires a peer of @angular/core@^9.0.0 || ^10.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@9.2.1 requires a peer of @angular/common@^9.0.0 || ^10.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@9.2.1 requires a peer of @angular/animations@^9.0.0 || ^10.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@9.2.1 requires a peer of @angular/core@^9.0.0 || ^10.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@9.2.1 requires a peer of @angular/common@^9.0.0 || ^10.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@9.2.1 requires a peer of @angular/forms@^9.0.0 || ^10.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @nrwl/cypress@9.2.2 requires a peer of cypress@>= 3 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN @cypress/webpack-preprocessor@4.1.5 requires a peer of webpack@^4.18.1 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.1.0 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/cdk@9.2.1
+ @angular/material@9.2.1
+ @nrwl/angular@9.2.2
+ @angular/cli@9.1.1
added 234 packages from 89 contributors, removed 3 packages, updated 12 packages and audited 257228 packages in 13.249s

32 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

1. Try running these two commands:
   • nx g @nrwl/angular:lib
   • nx g @angular/material:navigation
   • then mv workspace.json to angular.json and try again

$ npx nx g @nrwl/angular:lib --style=scss test
✔ Packages installed successfully.
CREATE tslint.json (1671 bytes)
CREATE jest.config.js (250 bytes)
CREATE libs/test/README.md (132 bytes)
CREATE libs/test/tsconfig.lib.json (408 bytes)
CREATE libs/test/tsconfig.lib.prod.json (97 bytes)
CREATE libs/test/tslint.json (261 bytes)
CREATE libs/test/src/index.ts (35 bytes)
CREATE libs/test/src/lib/test.module.ts (159 bytes)
CREATE libs/test/src/lib/test.module.spec.ts (338 bytes)
CREATE libs/test/tsconfig.json (123 bytes)
CREATE libs/test/jest.config.js (345 bytes)
CREATE libs/test/tsconfig.spec.json (233 bytes)
CREATE libs/test/src/test-setup.ts (30 bytes)
UPDATE package.json (1313 bytes)
UPDATE workspace.json (1998 bytes)
UPDATE nx.json (510 bytes)
UPDATE tsconfig.json (572 bytes)

$ pushd libs/test/src/lib/
~/repro-workspace/libs/test/src/lib ~/repro-workspace

# fails
$ npx nx g @angular/material:navigation --name=test
Cannot read property 'toString' of null

# move workspace.json to angular.json, even though nx created workspace.json
$ pushd +1 && mv workspace.json angular.json && pushd +1
~/repro-workspace ~/repro-workspace/libs/test/src/lib
~/repro-workspace/libs/test/src/lib ~/repro-workspace

# works now
$ npx nx g @angular/material:navigation --name=test
CREATE libs/test/src/lib/test/test.component.css (193 bytes)
CREATE libs/test/src/lib/test/test.component.html (927 bytes)
CREATE libs/test/src/lib/test/test.component.spec.ts (1234 bytes)
CREATE libs/test/src/lib/test/test.component.ts (594 bytes)

Context

$ npx nx report

>  NX  Report complete - copy this into the issue template

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

package.json listed below

$ cat package.json 
{
  "name": "repro-workspace",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "nx": "nx",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@angular/cdk": "^9.2.1",
    "@angular/cli": "^9.1.1",
    "@angular/material": "^9.2.1",
    "@nrwl/angular": "^9.2.2",
    "@nrwl/jest": "9.2.2",
    "@nrwl/workspace": "9.2.2",
    "@types/jest": "25.1.4",
    "@types/node": "~8.9.4",
    "dotenv": "6.2.0",
    "eslint": "6.8.0",
    "jest": "25.2.3",
    "jest-preset-angular": "8.1.2",
    "prettier": "1.19.1",
    "ts-jest": "25.2.1",
    "ts-node": "~7.0.0",
    "tslint": "~6.0.0",
    "typescript": "~3.8.3"
  }
}

Other

I love Nx so far. I’m just looking for the quickest way to get up and running with the most usability and least pitfalls and I use this information to advise my coworkers on how and when to use Nx. It’s that it would be preferable to use the Nx CLI over the Angular CLI, but Nx CLI does not appear to be able to run some schematics (i.e. @angular/material:navigation) without the presence of the angular.json and therefore the Angular CLI. So feedback on this front is also welcome.

Also, please note that normally, some of the deps I installed would normally be installed by a ng add @angular/material but there doesn’t seem to be an Nx equivalent to ng add so I just installed only the necessary libraries and was still able to reproduce minimally.

Thanks in advance for your help.

[the-ult]

@brandonroberts is there a way to let the NX cli check/override/mock the behavior, so you can still use ng add @angular/material etc? Or in this case: nx add @angular/material, nx add @datorama/akita, etc

Currently working on a new projects which uses both Angular and React. Started with an Empty workspace (with the default Nx cli) and added @nrwl/angular and nrwl/react

It’s a shame we can’t use the beautiful Angular schematics anymore.

[curiouscod3]

NX CLI Has no ability “ADD” yet! Sorry…I mentioned to ask the core team adding the feature. is it possible? for me, no