NX 12 Compatibility

[samratarmas]

Hello Devin,

I have been enjoying the @ionic/angular integration on Nx 11 and cannot thank you enough for your great work!

Recently I am trying to start a new Nx workspace with the latest Nx version using create-Nx, and adding nxtend with ionic angular has not worked out for me ( you can try it out yourself). Is the plugin not compatible with Nx 12? When I was successful in installing the packages, Nx serve command failed with error about missing stack.

This can be replicated by updating to latest nx cli and nx workspace, and starting a new nx ionic angular application from scratch following the nxtend docs. Is this an issue with me missing some steps? If that is the case and you were able to successfully run nx serve with ionic/angular, and build with capacitor then it would be really helpful if you could list the steps you did on your end.

Looking forward to your quick response, Best Regards Samrat

[devinshoemaker]

Hey there, thanks for this. I haven't had much time to look into the Nx 12 migration yet but I plan to here soon. When that all out there I'll try and remember to update this issue, and the new version will be 12.0.

[spicemix]

% ng add @nxtend/firebase
The add command requires to be run in an Angular project, but a project definition could not be found.

What would a good manual workaround be in the meantime? I tried rolling back to Nx 11 and still had problems. Firebase with Nx seems a bit difficult so I was hoping this plugin would do the trick. Thanks!

[spicemix]

OK I got it now (I think), even in Nx 12. The docs are off. The way to install firebase that works for me at present (for an app named my-app which is the default in my angular.json) is:

npm install --legacy-peer-deps -D @nxtend/firebase
nx generate @nxtend/firebase:firebase-project
nx run my-app:firebase --cmd init
nx run my-app:firebase --cmd="emulators:start"

That gets you firebase in the top-level package.json, plus the firebase goodies inside apps/my-app including the functions directory, and starts the emulators you installed. There are more challenges to getting functions to work but at least that got me somewhere. Thanks!

[devinshoemaker]

Just curious, what npm version are you using? And glad things are working for you. I have an official Nx 12 branch in progress now, I just need to test everything.

[spicemix]

I'm using npm 6.4.11 as angular demands v6. Your firebase thing worked fine, but it means the firebase is associated with an individual app, and I wanted the monorepo to model several apps off one firebase, so I backed it out. I find so far that if you only want one firebase instance for the whole monorepo, just working directly with firebase as Google intended, putting the /functions folder and such at top level of the repo, works fine. It's designed to attach to an existing repo, and I couldn't find any definitive way of working with firebase inside Nx, although this thread had some interesting options for more sophisticated uses.

However I am using @nxtend/ionic-angular with Nx12 and it's working great so far, thanks so much! I found out about all this from your ionic blog article and now am wondering why ionic doesn't migrate all their default builds to Nx as it gets us Jest/Cypress rather than the ancient Jasmine/Protractor, and shared libraries, incremental builds, stricter typescript, etc. I should have known about all this a couple months ago.

[maeri]

@samratarmas would you mind sharing you project structure ? thanks a lot !

[adrian-goe]

Hi, is there an update, when we can use this with nx12? I get these errors, when I try to create a fresh project with nx.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: retour@0.0.0
npm ERR! Found: @nrwl/workspace@12.5.7
npm ERR! node_modules/@nrwl/workspace
npm ERR!   dev @nrwl/workspace@"12.5.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @nrwl/workspace@"^11.0.19" from @nxtend/capacitor@11.1.1
npm ERR! node_modules/@nxtend/capacitor
npm ERR!   peer @nxtend/capacitor@"^11.0.0" from @nxtend/ionic-angular@11.1.1
npm ERR!   node_modules/@nxtend/ionic-angular
npm ERR!     dev @nxtend/ionic-angular@"*" from the root project

[devinshoemaker]

@nxtend/ionic-react, @nxtend/ionic-angular, and @nxtend/capacitor version 12.0.0-beta.1 has been published. Feel free to try them out and let me know if you have any issues.

[DaSchTour]

@devinshoemaker I'm currently testing. I think it would be great if updating to 12 would also update capacitor and other packages. I'm currently not sure if I can use capacitor 3 with version 12 beta.

But till now everything works fine, I can add plugins, sync, copy and build.

With capacitor 3 I have an error on sync @capacitor/core/native-bridge.js is missing.

After update, installing capacitor cli 3 it now works. But somehow plugins do not work. The isPluginAvailable always returns false. I did everything like in the capacitor documentation. But I fear something is missing. But I'm very new to Ionic and Capacitor so I have no idea why the plugins are not recognized correctly.

[devinshoemaker]

@DaSchTour v12.0.0 of all the plugins has been released. It sounds like you might need to update your plugins. I would double check the Capacitor 3 migration guide: https://capacitorjs.com/docs/updating/3-0