Ionic: new configuration generator runs into several issues

[mburger81]

Describe the bug
I've created a new empty angular repository but with nx standalone workspace and not nx mono repository

I try to configure a ionic-angular project with the last @nxext@[email protected] release today
nx g @nxext/ionic-angular:configuration

This is the output

✔ Which project would you like to configure? · ionic-nx-angular
UPDATE package.json
DELETE public/favicon.ico
DELETE public
CREATE ionic.config.json
CREATE main.ts
UPDATE src/app/app.component.html
UPDATE src/app/app.component.spec.ts
UPDATE src/app/app.component.ts
UPDATE src/app/app.routes.ts
CREATE src/app/explore-container/explore-container.component.html
CREATE src/app/explore-container/explore-container.component.scss
CREATE src/app/explore-container/explore-container.component.spec.ts
CREATE src/app/explore-container/explore-container.component.ts
CREATE src/app/tab1/tab1.page.html
CREATE src/app/tab1/tab1.page.scss
CREATE src/app/tab1/tab1.page.spec.ts
CREATE src/app/tab1/tab1.page.ts
CREATE src/app/tab2/tab2.page.html
CREATE src/app/tab2/tab2.page.scss
CREATE src/app/tab2/tab2.page.spec.ts
CREATE src/app/tab2/tab2.page.ts
CREATE src/app/tab3/tab3.page.html
CREATE src/app/tab3/tab3.page.scss
CREATE src/app/tab3/tab3.page.spec.ts
CREATE src/app/tab3/tab3.page.ts
CREATE src/app/tabs/tabs.page.html
CREATE src/app/tabs/tabs.page.scss
CREATE src/app/tabs/tabs.page.spec.ts
CREATE src/app/tabs/tabs.page.ts
CREATE src/app/tabs/tabs.routes.ts
UPDATE src/index.html
CREATE src/public/favicon.png
CREATE src/public/shapes.svg
UPDATE src/styles.scss
CREATE src/theme/variables.scss
UPDATE project.json
CREATE capacitor.config.ts
npm warn tarball tarball data for @capacitor/ios@file:ios (null) seems to be corrupted. Trying again.
npm warn tarball tarball data for @capacitor/android@file:android (null) seems to be corrupted. Trying again.
npm warn tarball tarball data for @capacitor/ios@file:ios (null) seems to be corrupted. Trying again.
npm warn tarball tarball data for @capacitor/android@file:android (null) seems to be corrupted. Trying again.
npm error code ENOENT
npm error syscall open
npm error path /Users/......../ionic-nx-angular/ios/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/Users/......../ionic-nx-angular/ios/package.json'

Expected behavior
To me it looks like, the configurator is requiring a already existing ios and probably also a existing android project for capacitor app. But if you create a new project from scratch, this can not be already there

[mburger81]

FYI:
I've tried also to add @nxext/ionic-angular and @nxext/capacitor to an existing ionic project which Ive converted to a nx standalone workspace, but I run in exactly the same error

The error in this case is happening when I try to install @nxext/capacitor

npm install --save-dev @nxext/capacitor --legacy-peer-deps
npm warn tarball tarball data for @capacitor/ios@file:ios (null) seems to be corrupted. Trying again.
npm warn tarball tarball data for @capacitor/android@file:android (null) seems to be corrupted. Trying again.
npm warn tarball tarball data for @capacitor/ios@file:ios (null) seems to be corrupted. Trying again.
npm warn tarball tarball data for @capacitor/android@file:android (null) seems to be corrupted. Trying again.
npm error code ENOENT
npm error syscall open
npm error path /Users/xxxxx/app/ios/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/Users/xxxxx/app/ios/package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: /Users/xxxxx/.npm/_logs/2024-10-02T13_01_15_296Z-debug-0.log

@DominikPieper @

[mburger81]

I've also discovered:
on running the configuration command
the @capacitor/android and @capacitor/ios deps which are in my case under dependencies, are added also under devDependencies like this

"@capacitor/android": "./node_modules/@capacitor/android",
"@capacitor/ios": "./node_modules/@capacitor/ios",

Even if I put them before running the command in devDependencies they are still changed in the same way, which could not be correct.

This is probably the reason for the tarball issue

Also there is the problem: the configurator ask me for which app to apply the configuration, and this is the outcome

 NX  Generating @nxext/ionic-angular:configuration

✔ Which project would you like to configure? · app
Could not format src/index.html. Error: "Unexpected closing tag "-root". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (23:10)
  21 |
  22 | <body>
> 23 |   <-root></-root>
     |          ^^^^^^^^
  24 | </body>
  25 |
  26 | </html>"
Could not format src/index.html. Error: "Unexpected closing tag "-root". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (23:10)
  21 |
  22 | <body>
> 23 |   <-root></-root>
     |          ^^^^^^^^
  24 | </body>
  25 |
  26 | </html>"

If you look, the index.html file then is broken the prefix app is missing

[edbzn]

Hey, I'm looking into this.

[edbzn]

PR ready: #1110, @DominikPieper when you have free time you can merge and release a patch version for ionic-angular, ionic-react, and capacitor. Thanks for the reporting @mburger81!

[Hanifb]

Not sure if related, but it is also an issue with the generator fails to generate a empty app:

Angular: 18.2.7
NX: 19.8.3
nxext/ionic-angular: 19.1.0

nx generate @nxext/ionic-angular:application MedlemMobile --verbose

NX Unable to resolve @nxext/ionic-angular:application.

Cannot find generator 'application' in /Users/xxxx/Kod/podseal/node_modules/@nxext/ionic-angular/generators.json.
Error: Unable to resolve @nxext/ionic-angular:application.
Cannot find generator 'application' in /Users/xxxx/Kod/podseal/node_modules/@nxext/ionic-angular/generators.json.
at getGeneratorInformation (/Users/xxxx/Kod/podseal/node_modules/nx/src/command-line/generate/generator-utils.js:40:15)
at /Users/xxxx/Kod/podseal/node_modules/nx/src/command-line/generate/generate.js:215:248
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async handleErrors (/Users/xxxx/Kod/podseal/node_modules/nx/src/utils/handle-errors.js:9:24)
at async Object.handler (/Users/xxxx/Kod/podseal/node_modules/nx/src/command-line/generate/command-object.js:14:22)

[mburger81]

@Hanifb This IMO is happening because from version 19.1.0 they have removed the app generator, so now you should create your workspace with your app, for example create a plain angular app in a new nx workspace.

Then just run the new configurator like this
nx g @nxext/ionic-angular:configuration

It will ask you on which project you would like to add it, select yours and it should be fine

[Hanifb]

@mburger81 My bad, missed this change. I followed your instructions, was able to reproduce your errors. Looking forward to @edbzn patch. Thank you.

[mburger81]

@DominikPieper sorry to stress you, do you think we can expect to have a new release today?
If not

@edbzn what is the best way to test the new @nxext/ionic-angular before public release, does it work using it directly from github?

[mburger81]

@edbzn release ci action failed

[DominikPieper]

Hey, sorry I wasn’t able to do a release. Yesterday and today are few days here and I’m not at home 😅 so no Mac to do one

[edbzn]

No hurry @DominikPieper, however before releasing we should merge #1107

[mburger81]

@edbzn I would like to ask you here in this issue a few question about the ionic-angular executer, if this is okay for you. I think I've also found a few problems with the new configurator.

Should the @nxext/ionic-angular executer not be a wrapper to @ionic/cli like nx is for @angular/cli? If I run nx serve it's executed directly the ng compiler instead of running ionic with the usual params like custom port and localhost set

The @nxext/ionic-angular is now a configurator, so it really just configures the project like its needed for ionic, so it will not use the ionic cli later on?

We can not run any ionic commands in the workspace as the angular.json is not available, so my toughts are: Is this not a limitation, what if we need a custom ionic cli functionality?

[edbzn]

Should the @nxext/ionic-angular executer not be a wrapper to @ionic/cli like nx is for @angular/cli? If I run nx serve it's executed directly the ng compiler instead of running ionic with the usual params like custom port and localhost set

Yeah, today there's no support for the @ionic/cli in the Nx plugins. However, the next step I wanted to experiment is "crystalizing" the Capacitor CLI using the Plugin API. So instead of generating new targets inside the project.json, it would detect the presence of a Capacitor config, dynamically add the targets for Capacitor, and call the CLI underneath.

I think it's better & easier to start with Capacitor as there are fewer commands, but we could also provide a plugin for the @ionic/cli later on, so you could call the Ionic CLI directly on your project using Nx.

We can not run any ionic commands in the workspace as the angular.json is not available, so my toughts are: Is this not a limitation, what if we need a custom ionic cli functionality?

Which command are you missing from your experience? Not all Ionic commands are useful in an Nx workspace, for instance, ionic serve just wraps the ng CLI, so it's better to use the Nx executor for serving your Angular app.