Change hash-url to hash-bang url using angular4

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