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@ionc-angular@19.1.0 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: https://github.com/nxext/nx-extensions/pull/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?