DataGrid seems not to render with dynamic/asynchronous router-outlet

[remshams]

Description

The DataGrid fails to load when the router-outlet rendering a page integrating the DataGrid is dynamically/asynchronously switched e.g. when switching from non login protected to login protected pages (using ng-if).

The following repository showcases the issue (as described in "steps to reproduce")

• master branch has the issue
• fix/named-router-outlet contains the fix we currently have deployed (based on named router outlets)

• igniteui-angular version: 9.1.12
• browser: Chrome (84.0.4147.135), Firefox (80.0)

Steps to reproduce

1. Start the example application from the master branch
2. Open the DevConsole in Chrome/Firefox
3. Click on "Login"

Result

The page does not render and an error occurs in the console.

The issue seems to be that in this specific setup only the "constructor" of the component is called (see log statements in the console) and then the component is immediately destroyed (when the router-outlet is changed due to the ng-if) leading to the error in the "cleanup" method of the DataGrid (when ngOnDestroy is called).

Expected result

The page with the DataGrid should render

Attachments

Short video