feat: Ionic Angular standalone component feedback #28445

Activity

1. ionitron-bot

   added

   triage

   on Nov 1, 2023
2. LennonReid commented on Nov 1, 2023

   

   LennonReid

   on Nov 1, 2023

   More actions

   I'd like to discuss the @ionic/angular version I'm using. With the adoption of v7.5.3-nightly, I've observed a noticeable reduction in my app's bundle size, all thanks to the standalone feature.

   Regarding 'addIcon', I think it's an effective means to distribute and manage icons, aligning perfectly with the core concept of the "standalone" approach.

   However, it's worth noting that despite the benefits, I'm still sticking with v7.5.2 for everything except icons. This decision is primarily driven by the ongoing issues that persist within the standalone approach.

   By the way, this issue could serve as valuable feedback for further improvement.
3. liamdebeasi

   self-assigned this

   on Nov 1, 2023
4. liamdebeasi commented on Nov 1, 2023

   

   liamdebeasi

   on Nov 1, 2023

   Contributor

   More actions

   Hey there! Thanks for trying the standalone build of Ionic. There are several pieces of feedback here, so I'll reply to each individually.

   1. The bundle size has increased when using standalone

   Ionic uses a tool provided by the Angular CLI called ng-packagr to bundle Ionic Angular. There was an unfortunate bug in ng-packagr discovered that caused treeshaking to not work correctly. This issue has been resolved in Ionic 7.5.3 (released a few moments ago).

   I will also note that ESBuild support is experimental in Angular, so I would expect there to be some issues with that. I recommend providing feedback to the Angular team for issues here since we do not control the ESBuild configuration.

   If you are still running into treeshaking issues with a Webpack configuration, please open a separate issue with a GitHub repo we can use to reproduce the issue. Treeshaking issues can be tricky, so having a separate thread to discuss will be useful if you are still running into problems.

   2. Ionic does not provide automatic migration for standalone

   We actually do provide (experimental) support for migration. You can access it here: https://github.com/ionic-team/ionic-angular-standalone-codemods

   Since it's experimental, we are rolling it out slowly. We plan to publicize it more in the future. This tool won't migrate everything, but it's designed to assist with some of the more tedious parts of the migration.

   3. Ionic does not provide export groups for components

   I'm not sure I really understand the use case for this. Importing exactly the components you need is by design, so having import groups would mean you are potentially importing more than you need. It also requires the developer to know exactly which components are contained in the import group which can be confusing. For example, an "accordion group" is pretty straightforward, but what should go into a "toolbar group" is fairly subjective.

   4. Having to manually import the icons is tedious

   This is a required process in order to have proper treeshaking and aligns with how other Angular icon libraries work (such as https://ng-icons.github.io/ng-icons/#/). If developers do not define the icons they want to use, then the bundler has no way of knowing which icons should be pulled into the build. As a result, the bundler will pull in every single icon, and the bundle size would increase drastically. The migration tool is designed to assist with registering icons as well.

   You don't have to call addIcons in every component. You're more than welcome to register them in main.ts or app.component.ts. You can then use them anywhere in your application. However, the initial bundle size may increase because the icons need to be loaded up front. This isn't something that is very clear in the documentation, so I opened #28445 to clarify this.

   5. The icon error message is confusing

   I agree that the icon error messaging could be improved. I opened ionic-team/ionicons#1297 to address this.

   ---

   I am going to close this since we use this tracker for bug issues and feature requests, but please feel free to reply and I'll be more than happy to continue the conversation. As for the documentation and icon improvements, you can follow the linked thread for updates on that work.

   👍React with 👍2Reacted by Tomas Rimkus and Lennon Reid
5. liamdebeasi

   closed this as completedon Nov 1, 2023
6. hakimio commented on Nov 1, 2023

   

   hakimio

   on Nov 1, 2023

   Last edited by hakimio

   Author

   More actions

   @liamdebeasi thank you for taking the time to respond to my feedback 🙂

   There was an unfortunate bug in ng-packagr discovered that caused treeshaking to not work correctly. This issue has been resolved in Ionic 7.5.3

   Just tested 7.5.3 and it's not looking good. The webpack bundle size is the same like before (around ~24% increase), but esbuild build size has now increased from 1.76 MB (ionic 7.5.2) to 2.09 MB (7.5.3). That's almost double of original 1.19 MB. Something must be wrong.
   Anyway, can't you just test the bundle size with some of your demo apps?

   We actually do provide (experimental) support for migration.

   Awesome. That will help a lot. Do you plan to announce this new tool anytime soon?

   an "accordion group" is pretty straightforward, but what should go into a "toolbar group" is fairly subjective.

   I agree, that the toolbar group was a bad example, but I still think card, accordion, list, tabs component groups make perfect sense. How do you know what's inside the group? Just check the docs:
   

   You don't have to call addIcons in every component. You're more than welcome to register them in main.ts or app.component.ts.

   I didn't know. That makes it a lot easier to use. I think mentioning that in the docs will help a lot of other users as well.

   I agree that the icon error messaging could be improved. I opened ionic-team/ionicons#1297 to address this.

   Thank you.
7. liamdebeasi commented on Nov 1, 2023

   

   liamdebeasi

   on Nov 1, 2023

   Contributor

   More actions

   Anyway, can't you just test the bundle size with some of your demo apps?

   We do test our demo apps, and treeshaking works well there. Unfortunately, there are many ways in which treeshaking can fail (side effects can cause unexpected things to be imported). Can you open a separate issue with a demo? I can take a look.

   Awesome. That will help a lot. Do you plan to announce this new tool anytime soon?

   Yep! I just updated the announcement blog with a link. I also opened ionic-team/ionic-docs#3223 to publicize the migration utility on the documentation.

   I agree, that the toolbar group was a bad example, but I still think card, accordion, list, tabs component groups make perfect sense. How do you know what's inside the group? Just check the docs:

   That's part of my concern for this. I don't think developers should have to constantly reference the documentation website whenever they want to import a component from Ionic.

   That being said, you should be able to create import groups in your own application which give you a similar result. I think this is a better approach because it allows developers to define groups in a way that makes sense for them/their team.

   src/import-groups.ts

   import { IonAccordion, IonAccordionGroup, IonInput, IonTextarea } from '@ionic/angular/standalone';
   
   export const ACCORDION_GROUP = [IonAccordion, IonAccordionGroup];
   export const INPUT_GROUP = [IonInput, IonTextarea];

   src/home/home.page.ts

   import { Component } from '@angular/core';
   import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
   import { INPUT_GROUP } from '../../import-groups';
   
   @Component({
     selector: 'app-home',
     templateUrl: 'home.page.html',
     styleUrls: ['home.page.scss'],
     standalone: true,
     imports: [IonHeader, IonToolbar, IonTitle, IonContent, ...INPUT_GROUP],
   })
   export class HomePage {
     constructor() {}
   }

   👍React with 👍1Reacted by Tomas Rimkus

   🎉React with 🎉1Reacted by Lennon Reid
8. liamdebeasi

   removed their assignment

   on Nov 1, 2023
9. hakimio commented on Nov 6, 2023

   

   hakimio

   on Nov 6, 2023

   Last edited by hakimio

   Author

   More actions

   @liamdebeasi

   Can you open a separate issue with a demo? I can take a look.

   I'll try to crate a simple reproduction ASAP.

   I just updated the announcement blog with a link. I also opened ionic-team/ionic-docs#3223 to publicize the migration utility on the documentation.

   Awesome 🙂

   That's part of my concern for this. I don't think developers should have to constantly reference the documentation website whenever they want to import a component from Ionic.

   Exporting standalone component groups is an official Angular recommendation for library creators and as it wouldn't be mandatory to use the groups instead of importing single components, I think it would only add value to the users, but yes, I can just as easily create the groups myself.

   imports: [IonContent, ...INPUT_GROUP],

   Small tip: you can import an array of components in both modules and standalone components without having to use the spread operator:

   imports: [IonContent, INPUT_GROUP],

   Same applies to providers as well.
10. ionitron-bot commented on Dec 6, 2023

    

    ionitron-botBot

    on Dec 6, 2023 – with Ionitron Bot

    More actions

    Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
11. ionitron-bot

    locked and limited conversation to collaborators on Dec 6, 2023