I am facing a hash problem in my current project. Interestingly, everything works correctly in the test project. I have searched on Google for solutions but couldn't find any satisfactory answers: Angular2 without hash in the url When I add
{provide: LocationStrategy, useClass: HashLocationStrategy}
It works correctly, but with the hash included. However, when I try to add
{provide: LocationStrategy, useClass: PathLocationStrategy}
It only works on the local version. Unfortunately, the working version doesn't work as expected Is there a way to remove this hash and make it work in my built project?
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MaterialModule} from '../shared/mat.module';
import {UserModule} from './user/user.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {ToolbarComponent} from './toolbar/toolbar.component';
import {HashLocationStrategy, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { TestingRComponent } from './testing-r/testing-r.component';
@NgModule({
declarations: [
AppComponent,
ToolbarComponent,
TestingRComponent
],
imports: [
BrowserModule,
MaterialModule,
UserModule,
BrowserAnimationsModule,
AppRoutingModule
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule {
}
app-routing.module.ts
import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {UserComponent} from './user/user.component';
import {TestingRComponent} from './testing-r/testing-r.component';
const routes: Route[] = [
{path: '', redirectTo: '', pathMatch: 'full'},
{
path: 'auth',
component: UserComponent
},
{
path: 'testing',
component: TestingRComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
user-routing.module.ts
import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {RegistrationComponent} from './registration/registration.component';
import {UserComponent} from './user.component';
import {LoginComponent} from './login/login.component';
import {TestingComponent} from './dynamic-fields/testing/testing.component';
const routes: Route[] = [
{
path: 'auth', component: UserComponent,
children: [
{
path: 'registration',
component: RegistrationComponent
},
{
path: 'login',
component: LoginComponent
},
{
path: 'testing',
component: TestingComponent
}
]
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class UserRoutingModule {
}