feat(angular): use standalone components with routing

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Standalone components do not work within Ionic's routing implementation.

Issue URL: #25404

What is the new behavior?

• Introduces an environmentInjector property to ion-router-outlet and ion-tabs to enable developers to make use of standalone components with routing in Angular 14.
• Developer warning to guide developers trying to use standalone components with routing without our required syntax.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.1.14-dev.11657224247.185f8192

In your Angular 14 application, you will need to expose the new EnvironmentInjector to Ionic routing components (ion-router-outlet and ion-tabs).

For example:

import { EnvironmentInjector } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>`
})
export class AppComponent {
  constructor(public environmentInjector: EnvironmentInjector) {}
}

[sean-perkins]

TODO: Need to rebase 6.3 against main, to get the updated multi-framework version testing. Then need to write a specific test in the Angular 14 test app that verifies standalone components with routing.

[amandaejohnston]

Why was this change needed?

[sean-perkins]

This was to align with the type signature of the EnvironmentInjector type from @angular/core. We are maintaining our own "version" of the types, since we cannot update our library dependencies to target Angular 14. When I originally ported this, I forgot to make the onDestroy callback optional.

Without this change, developers would receive a typescript language server warning in their IDE that the type of their environmentInjector does not match the type signature of what we are expecting to be passed in.

[amandaejohnston]

Do we need a tech debt ticket for this? (Ditto for ion-tabs)

[sean-perkins]

I'm indifferent since this is an experimental API that could be ripped out completely if either Angular doesn't proceed with standalone as part of the official public API or if don't think it is a good architectural fit with Ionic.

I think once we consider it public API, having tech debt to maintain it could make sense.

But we also don't have many experimental features, so if we want to follow our existing process like everything else, I'm happy to create tickets 👍

[liamdebeasi]

Changes look good. Are these test app config changes intentional or do we just need to resync feature-6.3 with main?

[sean-perkins]

The changes to the test apps are intentional. Removed the non-applicable README, added a missing tsconfig and created a script to sync only the e2e content changes (faster than syncing all of the node modules and app files when trying to modify a cypress test file in the base app).

The ng14 test app changes are required to validate the standalone routing behavior works.