問題：Angular2設(shè)置路由，部署后刷新后Tomcat直接出來404。
開篇題外話：
從來只逛博客，贊都懶得點的人突然開始寫博客校焦。只是因為最近接觸了Angular2，網(wǎng)上資源太少统倒，之前又沒有Angular1的基礎(chǔ)寨典，真是舉步維艱，記錄下自己艱辛的歷程房匆。同時公司沒有建立知識庫博客等相關(guān)的工具耸成，在此方便交流下，還有上班些博客其實不當誤工作的 _ (代碼部分也不涉及公司業(yè)務(wù))浴鸿。已經(jīng)研究了一個星期井氢，前面遇到的諸多問題后續(xù)爭取不上。
一赚楚、開發(fā)環(huán)境：
1毙沾、后臺前端
Maven + Spring + SpringMVC + Mybatis
Spring:spring-4.0.2.RELEASE
SpringMVC:spring-webmvc-4.0.2.RELEASE
Mybatis:mybatis-3.2.6
開發(fā)工具：Eclipse Neon Release (4.6.0)
2、前臺框架
Angular2 + Bootstrap 4
Angular:Angular2.1
Bootstrap:Bootstrap v4.0.0-alpha
開發(fā)工具：Eclipse + nodejs + angular-cli
二宠页、問題
angular2 編寫路由后(如下)在npm start后可以正常訪問左胞，但是打包發(fā)布到服務(wù)器（tomcat）刷新后出現(xiàn)404的問題。
const routes: Routes = [
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: 'index', component: IndexComponent },
{ path: 'main', component: MainComponent },
{ path: 'help', component: HelpComponent }
];
三举户、解決方式
分析：angular2 畢竟是客戶端執(zhí)行的烤宙，當直接訪問路由地址時服務(wù)器也不知到底是什么請求，所以就404 俭嘁。
so躺枕，問題來了。
1供填、直接訪問路由地址時服務(wù)器到底訪問的時生么拐云？很簡單，當然是angular的首頁了（我的是index.html）近她。
2叉瘩、訪問路由時，服務(wù)器將地址轉(zhuǎn)發(fā)到angular首頁行不行粘捎？試了下確實可以薇缅，事實證明還是可以正常使用的，至于參數(shù)會不會丟攒磨，還么試驗泳桦，應(yīng)該是沒問題的。
思路這里娩缰，大家隨意灸撰，我是下面這樣做的。
網(wǎng)上也有篇文章提到在web.xml中配置攔截拼坎，導(dǎo)入個jar梧奢，實現(xiàn)跳轉(zhuǎn)的，我沒這樣搞演痒。
由于我后端使用的SpringMVC亲轨，默認是攔截所有的請求，且不帶.do（有強迫癥）鸟顺，上代碼
<!-- web.xml -->
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<!-- 此處可以可以配置成*.do惦蚊，對應(yīng)struts的后綴習(xí)慣 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 自動掃描該包，使SpringMVC認為包下用了@controller注解的類是控制器 -->
<context:component-scan base-package="com.ovit" />
于是各種思想斗爭下開劈了一個新的控制器/web讯嫂，
package com.ovit.framework.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* 用于處理路由
* @author Lichun
*
*/
@Controller
@RequestMapping("/web")
public class WebController extends BaseController {
/**
* 默認處理/web下說有的請求蹦锋，全部轉(zhuǎn)發(fā)到index.html
* @param request
* @param response
*/
@RequestMapping("**")
public void routes(HttpServletRequest request ,HttpServletResponse response) {
request.setAttribute("routes","路由跳轉(zhuǎn)");
try {
// 此處路徑要打兩點，如果直接寫 index.html 會循環(huán)反問/web/index.html 造成死循環(huán)
request.getRequestDispatcher("../index.html").forward(request,response);
} catch (Exception es) {
log.error("路由失敗",es);
}
}
}
路由配置
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { MainComponent } from './main/main.component';
import { HelpComponent } from './help/help.component';
const routes: Routes = [
{ path: '', redirectTo: '/web/index', pathMatch: 'full' },
{ path: 'web/index', component: IndexComponent },
{ path: 'web/main', component: MainComponent },
{ path: 'web/help', component: HelpComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
第一次使用簡書寫博客欧芽，測試能不能修改 - 莉掂，沒有廣告很清爽，寫code很方便Ｇ印Ｔ髅睢库正！
