mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-05 21:58:20 +08:00
23 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| b315b0cb29 |
chore(docs): consolidate the developer resource files into a docs/ directory (#29266)
Start your review here 👉 [docs/README.md](https://github.com/ionic-team/ionic-framework/blob/FW-6107/docs/README.md) ## What is the current behavior? Documentation files with information on how to contribute, component implementations, testing, etc. are scattered throughout various folders in this repository. ## What is the new behavior? Consolidates the documentation files into a root `docs/` directory for easier discovery and organization. `/docs` tree: ``` ├── _config.yml ├── component-guide.md ├── CONTRIBUTING.md ├── README.md ├── sass-guidelines.md ├── angular │ ├── README.md │ └── testing.md ├── core │ ├── README.md │ └── testing │ ├── README.md │ ├── api.md │ ├── best-practices.md │ ├── preview-changes.md │ └── usage-instructions.md ├── react │ ├── README.md │ └── testing.md ├── react-router │ ├── README.md │ └── testing.md ├── vue │ ├── README.md │ └── testing.md └── vue-router ├── README.md └── testing.md ``` **Migrates the following:** | Previous Location | New Location | | ----------------------------------------------------------- | ----------------------------------------- | | `.github/COMPONENT-GUIDE.md` | `docs/component-guide.md` | | `.github/CONTRIBUTING.md` | `docs/CONTRIBUTING.md` | | `core/scripts/README.md` | `docs/core/testing/preview-changes.md` | | `core/src/utils/test/playwright/docs/api.md` | `docs/core/testing/api.md` | | `core/src/utils/test/playwright/docs/best-practices.md` | `docs/core/testing/best-practices.md` | | `core/src/utils/test/playwright/docs/README.md` | `docs/core/testing/README.md` | | `core/src/utils/test/playwright/docs/usage-instructions.md` | `docs/core/testing/usage-instructions.md` | | `packages/angular/test/README.md` | `docs/angular/testing.md` | | `packages/react-router/test/README.md` | `docs/react-router/testing.md` | | `packages/react/test/README.md` | `docs/react/testing.md` | | `packages/react/test/base/README.md` | `docs/react/testing.md` | | `packages/vue/test/README.md` | `docs/vue/testing.md` | **Adds the following:** | File | Description | | ----------------------------- | ----------------------------------------------------------------------- | | `docs/sass-guidelines.md` | Sass Variable guidelines taken from `ionic-framework-design-documents` | | `docs/README.md` | Entry file that should link to all other files | | `docs/_config.yml` | Config file for use with GitHub pages | | `docs/core/README.md` | Description of core, links to contributing and testing | | `docs/angular/README.md` | Description of angular, links to contributing and testing | | `docs/react/README.md` | Description of react, links to contributing and testing | | `docs/react-router/README.md` | Description of react-router, links to contributing and testing | | `docs/vue/README.md` | Description of vue, links to contributing and testing | | `docs/vue-router/README.md` | Description of vue-router, links to contributing and testing | | `docs/vue-router/testing.md` | Testing file for vue-router, populated from vue-router's main README | **Does not** add any files for `angular-server`. This is because the README is essentially empty and there is no testing in that directory. I can add blank files if we want to have something to add to later. **Does not** migrate the content of the packages' root `README.md` files. These files are used for their npm package descriptions so we should not edit them. ## Hosting Documentation We can (and should) host these files using GitHub Pages. I have duplicated them in a personal repository to see how this would look: [docs-consolidation](https://brandyscarney.github.io/docs-consolidation/). Doing so will require some formatting fixes (see [Sass Guidelines](https://brandyscarney.github.io/docs-consolidation/sass-guidelines.html#-reusable-values)) so I did not publish them now but we can easily enable GitHub pages by toggling a setting in this repository. ## Other information - Verify that no documentation files were missed in the migration - You can use these commands to search for `*.md` files in a directory: - `find core/src -type f -name "*.md" -print` - `find packages/angular -type f -name "*.md" -not -path "**/node_modules/*" -print` - I did add some redirect links in some of the existing markdown files so they might still exist for that reason - We should probably break up the contributing + component guide documentation into smaller files, such as including best practices, but I wanted to get everything in the same place first - The contributing has sections on each of the packages that we could move to that package's docs folder: https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#core --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
|||
| 51c729eafc |
refactor(angular, react, vue): add missing test app msg (#28951)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The packages, Angular, React, and Vue, will accept any `app_dir` parameter when passing it to the build script. This can lead to a user to entering a directory that doesn't exist within `test/apps`. If this happens, then the build folder will include an incomplete test app. For example: 1. `./build ng13` 2. This creates a `build/ng13` folder, but the folder only contains the contents from the `base` folder. This causes it to be incomplete. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Provides a message that the provided app directory doesn't exist. - Does not create the incomplete app when an invalid app directory is given. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 4. Update the BREAKING.md file with the breaking change. 5. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A |
|||
| 7f3273f0b2 |
docs(angular test app): include instructions for updating nightly build (#28948)
Issue number: None --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> People adding a new Angular test app don't know they need to update the Stencil nightly build. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Documentation exists for adding a new Angular version to the Stencil nightly build when creating a new Angular test app.. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information This is related to #28945 <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
|||
| bf34e0e247 |
test: migrate form control usages to modern syntax (#28897)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Several tests were still using the legacy form syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrated tests in `core`, `angular`, and `vue` to use the modern form syntax (`react` did not have form controls). I opted not to migrate `item/test/highlight` and `item/test/counter` because those tests are going to be removed in the future once the deprecate item APIs are removed. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> |
|||
| fd36b953d6 | chore: sync | |||
| adb01e2516 |
refactor(angular): loading controller uses correct core instance (#28543)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? As a takeaway from our learning session about a menuController bug in Ionic Angular, the team would like to update our other providers to use the same architecture as the menuController to prevent this kind of issue from happening again in the future. We also noticed that the common provider does not provide much value and it's easier to just have two separate implementations in `src` and `standalone`. (There wasn't much code we could de-duplicate) ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the common loading provider in favor of separate ones in src/standalone ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 1a135ebd76 |
refactor(angular): alert controller uses correct core instance (#28538)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? As a takeaway from our learning session about a menuController bug in Ionic Angular, the team would like to update our other providers to use the same architecture as the menuController to prevent this kind of issue from happening again in the future. We also noticed that the common provider does not provide much value and it's easier to just have two separate implementations in `src` and `standalone`. (There wasn't much code we could de-duplicate) ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the common alert provider in favor of separate ones in src/standalone ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 9d57758e3e |
refactor(angular): picker controller uses correct core instance (#28521)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? As a takeaway from our learning session about a menuController bug in Ionic Angular, the team would like to update our other providers to use the same architecture as the menuController to prevent this kind of issue from happening again in the future. We also noticed that the common provider does not provide much value and it's easier to just have two separate implementations in `src` and `standalone`. (There wasn't much code we could de-duplicate) ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the common picker provider in favor of separate ones in src/standalone ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 093c671e3e |
test(angular): remove routing waits in tests (#28532)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Our Angular E2E tests are brittle because they rely on arbitrary `cy.wait` calls to account for asynchronous routing. This leads to flaky tests on CI and seemingly random test failures when we make adjustments to the Ionic Anguar routing integration (see: https://github.com/ionic-team/ionic-framework/pull/28188) Additionally, our test execution for the navigation tests is quite slow because transitions are enabled. As a result, we need to wait hundreds of ms per test just for the transitions to finish. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated the `testStack` command to use a new `getStack` [Cypress query](https://docs.cypress.io/api/cypress-api/custom-queries). These queries come with automatic retrying built-in. By leveraging this query in the `testStack` command, we can avoid the arbitrary waits. - Added `ionic:_testing=true` query strings to the navigation tests. This causes Ionic to disable any transitions so the tests execute faster. - Removed most of the arbitrary `cy.wait` calls. I kept the swipe to go back `cy.wait` -- I wasn't quite sure how to reduce flakiness on that one. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 04d32b6d68 |
chore: adds angular test app for v17 (#28513)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> There is no Angular v17 test app. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> There is an Angular v17 test app. New overrides: - angular.json: `browserTarget` was changed to `buildTarget` and to replace `@nguniversal` with `@angular/ssr` and `@angular-devkit/build-angular` - server.ts: Replace uses of `@nguniversal` with `@angular/ssr` New change to base: - polyfills.ts: Import [changed](https://github.com/angular/angular/blob/main/CHANGELOG.md#zonejs) from `import 'zone.js/dist/zone';` (this change is supported for all versions of Angular that we support, so should be changed in the base file) All other files were duplicated from their v16 counterparts. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| c5dd622bbe |
refactor(angular): action sheet provider imports correct instance from core (#28474)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> As a takeaway from our learning session about a menuController bug in Ionic Angular, the team would like to update our other providers to use the same architecture as the menuController to prevent this kind of issue from happening again in the future. We also noticed that the common provider does not provide much value and it's easier to just have two separate implementations in `src` and `standalone`. (There wasn't much code we could de-duplicate) ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the common action sheet provider in favor of separate ones in src/standalone ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 11fd074972 | Merge remote-tracking branch 'origin/main' into sp/sync-feature-7-6-with-main | |||
| 3b6e6318bf |
fix(angular): inputs on standalone form controls are reactive (#28434)
Issue number: resolves #28431
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
My previous attempt at fixing
https://github.com/ionic-team/ionic-framework/issues/28358 caused inputs
to no longer be correctly proxied to the underlying components. This was
an attempt to work around an underlying ng-packagr bug (see linked
thread for more info).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I decided it would be best to continue using `ProxyCmp` (since we know
that works) and find an alternative to working around the ng-packagr
bug. I spoke with the Angular team, and they recommended pulling the
provider into its own object. `forwardRef` is now required since we are
referencing the component before it is declared.
- Revert
|
|||
| 0854a11a25 |
fix(angular,vue): range form value updates while dragging knob (#28422)
Issue number: Resolves #28256 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In the form integrations for Angular and Vue, the value of a range does not update while the knob is actively being dragged, only when the knob is released. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The form integrations now update the range's value when the `ionInput` event fires, rather than `ionChange`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I wasn't sure how to add reliable automated tests for this behavior. The difference only applies when actively dragging the knob, and we've had issues with such gestures being flaky in the past. I did add value displays to the test apps so the behavior can be manually tested. |
|||
| 90acad1837 |
fix(angular): NavController works with nested outlets (#28421)
Issue number: resolves #28417
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The common `IonRouterOutlet` was trying to inject another common
`IonRouterOutlet` into `parentOutlet`:
|
|||
| 82d6309ef1 |
fix(angular): remove form control side effects (#28359)
Issue number: resolves #28358
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
|
|||
| fa78676d57 |
fix(angular): do not create duplicate menuController instances (#28343)
Issue number: resolves #28337
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Duplicate instances of `menuController` are being created in
`@ionic/angular`. `ion-menu` registers itself in the `menuController`
from `@ionic/core`, but the `MenuController` from `@ionic/angular` uses
the `menuController` from `@ionic/core/components`. This is how the
overlay providers work too. Normally, this is not a problem. However,
`menuController` caches references to registered menus in each
controller instances:
|
|||
| 57e2476370 |
feat(angular): ship Ionic components as Angular standalone components (#28311)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> **1. Bundle Size Reductions** All Ionic UI components and Ionicons are added to the final bundle of an Ionic Angular application. This is because all components and icons are lazily loaded as needed. This prevents the compiler from properly tree shaking applications. This does not cause all components and icons to be loaded on application start, but it does increase the size of the final app output that all users need to download. **Related Issues** https://github.com/ionic-team/ionicons/issues/910 https://github.com/ionic-team/ionicons/issues/536 https://github.com/ionic-team/ionic-framework/issues/27280 https://github.com/ionic-team/ionic-framework/issues/24352 **2. Standalone Component Support** Standalone Components are a stable API as of Angular 15. The Ionic starter apps on the CLI have NgModule and Standalone options, but all of the Ionic components are still lazily/dynamically loaded using `IonicModule`. Standalone components in Ionic also enable support for new Angular features such as bundling with ESBuild instead of Webpack. ESBuild does not work in Ionic Angular right now because components cannot be statically analyzed since they are dynamically imported. We added preliminary support for standalone components in Ionic v6.3.0. This enabled developers to use their own custom standalone components when routing with `ion-router-outlet`. However, we did not ship standalone components for Ionic's UI components. **Related Issues** https://github.com/ionic-team/ionic-framework/issues/25404 https://github.com/ionic-team/ionic-framework/issues/27251 https://github.com/ionic-team/ionic-framework/issues/27387 **3. Faster Component Load Times** Since Ionic Angular components are lazily loaded, they also need to be hydrated. However, this hydration does not happen immediately which prevents components from being usable for multiple frames. **Related Issues** https://github.com/ionic-team/ionic-framework/issues/24352 https://github.com/ionic-team/ionic-framework/issues/26474 ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic components and directives are accessible as Angular standalone components/directives ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Associated documentation branch: https://github.com/ionic-team/ionic-docs/tree/feature-7.5 --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Sean Perkins <sean@ionic.io> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Maria Hutt <maria@ionic.io> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> |
|||
| de1a4c50bb |
test: update test apps to cypress 13 (#28212)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> CI is failing for Cypress apps due to https://github.com/cypress-io/cypress/issues/27804#issuecomment-1721476731. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - All Cypress test apps have been updated to Cypress 13.2.0 which is not affected by this issue. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 63cb96831e |
docs(angular): update README for clear directory paths (#28098)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> - The instructions doesn't provide clear directory paths for syncing local changes. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The instructions has clear directory paths for syncing local changes. - Switched to the `[!NOTE]` for notes. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A |
|||
| 77707b8c1e |
fix(angular): min/max validator for ion-input type number (#27993)
Issue number: Resolves #23480 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Angular's min/max validators do not work with `ion-input[type=number]`. Using the built-in validators with `ion-input` will not update the control status to invalid, reflect the `ng-invalid` class or report the correct errors. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `IonicModule` now includes two additional directive declarations that extend Angular's built-in min/max validators and target the `ion-input` component when using `type="number"`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> |
|||
| 90f41243d9 |
feat(angular): support binding routing data to component inputs (#27694)
Issue number: Resolves #27476 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic Angular application on Angular v16 cannot use the [`bindToComponentInputs`](https://angular.io/api/router/ExtraOptions#bindToComponentInputs) feature to assign route parameters, query parameters, route data and route resolve data to component inputs. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic Angular developers can use the option on `RouterModule.forRoot` to enable the Angular feature for binding the route snapshot data to the component inputs. **Modules** ```ts @NgModule({ imports: [ RouterModule.forRoot([/* your routes */], { bindToComponentInputs: true // <-- enable this feature }) ] }) export class AppModule { } ``` **Standalone** ```ts import { withComponentInputBinding } from '@angular/router'; bootstrapApplication(App, { providers: [ provideRouter(routes, //... other features withComponentInputBinding() // <-- enable this feature ) ], }); ``` With this feature enabled, developers can bind route parameters, query parameters, route data and the returned value from a resolver to input bindings on their component. For example, with a route configuration of: ```ts RouterModule.forChild([ { path: ':id', data: { title: 'Hello world' }, resolve: { name: () => 'Resolved name' }, loadComponent: () => import('./example-component/example.component').then(c => c.ExampleComponent) } ]) ``` and a component configuration of: ```ts @Component({ }) export class ExampleComponent { @Input() id?: string; @Input() title?: string; @Input() name?: string; @Input() query?: string; } ``` Navigating to the component with a url of: `/2?query=searchphrase` The following would occur: - `id` would return `2` - `title` would return `Hello world` - `name` would return `Resolved name` - `query` would return `searchphrase` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This PR will need to be targeted to a minor release once a design doc is approved by the team. Dev-build: `7.1.3-dev.11689276547.129acb40` |
|||
| 32bc33ed28 |
refactor(angular): move to packages directory (#27719)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `angular` directory sits at the root of the project instead of in `packages` with all the other JS Framework integrations. This does not cause any functional issues with Ionic, but it is confusing since integrations are not in a consistent place. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Moves the `angular` directory to `packages/angular` Note: Most files should remain unchanged. The only files I changed are the files that had direct paths to the old `angular` directory: 1. Removes the `angular` path in `lerna.json`. This is now covered by `packages/*` 2. Updated the angular file path in `.gitignore` 3. Updates the path to the angular package in `stencil.config.ts` for the Angular Output Targets 4. Updates some of Angular's sync scripts to correctly get the core stylesheets as well as the core package. 5. Updates the test app sync script to correctly sync core and angular-server ~I'm not entirely sure why GitHub thinks https://github.com/ionic-team/ionic-framework/pull/27719/files#diff-f5bba7e7c7c75426e2b9c89868310cb03890493b4efe0252adf8d12cc8398962 is a new file since it exists in `main` here: |
