Скачать или смотреть Solving the Lazy Loaded Routing Problem After Upgrading to Angular 11

A detailed guide on addressing the `Lazy Loaded Routing Issue` in Angular 11, including troubleshooting and solutions.
---
This video is based on the question https://stackoverflow.com/q/64917702/ asked by the user 'Cineris' ( https://stackoverflow.com/u/3670754/ ) and on the answer https://stackoverflow.com/a/65076228/ provided by the user 'Cineris' ( https://stackoverflow.com/u/3670754/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Lazy Loaded Routing Problem after Upgrade to Angular 11

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Navigating the Lazy Loaded Routing Problem After Upgrading to Angular 11

Upgrading libraries and frameworks is often a necessity for developers to enjoy the latest features and performance improvements. However, it can sometimes lead to unexpected issues. One such scenario is the lazy loaded routing problem experienced after upgrading to Angular 11. In this guide, we will delve into this issue, analyze its root cause, and explore the steps taken to resolve it.

Understanding the Problem

When you upgrade to Angular 11, you might encounter a routing problem where lazy-loaded modules do not work as expected. Here are some symptoms associated with this issue:

The child routes do not load properly on the initial page load.

The routing events (RouteConfigLoadStart, RouteConfigLoadEnd, RoutesRecognized) do not trigger in the expected order.

A single click on a link does not load the intended component, while clicking it a second time works smoothly.

This problem was particularly poignant for those using Angular routing with multiple modules, affecting both user experience and application flow.

Analyzing the Setup

Let’s take a closer look at the routing setup that contributed to this problem. The following is a simplified structure of the routing modules:

App Routing Module

[[See Video to Reveal this Text or Code Snippet]]

Dashboard Routing Module

[[See Video to Reveal this Text or Code Snippet]]

App Module

[[See Video to Reveal this Text or Code Snippet]]

App Component Template

[[See Video to Reveal this Text or Code Snippet]]

In this setup, the application is set to power multiple routes, responding dynamically via lazy loading. However, after upgrading to Angular 11, exceptions began to emerge when loading these routes.

Unpacking the Solution

After extensive investigation and testing, a solution was discovered, particularly relevant for those operating in a hybrid environment with server-bound JavaServer Faces (JSF) applications.

Key Insights Gained

The connection between the Angular SPA and the outer application appeared problematic. The use of lazy-loaded routes required careful treatment of shared dependencies.

The application was using ng-build-plus with specific Webpack configurations to define external dependencies.

Removing External Configurations

Here’s where the breakthrough happened:

The Externals configuration that was interfering with routing could be simplified or removed:

[[See Video to Reveal this Text or Code Snippet]]

By taking this configuration out of the SPA build, the loading issue rectified itself. It seemed that how ngx-build-plus handled these externals was complicating matters and causing routing inconsistencies.

Conclusion

In conclusion, if you find yourself facing lazy loading issues after upgrading to Angular 11, consider reviewing your build configurations, specifically focusing on external dependencies. Removing unnecessary external configurations may restore proper functionality to your lazy-loaded routes. This simple adjustment in your build setup can lead to a dramatic improvement in routing behavior, resulting in a far more stable application experience.

Taking caution when migrating to newer versions is key, and understanding the changes introduced can often illuminate solutions to seemingly complex problems. If you have more questions or require further assistance, don't hesitate to reach out!