Image on movie detail page does not get updated when switching to another movie

[jogelin]

Test Case:

Cause:

ngSrc does not allow updating the input dynamically. An error is displayed in the console:

caught Error: NG02953: The NgOptimizedImage directive (activated on an <img> element with the `ngSrc="/nsxnMbkl9Lpc12AmYwKi9SmsJ7e.jpg"`) has detected that `ngSrc` was updated after initialization. The NgOptimizedImage directive will not react to this input change. Changing the `ngSrc` would have no effect on the underlying image element, because the resource loading has already occurred. To fix this, either switch `ngSrc` to a static value or wrap the image element in an *ngIf that is gated on the necessary value.
    at postInitInputChangeError (common.mjs:6416:12)
    at common.mjs:6435:19
    at Array.forEach (<anonymous>)
    at assertNoPostInitInputChange (common.mjs:6425:12)
    at NgOptimizedImage.ngOnChanges (common.mjs:6143:13)
    at NgOptimizedImage.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:2812:14)
    at callHookInternal (core.mjs:3804:14)
    at callHook (core.mjs:3835:9)
    at callHooks (core.mjs:3786:17)
    at executeCheckHooks (core.mjs:3717:5)

Solution:

There is an open issue angular/angular#47813

The alternatives are:

• Set the host attribute on the NgOptimizedImage again (see example in the angular issue above)
• Recreate the view by using <ng-template> + <ng-container> OR a directive like https://github.com/ngehlert/ngx-rerender/blob/main/projects/ngx-rerender/src/lib/ngx-rerender.directive.ts
• Do not use ngSrc because it is for static image
• Any other ideas?

I can make the PR if needed!

[BioPhoton]

Is this also happening in the list page?

[jogelin]

Is this also happening in the list page?

I don't think so.
It is really happening when components are not reloaded on the details page when switching between movies.

[francesco-buscicchio]

The problem is related to angular as far as the topic I have been following for the past few days (angular/angular#47813) the problem has been solved in angular version 16.2. To solve the problem while keeping the current libraries you need to upgrade the project to the new version.

THE RELEASE DATE OF THE VERSION IS 24/07/2023

[jogelin]

The problem is related to angular as far as the topic I have been following for the past few days (angular/angular#47813) the problem has been solved in angular version 16.2. To solve the problem while keeping the current libraries you need to upgrade the project to the new version.

THE RELEASE DATE OF THE VERSION IS 24/07/2023

Correct @francesco-buscicchio, I saw the fix too.
Until now I just fix it by using an ugly hack #203

Waiting for the release to have something cleaner!

[francesco-buscicchio]

The problem is related to angular as far as the topic I have been following for the past few days (angular/angular#47813) the problem has been solved in angular version 16.2. To solve the problem while keeping the current libraries you need to upgrade the project to the new version.
THE RELEASE DATE OF THE VERSION IS 24/07/2023

Correct @francesco-buscicchio, I saw the fix too. Until now I just fix it by using an ugly hack #203

Waiting for the release to have something cleaner!

I too will wait for the new problem resolution and possibly evaluate what happens to the dependencies when I install the new version. If everything remains normal I will try to make a pull request for the project. Hopefully everything will be fine

[BioPhoton]

Could we write a user-flow for it?

The setup is now completely refactored and good DX.

[jogelin]

@francesco-buscicchio can you let me know if you are taking care of removing the hack + user flow?
The packages are already up-to-date

[francesco-buscicchio]

As for removing the hack and defining the user flow, I would suggest waiting for the release of Angular 16.2, scheduled for July 24, 2023. Once Angular 16.2 is available, we could create a separate branch and test it to make sure everything is working properly. I will personally take care of this task as soon as Angular 16.2 is released, and I will have a few hours available to run the necessary tests and ensure that everything is in order. @jogelin @BioPhoton