Why does Angular CDK remove query parameters when returning back through the browser?

Question

Angular

There is a search that opens in a modal window, model windows are created through cdk overlay. The button for opening the modal search window is located in the header, the search can be opened on any page. Also, the search opens if the link contains parameters (for example, ite.com/mypage?search=my_request). That is, there is an input in the search box where I enter a query (for example, "my query"), click "Find", the link changes to "site.com/mypage?search=my_query", because there is a search parameter, then modal the window is open and the parameter is being searched. The results are displayed in the same modal window. If I click on a result to go to its page, it first goes to the current page without search parameters (site.com/mypage), and then to the one I select in the search results. It creates problems when I want to go back. to search because I have to double-click "back" in the browser. If the link has other parameters that are not related to the modal window, then they are returned when you navigate back, everything is fine.
When I manually change the link in the browser from "site.com/mypage?search=my_request" to any other, follow it, and then go back, everything is fine, I get to the page "site.com/mypage?search=my_request" ".
I tried using this.router.navigate instead of routerLink to follow a link from search results, but it still works the same.
I'm new to Angular, so any information that explains this behavior would help me, and I'd like to know what to do in this case.

Code to open modals if it can be helpful:

public open(code: ModalCode, component, data?: any): void {
        const currentModals = this.event.getValue();
        const existModalIndex = currentModals.findIndex(x => x.code === code);
    
        const overlayRef = this.overlay.create({ height: '100%', width: '100%' });
        const portal = new ComponentPortal(component);
        const popupElementRef = overlayRef.attach(portal);
    
        const newModal: ModalItem = {code, overlayRef, data};
    
        const componentInstance: any & { modalItem: ModalItem } = popupElementRef.instance;
        componentInstance.modalItem = newModal;
    
        if (existModalIndex >= 0) {
          this.close(code, true);
    
          currentModals[existModalIndex] = newModal;
          this.event.next(currentModals);
    
        } else {
          this.event.next([...this.event.getValue(), newModal]);
        }
      }

cdk version 8.2.3, angular version 10.2

Answer 1

You would better show the routing code and how the open method is called, more precisely, how the url parameters are processed.
Perhaps this is due to the setting of the router, for example, there is no setting for the page with a parameter, it goes to the main one, then inside the component, apparently, there is a subscribe on the route and the url parameters are already processed there, navigate occurs, the modal opens. I assume that you just need to add a route with a parameter, and the rest of the logic may not need to be changed.
But it is also possible that there is this extra navigate somewhere. In general, you need to watch a different code, it makes no sense to watch how the modal opens, you need to watch how the transitions are processed.