http：// localhost：4200 /＃/ dashboard，网址Angular 5中的额外“＃” [英] http://localhost:4200/#/dashboard, extra '#' in url Angular 5

问题描述

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

I'm having this issue with an Angular 5 project. All URL using localhost or even when hosted, a '#' is followed after the domain name. Can't find a reason for this.

app-routing.module.ts
还有其他组件的子路线

app-routing.module.ts There are children routes for other components

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

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

非常感谢任何帮助。

推荐答案

这是您看到哈希的原因

{provide: LocationStrategy, useClass: HashLocationStrategy}

在此处了解更多信息：

HashLocationStrategy

您最可能希望这样做：

You most likely want this:

PathLocationStrategy

根据说明

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

If you're using PathLocationStrategy, you must provide a APP_BASE_HREF or add a base element to the document. This URL prefix that will be preserved when generating and recognizing URLs.

例如，如果您提供的APP_BASE_HREF为'/ my / app'并调用
location.go（'/ foo'），浏览器的网址将变为
example.com/my/app/foo。

For instance, if you provide an APP_BASE_HREF of '/my/app' and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

如果您将其添加到文档中并调用
location.go（'/ foo'），浏览器的URL将变为
example.com/my/app/foo。

Similarly, if you add to the document and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

这篇关于http：// localhost：4200 /＃/ dashboard，网址Angular 5中的额外“＃”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！