Ionic Angular monorepos with NX

Originally published at: Ionic Angular monorepos with NX - Ionic Blog

This is part two of a new series on monorepos. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization. Between sharing code, managing dependencies across projects, and more, monorepos can require a lot of investment to get right. Thankfully, there are many different tools out…

3 Likes

This was a fairly complex transition, with lots of gotchas for all the stuff I have loaded on, but I got through, and honestly wish I had started out with Nx. I had heard of it but I didn’t know Devin had made it work with Ionic until this article. It works well, Cypress and Jest I think most will find a major improvement vs Protractor and Jasmine, and incremental build and test is really nice, automated migrations are nice, etc.

It would be nice if Ionic and Capacitor were made friendly for Nx, even possibly offering it as a starter build option. Capacitor currently wants its CLI in a package.json at a specific directory (the app root), which is unfriendly to monorepo designs where the intention is to have all the dependencies at the root of the monorepo, shared by the various apps using them. Not sure if Capacitor 3 has this sorted but including an Nx monorepo in your test suite would be terrific thanks!

Hello dear Ionic team.
Thank you for the description of how to create a monorepo with NX and Ionic.
We have followed all the steps and can also display the project, but in the starter templates we get error messages that the IONIC elements are not “known-elements”.

It would be very nice if you could give us a hint as to why this is the case?

Thank you very much.

Simple question but are you importing IonicModule in your AppModule?

Hey nibles. Thank you for your feedback. Yes, the IonicModule is imported in the AppModule as .forRoot. Strangely enough, the app.component.html is no longer marked as faulty, but only the home.page.html. But there again the Ionic components with the same error message.
I suspect it is somehow a bug with the TypeScript control, because when I run the build command the project is generated without error message.
It would be great if an empty project template could be created on Github for the article, or if someone could provide this so that I can compare it.
Many thanks and best regards