Excellent illustration of how to use Ionic Angular and NX workspace from scratch. It would actually be really interesting if you could create a comprehensive, in-depth course on how to implement an online store using Ionic Angular, NX workspace, and all the best practices recommended by the Nrwl team when using NX (like Nitin Vericherla, Victor Savkin), as well as your knowledge and expertise. To handle difficult instances in large projects (mobile/web), such as whether to utilize ngrx store with Ionic for mobile or Ionic storage/vault storage, and numerous other bottlenecks in an application's architecture design. I believe it would be extremely advantageous for the community to have a fully functional workspace. Hence, if this course were to genuinely exist, I would be interested in learning from it and even buying it. Let me know what you think!
Really good example! Two follow-up thoughts/requests: doing manual setup (no plugins) for Capacitor and/or Firebase (functions, storage); and, something on how to diagnose/repair when NX rolls forward and the plugins don't (e. g., Nxtend isn't good with NX 14)
This was mostly the inspiration for this video, I don't know if there is really any other good solution except 1) contribute/send a PR to the plugin that needs to be updated 2) know how to do what you need without the plugin. And on the point about Capacitor, I don't have a vid yet but I have outlined the steps required in this gist: gist.github.com/joshuamorony/2f47388493ac61a9333b3c3cce0a4423
great video. i want to use nx for a new ionic-angular with capacitor project (i am new to micro frontends and this would be my 1st project) . so can you make a starter video on how to set it up and start working. plus i also want to make major module of the app in library form so i can use the libraries for different project. any help will be appreciated.
Thanks a lot for NX videos, I'm happy that there are creators like you, who brings a more best practices to the community. I noticed that there is still some struggle/lack of resources to have full-stack using nx monorepos. I know that you've been showing us two apps in "How Nx and Monorepos just made my life 10x better" we have also Ionic+Angular here. Do you think, making a video about some angular+nest.js or angular+plain node will be worth to share?
Angular/Nest is definitely a good classic combo, and I am working on some stuff around this but its on the back burner a bit at the moment. I will eventually have some vids out on it though!
I have been searching your site, and videos for an answer to this - but I can't find it anywhere. What terminal are you using? The color and autocomplete on it is awesome and I am jealous every time I watch one of your videos :)
I know this video is old, but right now i'm doing some work with nx and i figured aout that if you install manually @ionic/angular-toolkit then the nx-console plugin in VS code will automatically detect the ionic builders and then you can generate pages and every ionic schematics. So since the nx comunity polugin for ionic no longer support the newers versions of ionic you can manually add the initial setup as in this video and afther that you can generate new pages and so on with the nx-console
I have a hard time setting up Ionic in a react app in Nx. The jest tests just don't run. Despite adding transformIgnorePattern flag as suggested in Ionic docs for upgrading to Ionic 6. Not sure if it happens even for Ionic Angular app in NX workspace
How do we then add Capacitor to the Ionic project? Lot's of cool technology here, but it quickly becomes harder to manage without officially supported plugins than the old way of just having different repos maybe publishing your own npm modules for shared library code
I might do a separate video on this, but here are the steps to add Capacitor manually: gist.github.com/joshuamorony/2f47388493ac61a9333b3c3cce0a4423 - As I mentioned though, it's fine to use the existing nxtend plugin (and you probably should) to do this all automatically. It's just good to know that you can do it manually if you need to. I suspect (hope) either Nrwl or Ionic will officially support a plugin eventually since Nx seems to be gaining in popularity quite a bit, but at least living without it mostly just means a bit of extra configuration at the start. Once you're all set up you can just use the Nrwl plugins to do all the code generation stuff.
@@JoshuaMorony Great pointers, thank you! Would love to see a separate video. I hope you are right with official adoption of the nxtend plugin. Lot's of potential here. I didn't have much luck getting the plugin to work either, but at least that pushed me to this video. Understanding better how this stuff works is almost as much of a win as Nx in the first place.
I tried adding Ionic to a new MFE Angular app recently and couldn't get it working. My conclusion was that Ionic just doesn't support MFE as the only time they mention it is when they are selling their own MFE solution. I will try again using your guide as see if I have better luck.
Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076
Amazing! I just tried for Nx 16 and Ionic 7 and it worked. Now I will follow the content for Capacitor. Thanks so much!
Great video! I finally decided to do the "nx" and this helped me a lot. Superthanks!
Excellent illustration of how to use Ionic Angular and NX workspace from scratch. It would actually be really interesting if you could create a comprehensive, in-depth course on how to implement an online store using Ionic Angular, NX workspace, and all the best practices recommended by the Nrwl team when using NX (like Nitin Vericherla, Victor Savkin), as well as your knowledge and expertise. To handle difficult instances in large projects (mobile/web), such as whether to utilize ngrx store with Ionic for mobile or Ionic storage/vault storage, and numerous other bottlenecks in an application's architecture design. I believe it would be extremely advantageous for the community to have a fully functional workspace. Hence, if this course were to genuinely exist, I would be interested in learning from it and even buying it. Let me know what you think!
Hello from Nebraska! 😁
Hello from South Australia!
Really good example! Two follow-up thoughts/requests: doing manual setup (no plugins) for Capacitor and/or Firebase (functions, storage); and, something on how to diagnose/repair when NX rolls forward and the plugins don't (e. g., Nxtend isn't good with NX 14)
This was mostly the inspiration for this video, I don't know if there is really any other good solution except 1) contribute/send a PR to the plugin that needs to be updated 2) know how to do what you need without the plugin. And on the point about Capacitor, I don't have a vid yet but I have outlined the steps required in this gist: gist.github.com/joshuamorony/2f47388493ac61a9333b3c3cce0a4423
great video. i want to use nx for a new ionic-angular with capacitor project (i am new to micro frontends and this would be my 1st project) . so can you make a starter video on how to set it up and start working. plus i also want to make major module of the app in library form so i can use the libraries for different project. any help will be appreciated.
This is really good video.
I've started to use nx 14 and nxtend/angular-ionic not works with the latest nx. I have dependencies issues.
Same
Many thanks for the video. Ripple effect on clicks not is working with nx and ionic. Is there anything we missed for importing?
Thanks a lot for NX videos, I'm happy that there are creators like you, who brings a more best practices to the community.
I noticed that there is still some struggle/lack of resources to have full-stack using nx monorepos. I know that you've been showing us two apps in "How Nx and Monorepos just made my life 10x better" we have also Ionic+Angular here.
Do you think, making a video about some angular+nest.js or angular+plain node will be worth to share?
Angular/Nest is definitely a good classic combo, and I am working on some stuff around this but its on the back burner a bit at the moment. I will eventually have some vids out on it though!
I have been searching your site, and videos for an answer to this - but I can't find it anywhere. What terminal are you using? The color and autocomplete on it is awesome and I am jealous every time I watch one of your videos :)
I just use the standard terminal in VS Code and iTerm out side of VS Code - but I use OhMyZsh with the PowerLevel10k theme :)
I know this video is old, but right now i'm doing some work with nx and i figured aout that if you install manually @ionic/angular-toolkit then the nx-console plugin in VS code will automatically detect the ionic builders and then you can generate pages and every ionic schematics. So since the nx comunity polugin for ionic no longer support the newers versions of ionic you can manually add the initial setup as in this video and afther that you can generate new pages and so on with the nx-console
I have a hard time setting up Ionic in a react app in Nx. The jest tests just don't run. Despite adding transformIgnorePattern flag as suggested in Ionic docs for upgrading to Ionic 6. Not sure if it happens even for Ionic Angular app in NX workspace
How do we then add Capacitor to the Ionic project?
Lot's of cool technology here, but it quickly becomes harder to manage without officially supported plugins than the old way of just having different repos maybe publishing your own npm modules for shared library code
I might do a separate video on this, but here are the steps to add Capacitor manually: gist.github.com/joshuamorony/2f47388493ac61a9333b3c3cce0a4423 - As I mentioned though, it's fine to use the existing nxtend plugin (and you probably should) to do this all automatically. It's just good to know that you can do it manually if you need to. I suspect (hope) either Nrwl or Ionic will officially support a plugin eventually since Nx seems to be gaining in popularity quite a bit, but at least living without it mostly just means a bit of extra configuration at the start. Once you're all set up you can just use the Nrwl plugins to do all the code generation stuff.
@@JoshuaMorony Great pointers, thank you! Would love to see a separate video. I hope you are right with official adoption of the nxtend plugin. Lot's of potential here. I didn't have much luck getting the plugin to work either, but at least that pushed me to this video. Understanding better how this stuff works is almost as much of a win as Nx in the first place.
@@JoshuaMorony great work man, i am still struggling to add capacitor on my own as nxtend plugin does not support latest version of nx.
@@JoshuaMorony Is it possible to add live reload for both ios and android?
The project structure seems to be different now, trying to follow on NX 17 and nothing is the same
Thanks a lot
I tried adding Ionic to a new MFE Angular app recently and couldn't get it working. My conclusion was that Ionic just doesn't support MFE as the only time they mention it is when they are selling their own MFE solution. I will try again using your guide as see if I have better luck.
I tried for a few days and failed. I couldn't get the routing to work properly.
RIP Nxtend