Angular 12 Chartjs - Charts only appear on root page - routing issue?

Question

I have a navbar, a sidebar, and a bunch of pages.

The user must login in order to view this.

Charts on the landing page appear perfectly (URL ending '').

Charts on any other page refuse to appear. I have copy-pasted the entire code form the working component to the non-working component. No difference. Still no charts appear.

I recently added HashLocationStrategy to my project.

Some time ago - before adding this location strategy - the charts worked on all the pages. I can't say for certain that it was this addition that has broken the charts. I only suspect it has something to do with this addition however when I remove it, the charts still do not show up. So perhaps I am wrong.

I have searched the internet for days. I have tried debugging my own project. There are no errors anywhere.

So, without further ado, here is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// used to create fake backend
import { fakeBackendProvider } from './_helpers';

import { AppRoutingModule } from './app-routing.module';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AppComponent } from './app.component';
import { AlertComponent } from './_components';
import { HomeComponent } from './home';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ToastrModule } from 'ngx-toastr';
import { SidebarModule } from './sidebar/sidebar.module';
import { NavbarModule } from './navbar/navbar.module';
import { OverviewComponent } from './pages/overview/overview.component';
import { MapSuburbComponent } from './pages/map-suburb/map-suburb.component';
import { SuburbOverviewComponent } from './pages/suburb-overview/suburb-overview.component';
import { LocationDetailsComponent } from './pages/location-details/location-details.component';
import { SettingsComponent } from './pages/settings/settings.component';
import { SupportComponent } from './pages/support/support.component';
import { AlertsComponent } from './pages/alerts/alerts.component';
import { ChartsModule } from 'ng2-charts';
import { NgApexchartsModule } from 'ng-apexcharts';
import { BillingComponent } from './pages/billing/billing.component';
import { NgCircleProgressModule } from 'ng-circle-progress';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { ShowHidePasswordModule } from 'ngx-show-hide-password';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        HttpClientModule,
        ChartsModule,
        NgbModule,
        ToastrModule.forRoot(),
        NgApexchartsModule,
        ShowHidePasswordModule,
        SidebarModule,
        NavbarModule,

        NgCircleProgressModule.forRoot({
            // set defaults here
            radius: 100,
            outerStrokeWidth: 10,
            innerStrokeWidth: 10,
            outerStrokeGradient: true,
            outerStrokeColor: '#5bf8d3',
            outerStrokeGradientStopColor: '#5bcef8',
            animationDuration: 400,
            showZeroOuterStroke: true,
            innerStrokeColor: '#f2f3f5',
            backgroundStroke: "transparent",
            showUnits: false,
            space: 10
        }),
        AppRoutingModule

    ],
    declarations: [
        AppComponent,
        AlertComponent,
        BillingComponent,
        HomeComponent,
        OverviewComponent,
        MapSuburbComponent,
        SuburbOverviewComponent,
        LocationDetailsComponent,
        SettingsComponent,
        SupportComponent,
        AlertsComponent

    ],
    providers: [
        [{ provide: LocationStrategy, useClass: HashLocationStrategy }],

        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

        // provider used to create fake backend
        fakeBackendProvider
    ],
    bootstrap: [AppComponent]
})
export class AppModule { };

my sidebar.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SidebarComponent } from './sidebar.component';

@NgModule({
    imports: [ RouterModule, CommonModule ],
    declarations: [ SidebarComponent ],
    exports: [ SidebarComponent ]
})

export class SidebarModule {
    providers: [
        {
          provide: LocationStrategy,
          useClass: HashLocationStrategy,
        }
      ]
}

and my navbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NavbarComponent } from './navbar.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [ RouterModule, CommonModule, NgbModule ],
    declarations: [ NavbarComponent ],
    exports: [ NavbarComponent ],
    providers: [
        {
          provide: LocationStrategy,
          useClass: HashLocationStrategy,
        }
      ],
})

export class NavbarModule {}

Happy to provide anything else. Honestly not even sure what is exactly relevant... the entire project??

GitHub link to my project.