I encountered a very strange problem in the project today. I used oclazyload to lazily load the angular module. After refreshing the page, I could not return to the previous page by clicking the back button. It is estimated that the lazy loading mechanism was used to destroy the state inside angular. Association, resulting in the inability to return to the previous state (the $stateChangeStart event of clicking the back button ui-routre will not be triggered). Of course, this is just a guess, and the source code has not been explored in depth due to the event relationship.

Solution to the inability to roll back after the angular lazy loading mechanism is refreshed:

By looking at the source code of angular (ionic), we found that there is an onUrlChange method on the $browser service. When we change the url address from outside angular , the event processing function registered in this method will be called, as shown in the following figure:

In this case, you can register a function at the program entrance

//當通過瀏覽器回退/前進按鈕跳轉state時,重新加載頁面,如果用系統(tǒng)state,則不會進入此方法 
$browser.onUrlChange(function (url) { 
//TODO 解析url中的state,使用懶加載去加載state模塊,實現(xiàn)頁面刷新
});

Through this function, you can refresh the page again when going back and forward...

The above is a quick solution to the problem that the Angular lazy loading mechanism cannot be rolled back after refreshing. I hope it is helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles on the quick solution to the problem that Angular’s ??lazy loading mechanism cannot be rolled back after refreshing, please pay attention to the PHP Chinese website!