Angular 12 Chartjs - диаграммы отображаются только на корневой странице - проблема с маршрутизацией?

Question

У меня есть панель навигации, боковая панель и куча страниц.

Пользователь должен войти в систему, чтобы просмотреть это.

Диаграммы на целевой странице отображаются идеально (окончание URL-адреса "").

Графики на других страницах не появляются. Я скопировал весь код из рабочего компонента в нерабочий компонент. Нет разницы. Графики по-прежнему не появляются.

Недавно я добавил в свой проект HashLocationStrategy.

Некоторое время назад - до добавления этой стратегии расположения - графики работали на всех страницах. Не могу с уверенностью сказать, что именно это дополнение сломало чарты. Я только подозреваю, что это как-то связано с этим дополнением, однако, когда я удаляю его, диаграммы по-прежнему не отображаются. Так что, возможно, я ошибаюсь.

Я искал в Интернете несколько дней. Я пробовал отлаживать свой собственный проект. Ошибок нигде нет.

Итак, без лишних слов, вот мой 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 { };

мой 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,
        }
      ]
}

и мой 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 {}

Рад предоставить что-нибудь еще. Честно даже не уверен, что именно актуально ... весь проект ???

Ссылка GitHub на мой проект.