Installation Fails

[4r7if3x]

This is my first time trying to work with NX & xplat, but I couldn't have a successful installation, unfortunately. I'm mainly using pnpm as my default package manager, but the result was the same when I tried it with npm and yarn.

Here are the global packages that are currently installed with all the package managers:

@angular/[email protected]
@nestjs/[email protected]
@nrwl/[email protected]
[email protected]
[email protected]

And here is what I've done in order to set my project up:

$ pnpx create-nx-workspace@latest --cli=nx --preset=empty --packageManager=pnpm
$ pnpm add --save-dev @nstudio/xplat
$ nx generate app

 >  NX   Running global Nx CLI with PNPM may have issues.

   Prefer to use "pnpm" (https://pnpm.io/cli/exec) to execute commands in this workspace.
    TIP  create a shortcut such as: alias pnx="pnpm nx --"
   
✔ Which generator would you like to use? · @nstudio/xplat:application

>  NX  Generating @nstudio/xplat:application

✔ What name would you like for this app? · web
✔ 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.

TypeError: Cannot read properties of undefined (reading 'extends')
    at globForProjectFiles (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/nx/src/config/workspaces.js:515:16)
    at readWorkspaceJsonFile (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/nx/src/adapter/ngcli-adapter.js:151:85)
    at SwitchMapSubscriber.project (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/nx/src/adapter/ngcli-adapter.js:179:105)
    at SwitchMapSubscriber._next (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/rxjs/internal/operators/switchMap.js:47:27)
    at Subscriber.next (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/rxjs/internal/Subscriber.js:66:18)
    at MapSubscriber._next (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/rxjs/internal/operators/map.js:55:26)
    at Subscriber.next (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/rxjs/internal/Subscriber.js:66:18)
    at MapSubscriber._next (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/rxjs/internal/operators/map.js:55:26)
    at Subscriber.next (/home/user/test-pnpm/node_modules/.pnpm/[email protected]/node_modules/rxjs/internal/Subscriber.js:66:18)
    at Observable._subscribe (/home/user/test-pnpm/node_modules/.pnpm/@[email protected][email protected]/node_modules/@angular-devkit/core/node/host.js:154:17)

 >  NX   Cannot read properties of undefined (reading 'extends')

   Pass --verbose to see the stacktrace.

I have to add that using pnpm nx doesn't make any difference. It only makes sense if I don't have nx globally and I'd need to run it from the project dependencies, yet even in that case, the installation fails with the same result.

---

Here is the result of nx report for your reference:

 >  NX   Report complete - copy this into the issue template

   Node : 18.12.1
   OS   : linux x64
   pnpm : 7.15.0
   
   nx : 15.0.13
   @nrwl/angular : 15.0.13
   @nrwl/cypress : 15.0.13
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.0.13
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : Not Found
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.13
   @nrwl/js : 15.0.13
   @nrwl/linter : 15.0.13
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.0.13
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.13
   @nrwl/web : 15.0.13
   @nrwl/webpack : 15.0.13
   @nrwl/workspace : 15.0.13
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nstudio/xplat: 15.0.2
         @nstudio/angular: 15.0.2
         @nstudio/web-angular: 15.0.2
         @nstudio/web: 15.0.2

[4r7if3x]

Well, I figured out another way that worked for me... I ran the first command without any options and initiated the workspace with an angular app. Only then I could use nx generate app to add any sort of extra apps successfully (even a second angular web app).

$ pnpx create-nx-workspace@latest

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Choose your style                     · integrated
✔ What to create in the new workspace   · angular
✔ Repository name                       · app
✔ Application name                      · web
✔ Default stylesheet format             · scss
✔ Enable distributed caching to make your CI faster · Yes

 >  NX   Nx is creating your v15.0.13 workspace.

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

✔ Installing dependencies with pnpm
✔ Nx has successfully created the workspace: app.
✔ NxCloud has been set up successfully

[4r7if3x]

Just one question remains... I ended up using xplat after watching NativeScript's webinar on Code Sharing and reading its v5 documentation on this subject, although the latest docs at this moment are for v7. In the webinar, the idea was reusing the code, but using xplat I noticed that doesn't apply in the same way, and things are totally separated in different app directories and there was no obvious relation at first glance. Only for the Electron app, I was asked to provide the name of the web project, and I'm not yet sure how they are connected in this setup.

May you please shed some light on this matter? My goal is to build all web, mobile, and desktop apps using a single Angular codebase and have codes & configurations shared among them as much as possible, yet having a proper, maintainable, and scalable architecture.

[s0l4r]

I am still struggling to get this to work as well, because my existing angular app is structured like Manfred suggests, and this architecture needs you to think in a different way. See https://youtu.be/4Ee96X6W3Nc
I managed to hack all the Xplat includes to from the Core Module and ending up with my web architecture. It works well with both Electron and Web, but with NS I have no idea how to do it. There are some previous threads about the structure of Xplat, discussing this issue. Not sure this is what you are asking about, but for me it's quite a challenge to get to work.

[4r7if3x]

Well, I guess I'd take the official approach to use NativeScript with Angular, for now. I'd recommend it to you as well. It's the same method explained in the webinar and you can follow the instructions from the docs in order to set it up on your existing project.

Yet I'd like to learn more about xplat architecture and its approach and advantages if the authors join this conversation... But I'd like to have shared codes between my projects, not only a monorepo with separated codes in it.

[4r7if3x]

Turned out I was on NodeJS v18 while Angular v15 wasn't released yet to support it, but now it works just fine. I'd suggest handling such errors with a proper message to prevent confusion for newbies in the future.