search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.63k stars 2.36k forks source link

nx cli + workspace.json fails some schematics #2861

Closed troywweber7 closed 3 years ago

troywweber7 commented 4 years ago

Prerequisites

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

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.

github-actions[bot] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

"NX ADD"

@angular/material @angular/fire

please

the-ult commented 4 years ago

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 commented 4 years ago

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

brandonroberts commented 3 years ago

This issue has been resolved in Nx 11. I went through the repro steps with only the workspace.json and no failures were reported

achampong commented 3 years ago

@brandonroberts Is this functionality supposed to work with libraries as well? Looks like it only works for apps folder at the moment.

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.