ionic-framework
ionic-framework copied to clipboard
feat(angular): use standalone components with routing
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.
- Some docs updates need to be made in the
- [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 toion-router-outlet
andion-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
- [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) {}
}