feat: Angular 14 Standalone Components

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 14 introduces the ability to use standalone components, without having to declare them on an NgModule. This feature is used for rendering components within a parent component, as well as for lazy loading a standalone component on a route, instead of using a routing module.

Standalone components encompass all declarations (pipes, directives and components).

As of Angular 14, standalone components are a dev preview feature. They are also not backwards compatible with older versions of Angular. This means for Ionic to add support for standalone components, Ionic would have to remove support for Angular 13 and lower.

If you are wanting to experiment with an Angular 14 project and Ionic using standalone components, the following dev-build is available:

6.1.7-dev.11654279011.1b971e3e

For an example Ionic application on Angular 14, you can clone: https://github.com/sean-perkins/angular-14-demo. Remember to install the available dev-build.

Describe the Use Case

Ionic developers should be able to use the following code:

{
   path: 'standalone',
   loadComponent: () => import('./standalone.component').then(m => m.StandaloneComponent)
 }

To create a route of /standalone that renders the StandaloneComponent inside of the ion-router-outlet.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[sean-perkins]

After some initial investigation work, I have been able to identify a pattern which would allow Ionic to add support for standalone components with supporting previous versions of Angular.

With the introduction of a new property on ion-router-outlet and ion-tabs, developers could pass in the required EnvironmentInjector to our routing implementations.

For example, the implementation pattern would look like:

import { EnvironmentInjector } from '@angular/core';
@Component({})
export class ExampleComponent {
  constructor(public environmentInjector: EnvironmentInjector) {}
}

<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>

This would then allow developers to use the new syntax for route definitions to use standalone components. This would be an opt-in feature for Angular 14+ and only required until ~ Ionic 8 release, which would drop support for Angular 13. It would only be required if you wanted to use standalone components with routing in Ionic.

Because we would be supporting an experimental API from Angular, we would reserve the right to remove/change that API at any time (between minor or major releases).

[mackelito]

When will we be able to use standalone components? is there a rough ETA?