Rimuovere l'hash dall'url in Angular

Mattepuffo's logo
Rimuovere l'hash dall'url in Angular

Rimuovere l'hash dall'url in Angular

In Angular (al momento uso la versione 11) di default il path ha il simbolo hash (#) che però non mi piace.

Levarlo non è difficile, e adesso vediamo come fare.

L'unica nota è che ancora non so cosa comporti averlo o meno; in ambiente locale funziona tutto.

Cominciamo dalle routes (io le ho impostate nel file app-routing.module.ts):

const routes = [...];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
    ],
    exports: [RouterModule]
})

In sostanza dovete assicurarvi di non avere useHash; nel mio caso era così di default.

Poi nel file app.module.ts:

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [
        // {provide: LocationStrategy, useClass: HashLocationStrategy},
        {provide: LocationStrategy, useClass: PathLocationStrategy},
        ...
    ],
    bootstrap: [AppComponent]
})

In pratica dovete mettere PathLocationStrategy al posto di HashLocationStrategy.

Infine nel file index.html:

<base href="/">

Per me era già così di defaul.

Enjoy!


Share this Post

Commentami!