How to remove # from URL?

[monu]

Hello,

We have purchased the mirage-ng template and the current URL for the template includes "#" symbol in the URL (i.e.: https://www.primefaces.org/mirage-ng/#/uikit/input ); we have used RouterModule.forRoot([...], {useHash: false}); and it is also not removing the # symbol. Please help us to remove # from the PrimeNG Project.

Thanks

[ThoSap]

Hi @monu,

you have to change the Angular LocationStrategy in file src/app/app.module.ts#L275 (mirage-ng@16.0.0) from

        {provide: LocationStrategy, useClass: HashLocationStrategy},

to

        {provide: LocationStrategy, useClass: PathLocationStrategy},

and change the import src/app/app.module.ts#6 from

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

to

import {LocationStrategy, PathLocationStrategy} from '@angular/common';

I hope this helps 👌

The PathLocationStrategy is the default in Angular, maybe the PrimeNG premium templates should change to that and also move to standalone components @cagataycivici
https://angular.io/guide/router#locationstrategy-and-browser-url-styles
Also the PrimeNG docs themselves use the PathLocationStrategy for some time.

[monu]

Thanks, @ThoSap, the issue has been solved

[cagataycivici]

The PrimeNG website uses PathLocationStrategy, by default it requires a server config on prod environment so default was hash. But yeah, path seems more logical for a future update if there is demand. Not sure about stand alone components, we can do a poll and let community decide.

[ThoSap]

A poll would be awesome!

I recently converted freya-ng@16.0.0 to standalone using
ng generate @angular/core:standalone and until now, the developer experience was great and I'm not really missing the import hell of NgModule's.
https://angular.io/guide/standalone-migration

I also added the following to the angular.json so standalone is the default when I run ng generate in lines 11, 14 and 17:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "freya-ng": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": true
        },
        "@schematics/angular:directive": {
          "standalone": true
        },
        "@schematics/angular:pipe": {
          "standalone": true
        }
      },
      ...
    }
  }
}