我正在开发一个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,CommonModule,DataTableModule,FormsModule,ReactiveFormsModule,MatExpansionModule,MatCheckBoxModule,MatSelectModule,NgxChartsModule ],providers: [],bootstrap: [AppComponent],entryComponents: [XMLContentDialog] }) export class AppModule { }
我使用了RouterModule.forRoot(appRoutes,{enableTracing:false,useHash:true})来启用哈希位置策略,但它不起作用.我在这里错过了什么吗?
[编辑]
更新了“标题”以反映根本原因
解决方法
事实证明,只有在包含导入RouterModule的App的RoutingModule之后包含NgxChartsModule时才会出现此行为.一旦我在AppRoutingModule之前移动了NgxChartsModule的导入,它似乎工作正常!