Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: ImageModalComponent breaking browser history

dmeic free asked 4 years ago


Hello,

I am having a problem with ImageModalComponent

The expected behavior would be when i open a view that contains ImageModalComponent and click the browser back button, that it navigates me to the previous page.

*Actual behavior*The actual behavior is that when i click browers back on a view that contains ImageModalComponent it navigates me 2,3 or sometimes even more times back.

*Resources (screenshots, code snippets etc.)*I have identified the code in the ImageModalComponent that could provoke such behavior:

ImageModalComponent.prototype.ngAfterViewInit = /**
 * @return {?}
 */
function () {
    var _this = this;
    // fix(lightbox): resolve problem with not closing lightbox when using back button (both browser and native device)
    // There were a problem, that with opened lightbox, if user have pressed the back button
    // (both physical device button and browser button)
    // the lightbox weren't closed, but the whole application was closed (because of changing the URL).
    if (typeof history.pushState === 'function') {
        history.pushState('newstate', '', null);
        window.onpopstate = (/**
         * @return {?}
         */
        function () {
            if (_this.opened) {
                _this.closeGallery();
            }
            else {
                history.go(-2);
            }
        });
    }
};

Also, I ve read that the accepted solution is to upgrade to the newer version. Since we arent able to upgrade it, i need to ask if there is a workaround or solution for this problem? In addtion we are using angular version 8.2.3.


Arkadiusz Idzikowski staff commented 4 years ago

I'm afraid there is no easy workaround for this problem. We needed to change how certain things work in the internal code of the component.


dmeic free commented 4 years ago

Is it possible to get the earliest version where its fixed? If i want to upgrade to the latest version do i need to upgrade angular to 9+?


Arkadiusz Idzikowski staff commented 4 years ago

This problem should not occur anymore in v8.7.0. You can find more information in our changelog: https://mdbootstrap.com/docs/angular/changelog/#870

The latest version (9.3.1) is not compatible with Angular 8 and you would need to upgrade your Angular version.


dmeic free commented 4 years ago

Is it possible to get the 8.7.0 version? Due to our dependencies we arent able to upgrade to angular 9


Arkadiusz Idzikowski staff commented 4 years ago

You should be able to download it in your MDB profile and then upgrade the version in your project like we explained in the update guide: https://mdbootstrap.com/docs/angular/getting-started/update/#pro (switch to 'zip' tab).

If you use installation from our GitLab server, just use this command and add your private token: npm install git+https://oauth2:<your-auth-token>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#8.7.0 --save


dmeic free commented 4 years ago

Great! is it possible to get the version of mdb-file-upload aswell via npm Ive tried running the command

npm install git+https://oauth2:@git.mdbootstrap.com/mdb/angular/mdb-file-upload.git#8.7.0 --save

but i get an error that the remote project couldnt be found.


Arkadiusz Idzikowski staff commented 4 years ago

Unfortunately, it's not possible. You would need to download the .tgz archive file of the plugin.

https://mdbootstrap.com/plugins/angular/file-upload/#installation


dmeic free commented 4 years ago

Fortunately its working as expected now. Thank you for your support.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: Desktop
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No