search

nstudio / xplat

Cross-platform (xplat) tools for Nx workspaces.
MIT License
365 stars 52 forks source link

Nx 13.3.x NOTE: [NX] An Angular builder called writeWorkspace, this may have had unintended consequences in workspace.json #286

Closed blin4444 closed 2 years ago

blin4444 commented 2 years ago

When trying to generate an Ionic app in an empty Nx workspace using xplat 13, the following occurs.

> Executing task: npx ng generate @nstudio/ionic-angular:application --name=sample --directory=sample --no-useXplat --no-interactive --dry-run <

[NX] An Angular builder called `writeWorkspace`, this may have had unintended consequences in angular.json
[NX] Double check angular.json before proceeding
...
Error: Cannot find configuration for 'ionic-sample' in /angular.json.
    at readProjectConfiguration (/Users/blin4444/.../xplat/myworkspace/node_modules/@nrwl/devkit/src/generators/project-configuration.js:156:15)
    at /Users/blin4444/.../xplat/myworkspace/node_modules/@nrwl/workspace/src/generators/convert-to-nx-project/convert-to-nx-project.js:40:71
    at Generator.next (<anonymous>)
    at fulfilled (/Users/blin4444/.../xplat/myworkspace/node_modules/tslib/tslib.js:114:62)
Cannot find configuration for 'ionic-sample' in /angular.json.

I was able to generate an Ionic app successfully using xplat 12.7.0.

jmarlow4 commented 2 years ago

I'm getting the same thing when trying to generate a NativeScript Angular app inside an XPlat project with an angular web app that aready exists in it

[NX] An Angular builder called writeWorkspace, this may have had unintended consequences in angular.json [NX] Double check angular.json before proceeding Error: Cannot find configuration for 'nativescript-ns' in /angular.json. at readProjectConfiguration (/Users/jason/dev/xplat-ng-univ/node_modules/@nrwl/devkit/src/generators/project-configuration.js:156:15) at /Users/jason/dev/xplat-ng-univ/node_modules/@nrwl/workspace/src/generators/convert-to-nx-project/convert-to-nx-project.js:40:71 at Generator.next () at fulfilled (/Users/jason/dev/xplat-ng-univ/node_modules/tslib/tslib.js:114:62) Cannot find configuration for 'nativescript-ns' in /angular.json.

NathanWalker commented 2 years ago

Thank you for the reports here, I'll take a look. Given both stacktraces mention angular.json I wonder if it's related to angular preset. We usually setup Nx with empty preset so it would use workspace.json. You could try renaming angular.json to workspace.json and see if different result. Those files are interchangable.

jmarlow4 commented 2 years ago

just changing the angular.json filename to workspace.json by itself didn't work. I'll keep experimenting and report back.

jmarlow4 commented 2 years ago

When starting from a fresh and empty NX workspace (on latest) and installing @nstudio/xplat to dev deps, then I get this error when trying to generate an app (called ng) using xplat schamtics:

[NX] An Angular builder called writeWorkspace, this may have had unintended consequences in workspace.json [NX] Double check workspace.json before proceeding SchematicsException [Error]: Project "web-ng" does not exist. at /Users/jason/dev/xplat-ng-2/node_modules/@schematics/angular/component/index.js:100:19 SchematicsException [Error]: Project "web-ng" does not exist. at /Users/jason/dev/xplat-ng-2/node_modules/@schematics/angular/component/index.js:100:19 Project "web-ng" does not exist.

NathanWalker commented 2 years ago

Indeed, I can confirm this exact error - investigating...

NathanWalker commented 2 years ago

This is where that error is coming from within Nx: https://github.com/nrwl/nx/blob/c04686ab10d4d9160ccb15320457c42af4124237/packages/tao/src/compat/compat.ts#L28

Looks like a breaking change in Nx 13.3.x which came out just 2 days ago.

In meantime for anyone that encounters this, you can use the following:

nstudio@MacProMax tmp % npx create-nx-workspace@13.2.4

Need to install the following packages:
  create-nx-workspace@13.2.4
Ok to proceed? (y) y
✔ Workspace name (e.g., org name)     · myworkspace
✔ What to create in the new workspace · empty
✔ Use Nx Cloud? (It's free and doesn't require registration.) · No

>  NX  Nx is creating your workspace.

  To make sure the command works reliably in all environments, and that the preset is applied correctly,
  Nx will run "npm install" several times. Please wait.

✔ Installing dependencies with npm
✔ Nx has successfully created the workspace.
nstudio@MacProMax tmp % cd myworkspace 
nstudio@MacProMax myworkspace % npm i @nstudio/xplat --save-dev

added 34 packages, removed 1 package, and audited 558 packages in 3s

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

found 0 vulnerabilities
nstudio@MacProMax myworkspace % nx g app
✔ What name would you like for this app? · myapp
✔ What type of app would like to create? · web
✔ In which directory should the app be generated? (Just press Enter for the default: directly in 'apps') · 
✔ Would you like to configure routing for this app? (Y/n) · true
✔ Which frontend framework should it use? · angular
✔ Use xplat supporting architecture? (Y/n) · true
✔ Packages installed successfully.

...
UPDATE package.json
CREATE libs/xplat/core/README.md
CREATE libs/xplat/core/.babelrc
CREATE libs/xplat/core/src/index.ts
CREATE libs/xplat/core/tsconfig.json
CREATE libs/xplat/core/tsconfig.lib.json
CREATE libs/xplat/core/project.json
CREATE .eslintrc.json
CREATE libs/xplat/core/.eslintrc.json
CREATE jest.config.js
CREATE jest.preset.js
CREATE libs/xplat/core/jest.config.js
CREATE libs/xplat/core/tsconfig.spec.json
CREATE libs/xplat/core/src/lib/core.module.ts
CREATE libs/xplat/core/src/lib/index.ts
CREATE libs/xplat/core/src/lib/base/base-component.ts
CREATE libs/xplat/core/src/lib/base/index.ts
CREATE libs/xplat/core/src/lib/environments/environment.interface.ts
CREATE libs/xplat/core/src/lib/environments/environment.ts
CREATE libs/xplat/core/src/lib/environments/index.ts
CREATE libs/xplat/core/src/lib/environments/base/environment.base.ts
CREATE libs/xplat/core/src/lib/environments/base/environment.prod.ts
CREATE libs/xplat/core/src/lib/environments/base/index.ts
CREATE libs/xplat/core/src/lib/models/index.ts
CREATE libs/xplat/core/src/lib/models/xplat-window.interface.ts
CREATE libs/xplat/core/src/lib/services/index.ts
CREATE libs/xplat/core/src/lib/services/log.service.spec.ts
CREATE libs/xplat/core/src/lib/services/log.service.ts
CREATE libs/xplat/core/src/lib/services/tokens.ts
CREATE libs/xplat/core/src/lib/services/window.service.ts
CREATE libs/xplat/features/README.md
CREATE libs/xplat/features/.babelrc
CREATE libs/xplat/features/src/index.ts
CREATE libs/xplat/features/tsconfig.json
CREATE libs/xplat/features/tsconfig.lib.json
CREATE libs/xplat/features/project.json
CREATE libs/xplat/features/.eslintrc.json
CREATE libs/xplat/features/jest.config.js
CREATE libs/xplat/features/tsconfig.spec.json
CREATE libs/xplat/features/src/lib/index.ts
CREATE libs/xplat/features/src/lib/ui/index.ts
CREATE libs/xplat/features/src/lib/ui/ui.module.ts
CREATE libs/xplat/features/src/lib/ui/base/header.base-component.ts
CREATE libs/xplat/features/src/lib/ui/base/index.ts
CREATE libs/xplat/features/src/lib/ui/pipes/date-order.pipe.ts
CREATE libs/xplat/features/src/lib/ui/pipes/index.ts
CREATE libs/xplat/scss/README.md
CREATE libs/xplat/scss/.babelrc
CREATE libs/xplat/scss/tsconfig.json
CREATE libs/xplat/scss/tsconfig.lib.json
CREATE libs/xplat/scss/project.json
CREATE libs/xplat/scss/.eslintrc.json
CREATE libs/xplat/scss/jest.config.js
CREATE libs/xplat/scss/tsconfig.spec.json
CREATE libs/xplat/scss/src/_index.scss
CREATE libs/xplat/scss/src/_variables.scss
CREATE libs/xplat/scss/src/package.json
CREATE libs/xplat/utils/README.md
CREATE libs/xplat/utils/.babelrc
CREATE libs/xplat/utils/src/index.ts
CREATE libs/xplat/utils/tsconfig.json
CREATE libs/xplat/utils/tsconfig.lib.json
CREATE libs/xplat/utils/project.json
CREATE libs/xplat/utils/.eslintrc.json
CREATE libs/xplat/utils/jest.config.js
CREATE libs/xplat/utils/tsconfig.spec.json
CREATE libs/xplat/utils/src/lib/angular.ts
CREATE libs/xplat/utils/src/lib/index.ts
CREATE libs/xplat/utils/src/lib/objects.ts
CREATE libs/xplat/utils/src/lib/platform.ts
CREATE libs/xplat/web/core/README.md
CREATE libs/xplat/web/core/.babelrc
CREATE libs/xplat/web/core/src/index.ts
CREATE libs/xplat/web/core/tsconfig.json
CREATE libs/xplat/web/core/tsconfig.lib.json
CREATE libs/xplat/web/core/project.json
CREATE libs/xplat/web/core/.eslintrc.json
CREATE libs/xplat/web/core/jest.config.js
CREATE libs/xplat/web/core/tsconfig.spec.json
CREATE libs/xplat/web/features/README.md
CREATE libs/xplat/web/features/.babelrc
CREATE libs/xplat/web/features/src/index.ts
CREATE libs/xplat/web/features/tsconfig.json
CREATE libs/xplat/web/features/tsconfig.lib.json
CREATE libs/xplat/web/features/project.json
CREATE libs/xplat/web/features/.eslintrc.json
CREATE libs/xplat/web/features/jest.config.js
CREATE libs/xplat/web/features/tsconfig.spec.json
CREATE libs/xplat/web/scss/README.md
CREATE libs/xplat/web/scss/.babelrc
CREATE libs/xplat/web/scss/tsconfig.json
CREATE libs/xplat/web/scss/tsconfig.lib.json
CREATE libs/xplat/web/scss/project.json
CREATE libs/xplat/web/scss/.eslintrc.json
CREATE libs/xplat/web/scss/jest.config.js
CREATE libs/xplat/web/scss/tsconfig.spec.json
CREATE libs/xplat/web/core/src/lib/core.module.spec.ts
CREATE libs/xplat/web/core/src/lib/core.module.ts
CREATE libs/xplat/web/core/src/lib/index.ts
CREATE libs/xplat/web/features/src/lib/index.ts
CREATE libs/xplat/web/features/src/lib/ui/index.ts
CREATE libs/xplat/web/features/src/lib/ui/ui.module.spec.ts
CREATE libs/xplat/web/features/src/lib/ui/ui.module.ts
CREATE libs/xplat/web/features/src/lib/ui/base/app.base-component.ts
CREATE libs/xplat/web/features/src/lib/ui/base/index.ts
CREATE libs/xplat/web/features/src/lib/ui/components/index.ts
CREATE libs/xplat/web/features/src/lib/ui/components/header/header.component.html
CREATE libs/xplat/web/features/src/lib/ui/components/header/header.component.ts
CREATE libs/xplat/web/scss/src/_index.scss
CREATE libs/xplat/web/scss/src/_spacing.scss
CREATE libs/xplat/web/scss/src/_tags.scss
CREATE libs/xplat/web/scss/src/_variables.scss
CREATE libs/xplat/web/scss/src/package.json
CREATE apps/web-myapp/src/favicon.ico
CREATE apps/web-myapp/tsconfig.editor.json
CREATE apps/web-myapp/tsconfig.json
CREATE apps/web-myapp/src/assets/.gitkeep
CREATE apps/web-myapp/src/environments/environment.prod.ts
CREATE apps/web-myapp/src/environments/environment.ts
CREATE apps/web-myapp/src/app/app.module.ts
CREATE apps/web-myapp/src/app/app.component.scss
CREATE apps/web-myapp/src/app/app.component.html
CREATE apps/web-myapp/src/app/app.component.spec.ts
CREATE apps/web-myapp/src/app/app.component.ts
CREATE apps/web-myapp/src/index.html
CREATE apps/web-myapp/src/main.ts
CREATE apps/web-myapp/src/polyfills.ts
CREATE apps/web-myapp/src/styles.scss
CREATE apps/web-myapp/.browserslistrc
CREATE apps/web-myapp/tsconfig.app.json
CREATE apps/web-myapp/tsconfig.spec.json
CREATE apps/web-myapp/src/app/nx-welcome.component.ts
CREATE apps/web-myapp/.eslintrc.json
CREATE apps/web-myapp/jest.config.js
CREATE apps/web-myapp/src/test-setup.ts
CREATE apps/web-myapp-e2e/cypress.json
CREATE apps/web-myapp-e2e/src/fixtures/example.json
CREATE apps/web-myapp-e2e/src/integration/app.spec.ts
CREATE apps/web-myapp-e2e/src/support/app.po.ts
CREATE apps/web-myapp-e2e/src/support/commands.ts
CREATE apps/web-myapp-e2e/src/support/index.ts
CREATE apps/web-myapp-e2e/tsconfig.json
CREATE apps/web-myapp-e2e/project.json
CREATE apps/web-myapp-e2e/.eslintrc.json
CREATE apps/web-myapp/project.json
CREATE apps/web-myapp/src/app/core/core.module.ts
CREATE apps/web-myapp/src/app/features/shared/shared.module.ts
CREATE apps/web-myapp/src/assets/nx-logo.png
CREATE apps/web-myapp/src/assets/xplat.png
CREATE apps/web-myapp/src/assets/i18n/en.json
CREATE apps/web-myapp/src/scss/_index.scss
CREATE apps/web-myapp/src/scss/_variables.scss
CREATE apps/web-myapp/src/app/app.routing.ts
CREATE apps/web-myapp/src/app/features/home/home.module.ts
CREATE apps/web-myapp/src/app/features/home/components/home.component.html
CREATE apps/web-myapp/src/app/features/home/components/home.component.ts
CREATE apps/web-myapp/src/app/features/home/components/index.ts
UPDATE tsconfig.base.json
UPDATE workspace.json
UPDATE package.json
UPDATE .vscode/extensions.json
UPDATE nx.json
UPDATE .gitignore
nstudio@MacProMax myworkspace %
jmarlow4 commented 2 years ago

The workaround works

NathanWalker commented 2 years ago

Fix has been identified and PR posted here: https://github.com/nrwl/nx/pull/8141 once that merges and a Nx patch published should work fine again with 13.3.x

NathanWalker commented 2 years ago

@jmarlow4 @blin4444 Nx released a fix with 13.3.2 which latest is now 13.3.4 so latest should be resolved now. Using npx create-nx-workspace@latest should be fine now if either of you have chance to confirm as well.

blin4444 commented 2 years ago

I've just tried to generate an Ionic app in an empty Nx 13.3.4 workspace, and I no longer get the Cannot find configuration for '[app]' in /angular.json error. But I get the following after trying to sync.

✔ What name would you like for this app? · myapp
✔ What type of app would like to create? · ionic
✔ In which directory should the app be generated? (Just press Enter for the default: directly in 'apps') · 
✔ Would you like to configure routing for this app? (Y/n) · true
✔ Which frontend framework should it use? · angular
✔ Use xplat supporting architecture? (Y/n) · true
✔ Packages installed successfully.
[NX] Angular devkit called `writeWorkspace`, this may have had unintended consequences in workspace.json
[NX] Double check workspace.json before proceeding
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.

> fsevents@1.2.13 install /Users/blin4444/.../xplat/myworkspace/node_modules/@angular-devkit/build-angular/node_modules/fsevents
...
CREATE apps/ionic-myapp/project.json
UPDATE tsconfig.base.json
UPDATE workspace.json
UPDATE package.json
UPDATE .vscode/extensions.json
UPDATE nx.json
> myapp@0.0.0 cap.sync /Users/blin4444/.../xplat/myworkspace/apps/ionic-myapp
> npx ionic cap sync

> ng run app:build
The run command requires to be run in an Angular project, but a project definition could not be found.
[ERROR] An error occurred while running subprocess ng.
NathanWalker commented 2 years ago

Great news @blin4444 thanks for confirming this. The ng issue is likely due to preference on using nx cli which all the latest does. We're in process of integrating directly with @nrwl/devkit which will help streamline things further and while at it we are likely to switch to using https://github.com/nxtend-team/nxtend under hood for the Ionic integration. Feel free to try those with Nx if needing to continue and can always add Ionic platform slice to Nx architecture down road with xplat when wanting to organize things further. The @nrwl/devkit sweeping is occuring now and targeting to have it complete by end of january 2022.

jmarlow4 commented 2 years ago

can confirm that this works when generating both angular web and angular nativescript apps (using latest: 13.3.6)

NathanWalker commented 2 years ago

Fixed with latest Nx.