feat: Angular 14 Standalone Components

[sean-perkins]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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).

[ntorrey]

Any idea when standalone components will be fully supported?

[sean-perkins]

Hello everyone, here is an updated dev-build based on my message above: 6.1.14-dev.11657224247.185f8192.

The dev-build should warn you with the expected code to support standalone components. You can also look at the notes I have included in the "Other information" section on the draft PR: https://github.com/ionic-team/ionic-framework/pull/25589

Please let me know if you run into any issues.

[mackelito]

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

[sean-perkins]

@mackelito the experimental API support will be available in the next minor release (6.3.0).

This issue is now resolved, since the PR has been merged into the feature branch: https://github.com/ionic-team/ionic-framework/pull/25589

[hakimio]

@sean-perkins can you also incorporate PR #25502 in 6.3? I think it's been more than enough time for people to try it out.

[sean-perkins]

@hakimio we have a fixed scope agreed upon by the team for 6.3. Standalone component routing I believe was the last task blocking the release.

The issue you referenced does have some remaining work to get it up-to-date with main and verify it against our new test app structure (we are now able to test our changes against v12, v13 and v14 of Angular).

Assuming all of that goes without issue, we could likely release that fix as a patch release. Our patch release cycle is much more aggressive, releasing weekly if there are changes to go out.

[ionitron-bot[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.