mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Amanda Johnston 07f013c9ac chore(angular): log error when attempting to use reserved prop with modals and popovers (#27491 )

Issue number: resolves #27205

---------

<!-- 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. -->

If an Angular component that makes use of `ModalController` or
`PopoverController` has a property of its own named `modal` or `popover`
respectively, this will collide with an internal reference to the
modal/popover element and cause errors.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

The actual behavior is unchanged, but a console error is logged guiding
the developer on how to fix the 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. -->

I used the original reproduction from the issue to test. Full steps:

1. Clone the repo: https://github.com/Asac2142/expenses
2. Run `git checkout ef95c2e80a9991fe958d628f17ecc4e862c834ef` to get to
the app's state from when the issue was originally posted. Observe that
the component in `src/app/home/create-transaction` has a private prop
named `modal`.
3. Run `npm install`, then install the dev build: `npm install
@ionic/angular@7.0.7-dev.11684263140.15c242cf`
4. Run `ionic serve`. Click the fab button in the lower right. Observe
the console error. If you scroll down in the modal and click the
Category button, this will trigger the originally-reported issue.
5. Rename the private `modal` variable to something else, like `_modal`.
6. Refresh the page and re-open the modal. Note that no error is logged,
and the Category button can be clicked to open another modal without
issue.

2023-05-18 15:57:20 +00:00

scripts

chore(ci): enable npm package provenance (#27263 )

2023-04-24 13:04:10 +00:00

src

chore(angular): log error when attempting to use reserved prop with modals and popovers (#27491 )

2023-05-18 15:57:20 +00:00

test

chore(angular): test app uses v16 dependencies (#27380 )

2023-05-04 19:17:08 +00:00

.eslintignore

feat(virtual-scroll): remove virtual scroll component (#25808 )

2022-08-24 15:42:12 -04:00

.eslintrc.json

feat(virtual-scroll): remove virtual scroll component (#25808 )

2022-08-24 15:42:12 -04:00

.prettierignore

chore(): sync with main

2022-09-30 12:27:17 -04:00

CHANGELOG.md

v7.0.7

2023-05-17 13:02:24 +00:00

ng-package.json

feat(angular,angular-server): angular v14 minimum support (#26822 )

2023-02-22 12:33:49 -05:00

package-lock.json

chore(): update package lock files

2023-05-17 13:02:36 +00:00

package.json

v7.0.7

2023-05-17 13:02:24 +00:00

README.md

chore(repo): update old heroku app links (#27284 )

2023-04-26 15:47:46 +00:00

tsconfig.json

refactor(ci): do not cache node modules (#26265 )

2022-11-14 13:55:46 -05:00

tsconfig.schematics.json

feat(): support ng add (#15323 )

2018-11-27 13:36:59 -05:00

tslint.json

feat(angular): build for angular 12.0 (#23970 )

2021-10-15 16:54:59 -04:00

README.md

@ionic/angular

Ionic Angular specific building blocks on top of @ionic/core components.

License

Testing ng-add in ionic

Pull the latest from main
Build ionic/angular: npm run build
Run npm link from ionic/angular/dist directory
Create a blank angular project

ng new add-test
// Say yes to including the router, we need it
cd add-test

To run schematics locally, we need the schematics-cli (once published, this will not be needed)

npm install @angular-devkit/schematics-cli

Link @ionic/angular

npm link @ionic/angular

Run the local copy of the ng-add schematic

$ npx schematics @ionic/angular:ng-add

You'll now be able to add ionic components to a vanilla Angular app setup.

README.md

@ionic/angular

Related

License

Testing ng-add in ionic