amplify-ui
amplify-ui copied to clipboard
FR: Add support for Angular Change detection and "OnPush" mode
Before creating a new issue, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for submitting bug reports.
On which framework/platform are you having an issue?
Angular
Which UI component?
Authenticator
How is your app built?
angular cli (v15) / Node v18.15.0
What browsers are you seeing the problem on?
Firefox, Safari
Which region are you seeing the problem in?
eu-west-1
Please describe your bug.
When using the amplify-authenticator
component inside a component with ChangeDetectionStrategy.OnPush
, nothing is rendered.
What's the expected behaviour?
The amplify-authenticator
component should take care of change detection on its own.
Help us reproduce the bug!
I've setup a sample repository : https://github.com/QuentinFchx/amplify-ui-change-detection
When you serve the project, you should see a blank page : the amplify-authenticator
is not rendered.
As a workaround, you can uncomment the following lines at https://github.com/QuentinFchx/amplify-ui-change-detection/blob/main/src/app/app.component.ts#L24
this.unsubscribe = this.authenticator.subscribe(() => {
this.cdRef.detectChanges();
}).unsubscribe;
AFAIK, the issue seems to come from https://github.com/aws-amplify/amplify-ui/blob/main/packages/angular/projects/ui-angular/src/lib/components/authenticator/components/authenticator/authenticator.component.ts#L89.
I'm not sure what is the purpose of the hubSubject
, but the callback is never called, thus :
- the
detectChanges
in the callback is never called -
isHandlingHubEvent
is never set totrue
, thus thedetectChanges
of theauthenticator
subscription (a few lines below) is never called
Code Snippet
No response
Console log output
No response
Additional information and screenshots
No response