ngx-charts changing route behavior

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior When I introduce ngx-charts into my Angular application, my application no longer uses the configured Angular Route “extra” of “/#/”. Instead, the hash is removed from the route, which throws off the server-side rendering of certain pages / templates.

I have confirmed that this behavior is introduced only when I include the NgxChartsModule in my app module.

Expected behavior I would expect that I can include NgxChartsModule without it changing the route behavior.

Reproduction of the problem When I introduce ngx-charts into my Angular application, my application no longer uses the configured Angular Route “extra” of “/#/”. Instead, the hash is removed from the route, which throws off the server-side rendering of certain pages / templates.

What is the motivation / use case for changing the behavior? Allow a single page web-app to work without loading from many different routes.

Please tell us about your environment: macOS 10.12

• ngx-charts version: 6.0 and 6.1

• Angular version: 4.4.3

• Browser: Chrome 61.0, Firefox 55 / 56, presumably all

• Language: Typescript, presumably all

[brianghig]

Following up, it turns out that this behavior only occurs when I include NgxChartsModule after including my App’s RoutingModule that imports the RouterModule. Once I moved the import of NgxChartsModule before the AppRoutingModule, it seems to work fine!

[gappc]

I think I found the culprit: commit edd12467df0aaa0c335508eb1285ab3f68be5a93 sets the LocationStrategy in the ChartCommonModule to PathLocationStrategy.

In case of lazy loaded Angular modules, this seems to prevent the HashLocationStrategy to work properly.

The workaround I use is to explicitly set the location strategy in any of the lazy loaded modules:

@NgModule({
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy,
    }
  ],
})

I’ve provided a fix in this pull request: https://github.com/swimlane/ngx-charts/pull/915