ngx-charts changing route behavior

[brianghig]

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!

[francois-joubert]

I piked up the same behavior. Thanx @brianghig your tip fixed it.

[Moulde]

I had a similar issue. Just posting here if anyone experiences the same.
When i added the BrowserAnimationsModule import in my module, i suddenly had a component render its output to the wrong outlet-router. My login page should render in the outmost router-outlet, but instead it was rendered in the inner outlet-router. It looked like an issue with angular, but I discovered that it was caused by my template being invalid. It was a copy paste from AngularJs, that I forgot to change the syntax of. But it really did manifest itself in a weird way. If anyone experiences any issues, check out the log for other issues, maybe one seemingly isolated error causes other errors.

[tom-mazo]

had the same issue. Likewise, putting the routing module at the very bottom of the imports list fixed the problem.

[marklbarlow]

Has this been looked at any further? Although putting the routing module at the bottom of the imports fixes the issue for explicit navigation it still breaks when using [routerLink]. Unfortunately this is a deal-breaker for us - a shame as ngx-charts looks like a great library.

[jeaber]

I couldn't get location to work either after loading the router in last... My work around was to use route.paramMap instead.

this.route.paramMap.subscribe(params => {

[matthewdfleming]

I didn't notice any other changes to our application yet other than the core issue that including the charts moves the angular app into the html5 router mode. Will report back if I see anything else.. using angular 5.2.9, ngx 7.1.1

[AlexanderKozhevin]

I've the same problem. Extremely weird.

[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

[marjan-georgiev]

Merged the fix, thank you!