ActiveReportsJS Report Designer Component is affected by HashLocationStrategy in ASP.NET Boilerplate Angular Application

I followed the instruction in https://www.grapecity.com/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular and made some modifications to integrate the ActiveReportsJS Report Designer in the ASP.NET Boilerplate Angular Application.

The report designer is integrated in src\app\home\home.component.ts and src\app\home\home.component.html in my ASP.NET Boilerplate Angular Application and HashLocationStrategy is applied in src\root.module.ts.

Following are the screenshots of these files.

home.component.html

home.component.ts

root.module.ts

root-routing.module.ts

The problem is that when the HashLocationStrategy is applied in src\root.module.ts and I tried to enter the home page, the page is immediately redirected to the about page. I observed the URL and found out that the URL changed from http://localhost:4200/#/app/home to http://localhost:4200/# and finally to http://localhost:4200/#/app/about. I knew this is due to the routes setting in src\root-routing.module.ts, but why this happened? The home page is actually there, but the application can't even recognize the route.

Meanwhile, I tested the following conditions:

1. When I removed the HashLocationStrategy from the src\root.module.ts, I can enter the home page and the report designer can be rendered. The application did not redirect to the about page.
2. When I applied the HashLocationStrategy in src\root.module.ts and removed all the HTML codes from src\app\home\home.component.html, I can enter the home page and it is a blank page. The application did not redirect to the about page.

Is this problem caused by the report designer itself? How can I make the report designer to render successfully in a page while preserving the HashLocationStrategy? Any help would be appreciated.

The issue was with the designer component. Please update to v2.1.1 which includes a fix for the issue.