search

nxext / nx-extensions

Nx Extension for StencilJs, SvelteJS, SolidJS, Ionic and VueJs
MIT License
454 stars 99 forks source link

Angular: Creating a new blank Ionic Angular app does not ask for a prefix #955

Closed codemis closed 1 year ago

codemis commented 1 year ago

Describe the bug

I am using @nxext/ionic-angular version 15.7.0. I created a new Ionic Angular application in a new empty NX workspace using the following command:

nx generate @nxext/ionic-angular:application my-new-app

The terminal asked me: Which starter template would you like to use?, and I selected Blank. Then an error displayed in the terminal twice:

Could not format apps/my-new-app/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>"

I noticed in the generated src/index.html file, the code adds this HTML tag:

<-root></-root>

It should have a prefix attached to it. I also noticed in src/app/home/home.page.ts it uses the following selector which is missing the prefix:

@Component({
  selector: "-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"],
})

Looking at this file, it looks like a {prefix} needs to defined. Where does it get this prefix from?

I tried adding --prefix to the generate command, but it did not do anything different.

To Reproduce Steps to reproduce the behavior:

  1. Create a new NX workspace: npx create-nx-workspace@latest my-company
  2. CD into the workspace
  3. Install NPM packages: npm install
  4. Install the NX Extensions for Ionic Angular: npm install -D @nxext/ionic-angular@latest
  5. Generate the application: nx generate @nxext/ionic-angular:application my-new-app

A quick side point, when I tried to create the application, I was prompted to install the following libraries:

Both of these are already installed but under their new names:

So these dependencies should be updated.

Expected behavior A clear and concise description of what you expected to happen.

I would have thought that there was a way to declare a prefix for the app, or that it would default if it was not supplied.

Additional context

To get the app to build and run, I simply add a prefix to both the files described above, and it works perfect.

Thank you for your help on this!

DominikPieper commented 1 year ago

Hey, which workspace scheme do you use?

codemis commented 1 year ago

Thank you @DominikPieper for your quick reply. I am going to close this issue. I think I may have had an older library on my computer that was causing the problem. I walked through the steps again, and everything worked perfectly this time. 🤷‍♂️ Thank you for your time and your hard work!

dasco144 commented 1 year ago

I was able to get the same thing on a repo of mine at this commit when running the nx g @nxext/ionic-angular:application yoga-schedule command

Edit: Looking a bit further, it seems that the npmScope it tries to infer from the getNpmScope nx helper function is returning undefined.

Edit 2: I think the issue comes from this line, where the getNpmScope nx util for getting the scope name is looking for a name starting with @, and not returning anything for other scenarios (which is my case).

More info here behind the decision to not support scopes without a starting @

andregreeff commented 1 year ago

I'm experiencing this same issue with a completely new project now, never seen it before though.

at first, npx create-nx-workspace template-mobile-workspace was creating a new workspace for me with Nx 15, but I did find that nx@15 was still installed globally. updated this with npm i -g nx, and now nx --version shows the global version as 16.7.4.

npx create-nx-workspace was still generating a new workspace with nx@15 though, which I only managed to get around by running npx create-nx-workspace@latest. after this, nx --version showed the local version as 16.7.4 as well.

thereafter I ran npm i -D @nxext/ionic-angular @nxext/capacitor, which installed version 16.2.0 of the Angular plugin and 16.7.0 of the Capacitor plugin.

at this point, nx g @nxext/ionic-angular:app base (choosing "tabs" template) generates the files which Prettier then cannot format, because:

Could not format packages/base/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 packages/base/src/app/tab1/tab1.page.html. Error: "Unexpected closing tag "-explore-container". 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 (16:41)
  14 |   </ion-header>
  15 |
> 16 |   <-explore-container name="Tab 1 page"></-explore-container>
     |                                         ^^^^^^^^^^^^^^^^^^^^^
  17 | </ion-content>
  18 |"
Could not format packages/base/src/app/tab2/tab2.page.html. Error: "Unexpected closing tag "-explore-container". 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 (16:41)
  14 |   </ion-header>
  15 |
> 16 |   <-explore-container name="Tab 2 page"></-explore-container>
     |                                         ^^^^^^^^^^^^^^^^^^^^^
  17 | </ion-content>
  18 |"
Could not format packages/base/src/app/tab3/tab3.page.html. Error: "Unexpected closing tag "-explore-container". 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 (16:41)
  14 |   </ion-header>
  15 |
> 16 |   <-explore-container name="Tab 3 page"></-explore-container>
     |                                         ^^^^^^^^^^^^^^^^^^^^^
  17 | </ion-content>
  18 |"

this is the only place I've found anybody else experiencing the same issue, and it's for older versions.. is this perhaps something going wrong in my dev environment then?

andregreeff commented 1 year ago

ok, interesting... I just tried this again, but slightly differently:

I did uninstall my global nx package, just incase.. which is why I needed npx for the final command this time. not sure if that has any bearing here? FWIW, npx nx --version shows local as 16.7.4, and no global, which is correct.

andregreeff commented 1 year ago

figured it out.. the "structure" selection (or the "schema" that @DominikPieper mentioned?) in the workspace that works as expected used "integrated monorepo", whereas the first workspace that has this issue used "packages".