aws-amplify / aws-amplify/amplify-ui

FR: Add support for Angular Change detection and "OnPush" mode

Open
#4,899 2 comments 4 reactions 1 assignee Claimed by @esauerbo View on GitHub
Angular Authenticator feature-request
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/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](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#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 to `true`, thus the `detectChanges` of the `authenticator` subscription (a few lines below) is never called

### Code Snippet

_No response_

### Console log output

_No response_

### Additional information and screenshots

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.