feat: Each Ionic component has its own module in Angular

[PatrikHorvatic]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Angular v15 has enabled importing only parts of CommonModule. I suggest Ionic exports all components in separate modules.

Describe the Use Case

It's really common you do not need all directives and pipes CommonModule offers, but only ngFor and ngIf directives in your page. Since Angular v15 you don't need to import CommonModule, you can import NgFor and NgIf in your page module.

Let's say you only need 'ion-content' and 'ion-searchbar' components in your page. You would need to import IonicModule in your page module. I suggest enabling importing only IonContentModule and IonSearchbarModule, since you only need these two components.

Describe Preferred Solution

With use cases described above, I suggest exporting each component in it's own module, for example, 'ion-content' component in IonContentModule, ''ion-searchbar' in IonSearchbarModule etc.

Describe Alternatives

No response

Related Code

Let's take really simple RegisterOptionsPage

HTML

<ion-content>
  <div class="pageContainer">
        <app-option-select-card [title]="LANGUAGE[3] | language" [subtitle]="LANGUAGE[4] | language"
          (cardClicked)="goTo('user')" ikona="userIconInactive" />
        <app-option-select-card [title]="LANGUAGE[5] | language" [subtitle]="LANGUAGE[6] | language"
          ikona="businessIconInactive" (cardClicked)="goTo('company')" />
  </div>
</ion-content>

MODULE
Here is RegisterOptionsPageModule

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { RegisterOptionsPage } from './register-options.page';
import { VariousComponentsModule } from 'src/app/Components/Various/VariousComponents.module';
import { LanguagePipeModule } from 'src/app/Pipes/Language/LanguagePipe.module';

@NgModule({
  imports: [
    IonicModule,
    VariousComponentsModule, LanguagePipeModule
  ],
  declarations: [RegisterOptionsPage],
  exports: [RegisterOptionsPage]
})
export class RegisterOptionsPageModule { }

With this feature implemented, RegisterOptionsPageModule would look like this:

import { NgModule } from '@angular/core';
import { IonContentModule } from '@ionic/angular';
import { RegisterOptionsPage } from './register-options.page';
import { VariousComponentsModule } from 'src/app/Components/Various/VariousComponents.module';
import { LanguagePipeModule } from 'src/app/Pipes/Language/LanguagePipe.module';

@NgModule({
  imports: [
    IonContentModule,
    VariousComponentsModule, LanguagePipeModule
  ],
  declarations: [RegisterOptionsPage],
  exports: [RegisterOptionsPage]
})
export class RegisterOptionsPageModule { }

Additional Information

No response

[liamdebeasi]

Thanks for the report. Is there a particular reason why you need a module over using standalone components, or would standalone components work too? The team has discussed this in the past, and we don't have plans to introduce a module per-component given that standalone components seem to be the recommended approach.

[PatrikHorvatic]

Hello Liam,
thank You for the reply.

My team has decided to continue using NgModules. The transformation of a large number of applications to standalone design is currently not acceptable to us because it would take a lot of time and resources. We are unable to do this due to the large volume of work, upcoming deadlines and lack of developers :/.

[liamdebeasi]

Thanks for the additional info. I did bring this up with the team again, and we don't have plans to implement module support at the moment. The main reason is that the Angular ecosystem seems to be trending towards standalone components, so we'd like to focus our efforts there for the time being. That being said, we definitely understand the painpoint of having every Ionic component get bundled with your app even if you aren't using some of them. We are currently looking into ways of solving this with standalone components for a smaller bundle size and an improved developer experience. We hope to have more information to share regarding this initiative in the future.

I am going to close this, but let me know if you have questions.

[ionitron-bot]

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.