Detailed explanation of how to remove # sign from URL in Angular2

This time I will bring you a detailed explanation of the operation of removing the # number from the URL in Angular2. What are the precautions for removing the # number from the URL in Angular2. The following is a practical case. Let’s take a look. .

Preface

This article mainly introduces the relevant content about removing the # sign in the URL in Angular2. This is a problem I encountered recently at work. I feel it is necessary to share it with you. I won’t say much below, let’s take a look at the details. Let’s introduce it.

1. Why should it be removed?

• Angular officially pointed out: If there is not enough reason to use hash style (#), try to use the HTML5 mode routing style;

• If the hash style is configured, the deep path in WeChat payment or Angular will still be There will be a 404 problem;

• When you need to use tools such as GA, because you cannot obtain the URL after the # number, a path will be sent to it every time the route is switched;

• '#'A bit ugly.

2. How to remove it?

There are four methods:

• Front-end ngx

• Front-end Apache

• Front-end Tomcat

• GithubPages / Code Cloud Pages 404 page

2.1 Front-end

Add

<base href="/" rel="external nofollow" >

to the head of index.html app.module.ts

import { ROUTER_CONFIG } from './app.routes.ts';
@NgModule({
 imports: [
 ...
 RouterModule.forRoot(ROUTER_CONFIG) 
 // RouterModule.forRoot(ROUTER_CONFIG, { useHash: true } ) 这样写是带#的
 ], 
})

app.routes.ts：

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
export const ROUTER_CONFIG: Routes = [
 {
 ...
 }
];

What happens if you only configure the front end?

If you only configure the front end, the '#' will be removed, but as soon as the page is refreshed, a 404 will appear, indicating an error in path resolution.
Angular is a single-page application that implements the front-end routing function. The backend can no longer control routing jumps and throw all the business logic originally belonging to the backend to the frontend.

• When the user refreshes the page (http://gitee.poetry/life), the request is first submitted to the WebServer background. If the background route does not have routing management for the corresponding page, a 404 error will occur.

• If the user first visits the homepage (http://gitee.poetry) and then jumps to the page (http://gitee.poetry/life), the jump is made by Angular Access to the URL managed by the front desk is normal.

Then we can solve the 404 problem by asking WebServer to forward all routing URLs managed by Angular to index.html, which is the configuration information introduced later.

Thinking: Why is the hash mode not 404?

2.2 ngx configuration

Those with '***' need to configure the nginx.conf file content yourself

server {
 listen 80; #监听的端口号 
 server_name my_server_name; # 服务器名称 ***
 root /projects/angular/myproject/dist; #相对于nginx的位置 ***
 index index.html; #如果index.html存在，就结束查找过程，把这个文件附加到请求的request_uri后面，并且发起一个内部的redirect。
 location / { # / 是匹配所有的uri后执行下面操作
 try_files $uri $uri/ /index.html; #try_files先寻找名为 $uri 文件，没有则寻找 $uri/ 文件，再没有就寻找/index.html
 }
}

try_files detailed explanation:

For example, the request is https://deepthan.gitee.io/poetry/life, $uri is ‘/life’. If neither ‘$uri’ nor $uri/’ is found, it will fall back to the last option of try_files. /index.html initiates an internal "subrequest", which is equivalent to nginx initiating an HTTP Request to https://deepthan.gitee.io/poetry/index.html. This request will be sent by location ~ .php$ { ... } catch, that is, enter the FastCGI handler. The specific URI and parameters are passed to the REQUEST_URI FastCGI and WordPress programs, so are not affected by URI changes.

2.3 Apache

Create a new .htaccess file in the root directory of Apache

RewriteEngine On 
# 如果请求的是现有资源，则按原样执行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule ^ - [L]
# 如果请求的资源不存在，则使用index.html
RewriteRule ^ /index.html

2.4 Tomcat configuration

Tomcat/conf/web.xml文件上添加
<error-page>
 <error-code>404</error-code>
 <location>/</location>
</error-page>

2.5 GithubPages / Code Cloud Pages 404 Page

For github pages or code cloud pages, we cannot configure Github pages directly, but we can add a 404 page when committing. The simple solution is as follows:

We create a new 404.html in the root directory of the project and completely copy the contents of index.html to 404.html. Doing this github pages will still give a 404 response at the appropriate time, and the browser will handle the page correctly and load our application normally.

About this hack: S(GH)PA: The Single-Page App Hack for GitHub Pages

3. What is the difference in principle between using ‘#’ and without ‘#’?

3.1  这个得先说下什么是前端路由：

以前路由都是后台做的，通过用户请求的url导航到具体的html页面，现在我们在前端可以利用 Angular、vue、react等通过配置文件，达到前端控制路由跳转的功能。

前端路由的实现方法：

• 通过hash实现 当url的hash发生改变时，触发hashchange注册的回调（低版本没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。
  使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，我们常说的锚点严格来说应该是页面中的a[name]等元素。

• HTML5的history api操作浏览器的session history实现
  基于history实现的路由中不带#，就是原始的路由

3.2 Angular中的路由策略

angular2提供的路由策略也是基于上面两个原理实现的，可以在@NgModule中通过providers配置或RouterModule.forRoot()配置：

1） 路由中有#

@NgModule({
 imports:[RouterModule.forRoot(routes,{useHash:true})]
})

或

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
 ]
})

HashLocationStragegy

适用于基于锚点标记的路径，比如/#/**，后端只需要配置一个根路由即可。

2） html5路由（无#）

改用 PathLocationStrategy（angular2的默认策略，也就是HTML5路由），使用这个路由的常规路径不带#，这种策略需要后台配置支持，因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器从一个路由跳往另外一个路由或者刷新时就会返回404，需要在服务端里面覆盖所有的路由情况（后端可以通过nginx或者apache等配置）。

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
 {provide: LocationStrategy, useClass: PathLocationStrategy} 
 // 这一行是可选的，因为默认的LocationStrategy是PathLocationStrategy
 ]
})

更改index.html中的base href属性，Angular将通过这个属性来处理路由跳转

<base href="/app/" rel="external nofollow" rel="external nofollow" >

在后端的服务器上，用下面的正则去匹配所有的页面请求导向index.html页面。

we must render the index.html file for any request coming with below pattern

index.html

 
 
 <base href="/app/" rel="external nofollow" rel="external nofollow" >
 
 Loading...
 
 
 

3.3 前端路由优缺点

优点：

1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由做单页面网页就很好的解决了这个问题。

缺点：

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

The above is the detailed content of Detailed explanation of how to remove # sign from URL in Angular2. For more information, please follow other related articles on the PHP Chinese website!