Menu
I am using Angular 6, I want my app to have a static base URL for the purpose of reverse proxy configuration.
In my index.html I set base Url
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>APM</title>
<base href="/my-base">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<pm-root></pm-root>
</body>
</html>
In my app.module.ts I have the routing table configured
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot([
{ path: "welcome", component: WelcomeComponent },
{ path: "", redirectTo: "welcome", pathMatch: "full" },
{ path: "**", redirectTo: "welcome", pathMatch: "full" }
], { useHash: true })
],
bootstrap: [AppComponent]
})
export class AppModule { }
After I launch the application I noticed the URL is http://localhost:4200/my-base#/welcome, there is a # after my-base.
If I change the code in routing to have useHash: false then the # is after my base URL and becomes http://localhost:4200/my-base/welcome#/welcome
I could not find lots of information what exact the meaning of useHash: false, what is the consequence?
377
//useHash enables the location strategy that uses the URL fragment instead of the history API. ], The HashLocationStrategy add the route path to the hash (#) in the browser's URL. The hash (#) part of the URL is called the hash fragment.
HashLocationStrategylink. A LocationStrategy used to configure the Location service to represent its state in the hash fragment of the browser's URL.
HashLocationStrategy uses the hash fragment part of the URL to store state for the client, it easier to setup and doesn't require any co-operation from the server side but has the downside that it won't work with Angular Universal once that's released.
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties.
The main difference is whether Server is easy to implement the redirect mechanism
useHash: true is easy to implement than useHash: false
when you set useHash: false, it's using PathLocationStrategy, It's using HTML5 pushstate that requires server support
When you enter the Url to Browser
localhost:4200/my-base/welcome/
The server needs to redirect localhost:4200/my-base/welcome/ to your index.html
useHash: true, it's using HashLocationStrategy
you need to add # after your base-href('my-base'), the URL is
localhost:4200/my-base/#/welcome/
The server directly makes a request to localhost:4200/my-base/ to your index.html, It's easy to implement in server side.
Reference
Angular How to work with Server Side(IIS, Nginx) using PathLocationStrategy(useHash: false)
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
