CODEWITHSUNDEEP
angularroutes
Tuan
Tuan

Reputation: 735

http://localhost:4200/#/dashboard, extra '#' in url Angular 5

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

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

Any help is much appreciated.

Upvotes: 1

Views: 3753

Answers (1)

Ric
Ric

Reputation: 13258

Here is the reason you are seeing the hash

{provide: LocationStrategy, useClass: HashLocationStrategy}

Read more about it here:

HashLocationStrategy

You most likely want this:

PathLocationStrategy

As per the Description

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.

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.

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

Upvotes: 3

Related Questions