哈希定位策略不起作用 -- Angular 4 -- NgxChartsModule 破坏了哈希定位策略

Question

我正在开发 Angular 4 应用程序。我打算使用 HashLocationStrategy 但它不起作用（# 未出现在 URL 中）。下面是我的应用程序路由模块：

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 { }

下面是我的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 {
}

我使用 RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true }) 来启用哈希定位策略，但它不起作用。我在这里遗漏了什么吗？

[编辑]

已更新 'title' 以反映根本原因

Answer 1

使用以下代码更新您的 app.module.ts 文件：

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 {
}

希望对您有所帮助。

Answer 2

整合你的app.module.ts

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

Answer 3

事实证明，仅当我们在包含导入 RouterModule 的 App 的 RoutingModule 之后包含 NgxChartsModule 时，才会出现此行为。一旦我将 NgxChartsModule 的导入移动到 AppRoutingModule 之前，它似乎工作正常！

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

Answer 4

显然，当您延迟加载模块时，导入顺序很重要！（和您一样震惊！）

将 - AppRoutingModule 移到底部，您就有了解决方案。

即

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

哈希定位策略不起作用 -- Angular 4 -- NgxChartsModule 破坏了哈希定位策略

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

angular

angular4-router