Hash location strategy not working — Angular 4 — NgxChartsModule broken the hash location strategy

Question

I'm developing an Angular 4 application. I intended to use the HashLocationStrategy but its not working(# is not appearing in the URLs). Below is my app routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardPage } from './dashboard-page/component';
import { AccountPage } from './acct-page/component';

const appRoutes: Routes = [
    { path: 'dashboard', component: DashboardPage },
    { path: 'accounts/:number', component: AccountPage},
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true })],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

Below is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { DataTableModule } from "angular2-datatable";
import {  
  MatToolbarModule, MatToolbarRow, MatIconModule, MatSidenavModule, MatListModule, MatButtonModule, 
  MatCardModule, MatMenuModule, MatGridListModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,
  MatTableModule, MatTabsModule, MatCheckboxModule
} from '@angular/material';
import { MatSelectModule } from '@angular/material/select';
import {MatExpansionModule} from '@angular/material/expansion';

import { AppComponent } from './app-component/app.component';
import { AppRoutingModule } from './app-routing.module';

import { DashboardPage } from './dashboard-page/component';
import { AccountPage } from './acct-page/component';


@NgModule({
    declarations: [
        AppComponent, DashboardPage, BreadcrumbComponent, AccountPage
    ],
    imports: [
        AppRoutingModule, RouterModule, BrowserModule, HttpClientModule, BrowserAnimationsModule, MatToolbarModule, MatIconModule,
        MatSidenavModule, MatListModule, MatButtonModule, MatCardModule, MatInputModule, CommonModule,
        MatMenuModule, MatGridListModule, DataTableModule, FormsModule, ReactiveFormsModule, MatDatepickerModule, 
        MatNativeDateModule, MatTableModule, MatTabsModule, MatExpansionModule, MatCheckboxModule, MatSelectModule, NgxChartsModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [XMLContentDialog]
})
export class AppModule {
}

I used RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true }) for enabling the hash location strategy, but its not working. Am I missing something here?

[EDIT]

Updated 'title' to reflect the root cause

Answer 1

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

[CREDIT] https://github.com/swimlane/ngx-charts/issues/601

Answer 2

Apparently, when you lazy-load modules, Imports order matters! (Shocked as you!)

move - AppRoutingModule to the bottom and you've got yourself a solution.

ie

imports: [
    // ... all app modules...
   , AppRoutingModule
],

Answer 3

int your app.module.ts

import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
import { RouteReuseStrategy } from '@angular/router'
...
 providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },...]

Answer 4

Update your app.module.ts file with following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { DataTableModule } from "angular2-datatable";
import {  
  MatToolbarModule, MatToolbarRow, MatIconModule, MatSidenavModule, MatListModule, MatButtonModule, 
  MatCardModule, MatMenuModule, MatGridListModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,
  MatTableModule, MatTabsModule, MatCheckboxModule
} from '@angular/material';
import { MatSelectModule } from '@angular/material/select';
import {MatExpansionModule} from '@angular/material/expansion';

import { AppComponent } from './app-component/app.component';
import { AppRoutingModule } from './app-routing.module';

import { DashboardPage } from './dashboard-page/component';
import { AccountPage } from './acct-page/component';


@NgModule({
    declarations: [
        AppComponent, DashboardPage, BreadcrumbComponent, AccountPage
    ],
    imports: [
        AppRoutingModule, BrowserModule, HttpClientModule, BrowserAnimationsModule, MatToolbarModule, MatIconModule,
        MatSidenavModule, MatListModule, MatButtonModule, MatCardModule, MatInputModule, CommonModule,
        MatMenuModule, MatGridListModule, DataTableModule, FormsModule, ReactiveFormsModule, MatDatepickerModule, 
        MatNativeDateModule, MatTableModule, MatTabsModule, MatExpansionModule, MatCheckboxModule, MatSelectModule, NgxChartsModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [XMLContentDialog]
})
export class AppModule {
}

Hope it will help.