nx cli + workspace.json fails some schematics

[troywweber7]

Prerequisites

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

• [X] I am running the latest version nx --version => 9.2.2
• [X] I checked the documentation (nx.dev) and found no answer
• [X] 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/[email protected]" 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/[email protected] postinstall /home/troyw/repro-workspace/node_modules/@nrwl/angular
> node ./scripts/nx-cli-warning.js


> @angular/[email protected] postinstall /home/troyw/repro-workspace/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN [email protected] requires a peer of @angular/core@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser-dynamic@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] 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/[email protected] requires a peer of cypress@>= 3 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN @cypress/[email protected] requires a peer of webpack@^4.18.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/[email protected]
+ @angular/[email protected]
+ @nrwl/[email protected]
+ @angular/[email protected]
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.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nrwl community! 🙏

[troywweber7]

This has been tagged twice, but now was marked stale and will be automatically closed. Is it being worked on or is it really stale? I understand it is a lower priority, hit below it gets closed, does anyone have some solid advice?

I can get it to work by using angular cli + angular.json, but it seems like a workaround and like workspace.json is the way to go in the future.

Any input/confirmation is appreciated.

[rraziel]

I have the same issue with nx generate @nrwl/nest:application (@nrwl/node:lib works).
Is it a global problem or does it only happen on some configurations/setups?
Is there anything I can do to help debug it?

[brandonroberts]

This issue occurs for schematics that are specifically looking for an angular.json file within the workspace. This file doesn't exist for workspaces that don't use the Angular CLI.

[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 ADD"

@angular/material
@angular/fire

please

[the-ult]

Hi @curiouscod3

Thanks, for trying to help.

How does adding @angualr/material and @angular/fire help with this particular problem?

We're already using @angular/material

[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