This article mainly introduces you to the relevant information on how to remove the # sign in the URL in Angular 2. The article first introduces and analyzes the reasons and methods of removing the # sign in detail, and then demonstrates the removal through sample code. Friends who need it can refer to it
Preface
This article mainly introduces the relevant content about removing the # sign from the URL in Angular2 , this is a problem I encountered at work recently, and I feel it is necessary to share it with everyone. I won’t go into more words below, let’s take a look at the detailed introduction.
1. Why should it be removed?
Angular official points out: If there is not enough reason to use the hash style (#), try to use the HTML5 mode routing style;
If the hash style is configured, 404 problems will still occur in WeChat payment or Angular's deep path;
When you need to use tools such as GA, due to the inability to Obtaining the URL after the # sign will cause a path to be sent to it every time the route is switched;
'#' is 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
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 to the head of
#index.html:import { NgModule } from '@angular/core'; import { Routes } from '@angular/router'; export const ROUTER_CONFIG: Routes = [ { ... } ];
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.
2.2 ngx configuration
With '***', you need to configure the nginx.conf file content yourselfserver { 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 } }
2.3 Apache
Create a .htaccess file in the root directory of ApacheRewriteEngine 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文件上添加404 /
2.5 GithubPages / Code Cloud Pages 404 Page
For github pages or Code Cloud Pages, we cannot directly configure Github pages, 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 Pages3. With '#' and without '# 'What's the difference in principle?
3.1 Let’s first talk about what front-end routing is:
In the past, routing was done in the background, and the user navigated to the URL requested by the user. For specific HTML pages, now we can use Angular, vue, react, etc. on the front end to achieve the front-end control route jump function through configuration files. Implementation method of front-end routing:If hash is used to implement it, # must be included in the URI rules. The content after # in the route is the hash. Strictly speaking, the anchor point we often refer to should be the a[name] and other elements in the page.
Routes implemented based on history without # are the original routes
3.2 Routing strategy in 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将通过这个属性来处理路由跳转
在后端的服务器上，用下面的正则去匹配所有的页面请求导向index.html页面。
we must render the index.html file for any request coming with below pattern
index.html
My App
Loading...
3.3 前端路由优缺点
优点：
1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由做单页面网页就很好的解决了这个问题。
缺点：
使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
The above is the detailed content of How to remove the # sign from the url in Angular2 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
