🟠 Change Detection Bug

Note

This challenge is inspired by a real-life example that I simplified to create this nice challenge.

Information

In this small application, we have a navigation menu to route our application to either BarComponent or FooComponent. However, our application is not loading and no errors are displayed inside the console.

Statement

The goal of the challenge is to debug this application and make it work.

Note

Without knowing the exact reason for the issue, you can “fix” the error and get the program to function. One such approach would be to memoize getMenu. The application might work again, but make sure you really understand the problem and its consequences. Making it work isn’t always enough; fixing this bug in the wrong way can cause a loss of performance or lead to other problems later on.

Hints

Hint 1

If you comment out routerLinkActive="isSelected" inside NavigationComponent, the application loads correctly.

Hint 2

If you open the RouterLinkActive source code and go to line 196, Angular is calling this.cdr.markForCheck inside a microTask, which triggers a new CD cycle. If you comment out this line, the application loads again, however, the bug should not be fixed by changing the Angular source code. 😅😯