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…
4 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
Hey,
I just wanted to say that the problem only exists when I select an empty starter project as the template. With the template Sidemenu, everything works.
Thank you for the good instructions on the Monorepo.
Hello !
First, thanks for this article.
I just wanna know if there’s a possibility to use something similar to :
ionic run android --prod --lab or ionic serve --lab with nx.
unfortunately, couldn’t manage to find an answer.
Have a nice day !
I’m having an immediate problem with the steps in this article. I get as far as creating the Generating Applications section but when I run with: nx serve my-app I get this:
TypeError: _b.flat is not a function
Any clue what’s wrong? I am currently using ionic outside of an nx workspace with no problems at all.
Ionic:
Ionic CLI : 6.11.6
Utility:
cordova-res (update available: 0.15.3) : 0.14.0
native-run : 1.3.0
System:
NodeJS : v10.16.1
npm : 6.9.0
OS : macOS Catalina
UPDATE: apparently something in here doesn’t work on Node 10. Updated to 12.16.3 and it works correctly.
First of all, congratulations on your excellent work, @mhartington. I admire it a lot, I have tried it, and it works fantastic.
I have a question for you,
How do I install angular/fire to one of your projects made in @nxtend/ionic-angular?
I have not found a way to run the command:
ng add @angular/fire
How can I do it?
In advance, Thanks for your time.
2 Likes
Hi @mhartington, wow, the potential of this tool that you just revealed is fantastic; congratulations!
I have a follow-up consultation,
Is there an official repository for @nxtend/ionic-angular?
Will it have update support @nxtend/ionic-angular?
What happens is that when I follow your tutorial, the NPM alert does not stop appearing:
npm WARN @nxtend/ionic-angular@11.1.1 requires a peer of @nrwl/angular@^11.0.19, but none is installed. You must install peer dependencies yourself.
The details that I am working with “@nrwl/angular”: “12.3.6”
And I see that there is no way to help with updating the dependencies.
That is why I suggest that there be an official repository for @nxtend/ionic-angular and @nxtend/capacitor to help the community.
Thank you very much in advance for your time.
2 Likes
Hello folks, is there any working repository to inspect? I’m getting this error following the instructions:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: app@0.0.1
npm ERR! Found: rxjs@7.1.0
npm ERR! node_modules/rxjs
npm ERR! rxjs@"7.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.5.3" from @angular/core@12.0.4
and many other errors related with @nxtend/ionic-angular
Thanks in advance!
how to add tailwindcss in nx mono repo?
Hi all.
I just started to use nx and have question. What is the best practice to work with ionic project within nx workspace ? (For example, what should I use to create a new ionic page)
Thanks!
HI,
I used nx for monorepos last years and with version 12 all worked well.
I attended a speech during ioniconf 2022 and this is still one of the suggested methods to manage monorepos so now i am trying to create a new monorepo, but when i try to add the @nxtend/ionic-angular package i get errors on dependencies.
it seems that the nx more recent versions do not support ionic anymore.
should i use an older version? (and how?)
and more important: is nx still supported?
thanks
Hi, with new release of NX.dev Nx 14.2 which add support for Angular 14.
¿how will affect the version of Ionic 6?
Ionic 6.1.9 brought support for Angular 14.
Hello Everyone,
Anyone can please have look this question.
It’s been a while since I asked a question on here, been flying low and fast.
I have my ionic project in an Nx Workspace and everything works great, all of my UI components are in libraries, etc. But, I cannot for the life of me, get Tailwind to work. However if I use one of those components in a regular Angular application that imports the IonicModule and outputs variables.scss, it works just fine. Not sure why. I have even tried creating a shared tailwind.config.js in a library but no luck. It must be that the build process is not firing the necessary postCss processing, but why is this different than a regular Angular app?