Change hash-url to hash-bang url using angular4 - node.js

Question

I am using angulr4 this is my URL http://localhost/#/login.html I want to change this url to http://localhost/#!/login.html. I found solution for angularjs but not for angular4. I am using "Prerender Node" for SEO regarding this is link https://www.npmjs.com/package/prerender-node
Thanks in advance

Answer 1

What you are after is APP_BASE_HREF. In your routing module app-routing.module.ts add to your module providers array { provide: APP_BASE_HREF, useValue: '!' } and import import { APP_BASE_HREF } from '#angular/common'; at the top of the file. It looks like you are already using HashLocationStrategy.
Example app-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule} from '#angular/router';
import { APP_BASE_HREF } from '#angular/common';
const routes: Routes = [
{ path: '**', redirectTo: '404-not-found' }
];
#NgModule({
imports: [
RouterModule.forRoot(routes, {
useHash: true
})
],
exports: [ RouterModule ],
providers: [
{ provide: APP_BASE_HREF, useValue: '!' }
]
})
export class AppRoutingModule {}
Further reading Angular 4 documentation
PathLocationStrategy:
PathLocationStrategy is a LocationStrategy used to configure the
Location service to represent its state in the path of the browser's
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.
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 <base href='/my/app'/> to the document and call
location.go('/foo'), the browser's URL will become
example.com/my/app/foo.
HashLocationStrategy:
You can go old-school with the HashLocationStrategy by providing the
useHash: true in an object as the second argument of the
RouterModule.forRoot in the AppModule.
APP_BASE_HREF:
... APP_BASE_HREF token represents the base href to be used ...
a string representing the URL prefix that should be preserved when generating and recognizing URLs