How to automatically remove '/#/' from the url in Angular 2

Question

I am still very new to Angular 2. I currently have two angular app, both hosting using AWS S3 static hosting solution. In both app, I am sure I did not use HashLocationStrategy or useHash: true. Also in both bucket I set up the redirection rules like below:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com<HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

The odd thing is, for one of the app:

1. when we hit a url in browser such as domain.com/login
2. it will shortly show domain.com/#/login
3. and then back to domain.com/login, and properly load the page

However when I try to do a similar thing to my second app, 1 and 2 still happen, but 3 will not, and the state switches to path '**' instead of path 'reset' which means no path is matched. Here is some code example(deleted some of unrelated part) in my app. for example: if I set url to domain.com/#/reset, and hit enter, the url will remain the same.

app1, app.routes.ts

import { RouterModule } from "@angular/router";
import { AuthGuard } from "./services/auth-guard.service";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { LoginComponent } from './login/login.component';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';

export const CLIENT_ROUTER_PROVIDERS = [
    AuthGuard
];

const routes = [
  { path: 'login', component: LoginComponent },
  { path: 'reset/:token', component: ResetPwdComponent },
  {
    path: '',
    loadChildren: './main/main.module',
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    component: PageNotFoundComponent,
    canActivate: [AuthGuard]
  }
];

export const routing = RouterModule.forRoot(routes);

app1 app.module.ts:

// import Modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2UiAuthModule } from 'ng2-ui-auth';
import { HttpModule } from '@angular/http';
import { DatePipe} from "@angular/common";

// import configs
import {MyAuthConfig, ApiPath, NODE_API_PATH} from './app.config';

// import Components
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LoginComponent } from './login/login.component';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';

// import Routes
import { routing, CLIENT_ROUTER_PROVIDERS } from './app.routes';


@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    LoginComponent,
    ResetPwdComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    routing
  ],
  providers: [
    ErrorHandleService,
    FormHelperService,
    CLIENT_ROUTER_PROVIDERS,
    Pagination,
    DatePipe,
    { provide: NODE_API_PATH, useValue: ApiPath }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app2 app.route.ts

import { RouterModule } from '@angular/router';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes = [
  { path: 'reset', component: ResetPwdComponent },
  {
   path: '**',
   component: PageNotFoundComponent,
  }
];

export const routing = RouterModule.forRoot(routes, {useHash: false});

app2 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routing } from './app.route';
import { AppComponent } from './app.component';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    ResetPwdComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    routing,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my question is what in angular or in aws setting could cause this difference? actually even if I type domain.com/#/ app 1 will remove the /#/ part while app 2 won't.

Answer 1

To remove the hash (#) from your URL, change RouterModule.forRoot(routes, {useHash: false}); to RouterModule.forRoot(routes);