Angular4 去掉url中的#，并解决刷新时的404问题_占位符号的博客

为什么要去除？

Angular官方指出：如果没有足够使用hash风格（#）的理由，还是尽量使用HTML5模式的路由风格；
如果配置了hash风格，在微信支付或是Angular的深路径依然会出404的问题；
当你需要使用GA等工具时，由于无法获取#号后的URL，导致每次路由切换都给其发送一个路径；
'#'有点丑。
怎样才能去除？

有四个方法：
前端 + ngx
前端 + Apache
前端 + Tomcat
GithubPages / 码云 Pages + 404 页面
index.html的head里加
<base href="/">
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 = [
如果只配置前端会怎么样？
 
如果只配置前端虽然会去掉’#'但是一刷新页面就404，路径解析上出错了。
 Angular是单页应用，它实现了前端路由功能，后台可以不再控制路由的跳转，将原本属于后端的业务逻辑全部丢给前端。 
用户刷新页面时(http://gitee.poetry/life)，请求是先被提交到了WebServer后台，后台路由没有对应页面的路由管理，就会出现404的错误。 
用户如果是先访问首页(http://gitee.poetry)，然后再跳转到 页面(http://gitee.poetry/life)，则这个跳转是由Angular前台管理的URL，访问是正常的。 
那么我们让WebServer把属于Angular管理的路由URL，都转发到index.html就可以解决404的问题了，也就是后面介绍的配置信息。 
思考：hash模式为什么不会404？ 
Nginx配置
 
带***的是需要自己配置 nginx.conf 文件内容 
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 详细解释：
 
如请求的是https://deepthan.gitee.io/poetry/life, $uri则是‘/life’,如果‘$uri’‘$uri/’都找不到，就会 fall back 到 try_files 的最后一个选项 /index.html发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到https://deepthan.gitee.io/poetry/index.html。这个请求会被 location ~ .php$ { … } catch 住，也就是进入 FastCGI 的处理程序。而具体的 URI 及参数是在 REQUEST_URI 中传递给 FastCGI 和 WordPress 程序的，因此不受 URI 变化的影响。 
Apache
 
Apache的根目录新建一个.htaccess文件 
RewriteEngine On  
# 如果请求的是现有资源，则按原样执行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
RewriteRule ^ - [L]
# 如果请求的资源不存在，则使用index.html
RewriteRule ^ /index.html  
Tomcat配置
 
Tomcat/conf/web.xml文件上添加 
<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>
GithubPages / 码云 Pages + 404 页面
 
对于github pages或码云 Pages来说，我们没办法直接配置Github pages，但可以在commit时添加一个404页。简单的解决方案如下：
 我们在项目的根目录新建404.html，把index.html中的内容完全复制到404.html中就可以了。这样做github pages仍然会在恰当的时候给出一个404响应，浏览器将会正确处理该页，并正常加载我们的应用。 
关于这方面的hack： S(GH)PA: The Single-Page App Hack for GitHub Pages 
带‘#’和不带‘#’原理上有什么区别呢？
 
这个得先说下什么是前端路由：
 
以前路由都是后台做的，通过用户请求的url导航到具体的html页面，现在我们在前端可以利用 Angular、vue、react等通过配置文件，达到前端控制路由跳转的功能。
 前端路由的实现方法： 
 通过hash实现
 当url的hash发生改变时，触发hashchange注册的回调（低版本没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。
 使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，我们常说的锚点严格来说应该是页面中的a[name]等元素。
 
 HTML5的history api操作浏览器的session history实现
 基于history实现的路由中不带#，就是原始的路由
  
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/">
在后端的服务器上，用下面的正则去匹配所有的页面请求导向index.html页面。 
we must render the index.html file for any request coming with below pattern
index.html 
<!doctype html>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/app/">
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>
前端路由优缺点
 
优点：
 1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
 2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由做单页面网页就很好的解决了这个问题。 
缺点：
 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。 
作者：莫莫莫
 链接：https://juejin.im/post/5a39c10351882538d3101129
 来源：掘金
                    为什么要去除？Angular官方指出：如果没有足够使用hash风格（#）的理由，还是尽量使用HTML5模式的路由风格；如果配置了hash风格，在微信支付或是Angular的深路径依然会出404的问题；当你需要使用GA等工具时，由于无法获取#号后的URL，导致每次路由切换都给其发送一个路径；'#'有点丑。怎样才能去除？有四个方法：前端 + ngx前端 + Apache前端 +...
本文中主要介绍了关于Angular2+中去除url中#号的相关内容，这是最近在工作中遇到的一个问题，觉着有必要给大家分享下，下面话不多说了，来一起看看详细的介绍吧。
1. 为什么要去除？
  Angular官方指出：如果没有足够使用hash风格（#）的理由，还是尽量使用HTML5模式的路由风格；
  如果配置了hash风格，在微信支付或是Angular的深路径依然会出404的问题；
  当你需要使用GA等工具时，由于无法获取#号后的URL，导致每次路由切换都给其发送一个路径；
  ‘#’有点丑。
2. 怎样才能去除？
有四个方法：
  前端 + ngx
  前端 + Apache
				原文链接：https://blog.wanvale.com/archives/126/
对前端不是很熟悉，在做SpringBoot+Vue前后端分离项目时，使用vue-router-history去掉url中的“#”后，发现刷新前端或者直接访问url会报404
问题分析
项目的前后端是分别放在不同服务器上的
静态页面使用Nginx部署在服务器A上
SpringBoot项目用jar包方式部署在服务器B上
研究了很久，发现原因在于Vue使用history-mode后，输入URL直接访问或刷新时不会经过ro
				你可以使用 Angular 的 Router 类的 navigate 方法来跳转到另一个路由。你可以使用 Router 类的 url 方法来获取当前路由的 URL。你可以在你的路由配置中设置一个通配符路由，用来匹配所有无法匹配到其它路由的 URL。然后你就可以在通配符路由的组件中处理 404 错误。
示例代码：
import { Router } from '@angular/router';
				AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。通过设置$locationProvider.html5Mode(true)就行了。
1.添加base标签
html lang="zh-CN" ng-app="app">
    base href="/">  //增加base标签
// 省略代码
				将前端代码打包部署到Java服务器中，当跳转到相应路由界面，刷新地址，服务找不到地址页面，所以会报   404 - Page Not Found。
解决方法：只需要将路由转换成哈希值: userHash: true，将路由转化成“#”号的形式
以下两种方式修改路由，使用hash:
1、app.module.ts
imports: [
    RouterModule.forRoot(ro...
import { LocationStrategy, HashLocationStrategy,PathLocationStrategy} from ‘@angular/common’;
路由中配置
providers: [
HttpClient,
// { provide: LocationStrategy, useClass: HashLocationStrategy },//含有#...
				刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么不仔细,写错误的上去,祸害别人吗!!
解决angular2页面刷新后报404错误办法：
配置app.module.ts
import {HashLoc
				在 Angular 中，当浏览器刷新时，默认会跳到 loading 页面。如果发现路由不存在，就会跳到 404 页面。
你可以在 Angular 应用的路由模块中配置这些路由，并在应用的组件中实现对应的视图。
例如，你可以在路由模块中使用如下代码来配置 loading 和 404 页面：
const routes: Routes = [
  { path: &#39;loading&#39;, component: LoadingComponent },
  { path: &#39;404&#39;, component: PageNotFoundComponent },
  // 其他路由
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }
然后，你就可以在组件的模板中使用路由指令来显示这些页面，例如：
<router-outlet></router-outlet>
这样，当用户浏览到对应的路由时，就会显示对应的组件。