ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

feat(angular): use standalone components with routing

Open sean-perkins opened this issue 1 year ago • 0 comments

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.
  • [x] Build (npm run build) was run locally and any changes were pushed
  • [x] 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
  • [x] 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.

Screen Shot 2022-07-07 at 3 13 28 PM

Does this introduce a breaking change?

  • [ ] Yes
  • [x] 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 avatar Jul 07 '22 19:07 sean-perkins