http://localhost:4200/#/dashboard，额外的 '#' 在 url Angular 5

Question

我在 Angular 5 项目中遇到了这个问题。所有使用 localhost 的 URL，甚至在托管时，在域名后跟一个“#”。找不到原因。

app-routing.module.ts 其他组件有子路由

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'new-vendor-registration', component: NewVendorComponent},
  { path: 'new-vendor-card-add', component: NewVendorCardComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent},
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  { path: '', component: DashboardLayoutComponent, data: { title: '' }, children: DASHBOARD_ROUTES },
  { path: '', component: DashboardLayoutComponent, data: { title: '' }, children: USER_ROUTES, canActivate: [AuthGuard] },
  { path: '', component: DashboardLayoutComponent, data: { title: '' }, children: OFFER_ROUTES, canActivate: [AuthGuard] },
  { path: '', component: DashboardLayoutComponent, data: { title: '' }, children: PROMOTION_ROUTES, canActivate: [AuthGuard] }
  // { path: '', component: TwoColumnsLayoutComponent, data: { title: '' }, children: TWO_COLUMN_ROUTES, canActivate: [AuthGuard] },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        TwoColumnsLayoutComponent,
        DashboardLayoutComponent,
        LoginComponent,
        NewVendorComponent,
        NewVendorCardComponent,
        ForgotPasswordComponent
    ],
    imports: [
        BrowserAnimationsModule,
        NgxDatatableModule,
        HttpClientModule,
        FormsModule,
        AppRoutingModule,
        SharedModule,
        NgbModule.forRoot(),
        AngularFireModule.initializeApp(firebaseConfig),
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        MyDatePickerModule,
        TextMaskModule
    ],
    providers: [
        {provide: LocationStrategy, useClass: HashLocationStrategy},
        AuthService,
        AuthGuard,
        VendorService,
        SalesrepService,
        PaymentService,
        SubscriptionService,
        OfferService,
        PromotionService,
        WeatherService,
        Broadcaster
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

非常感谢任何帮助。

Answer 1

这是您看到哈希的原因

{provide: LocationStrategy, useClass: HashLocationStrategy}

在此处了解更多信息：

HashLocationStrategy

你很可能想要这个：

PathLocationStrategy

根据Description

如果您使用 PathLocationStrategy，则必须提供 APP_BASE_HREF 或向文档添加基本元素。此 URL 前缀将是 在生成和识别 URL 时保留。

例如，如果您提供 '/my/app' 的 APP_BASE_HREF 并调用 location.go('/foo')，浏览器的URL会变成 example.com/my/app/foo.

同样，如果您添加到文档并调用 location.go('/foo')，浏览器的URL会变成 example.com/my/app/foo.