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

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.

1 Like

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?