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 })来启用哈希位置策略，但它不起作用。我在这里错过了什么吗？

[编辑]

更新了“标题”以反映根本原因

Answer 1

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

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

Answer 2

显然，当你懒加载模块时，导入订单很重要！（感到震惊！）

移动 - AppRoutingModule到底，你已经找到了自己的解决方案。

即

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

Answer 3

使用以下代码更新您的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 4

你的app.module.ts

@Bean
    public Docket productApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.app.allergiesConditions.controller"))
                .paths(PathSelectors.any())
                .build();
    }

哈希位置策略不起作用 - Angular 4 - NgxChartsModule打破了哈希位置策略

4 个答案: