問(wèn)題：Angular2設(shè)置路由，部署后刷新后Tomcat直接出來(lái)404。
開篇題外話：
從來(lái)只逛博客，贊都懶得點(diǎn)的人突然開始寫博客。只是因?yàn)樽罱佑|了Angular2，網(wǎng)上資源太少，之前又沒有Angular1的基礎(chǔ)，真是舉步維艱，記錄下自己艱辛的歷程。同時(shí)公司沒有建立知識(shí)庫(kù)博客等相關(guān)的工具，在此方便交流下，還有上班些博客其實(shí)不當(dāng)誤工作的 _ (代碼部分也不涉及公司業(yè)務(wù))。已經(jīng)研究了一個(gè)星期，前面遇到的諸多問(wèn)題后續(xù)爭(zhēng)取不上。
一、開發(fā)環(huán)境：
1、后臺(tái)前端
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、前臺(tái)框架
Angular2 + Bootstrap 4
Angular:Angular2.1
Bootstrap:Bootstrap v4.0.0-alpha
開發(fā)工具：Eclipse + nodejs + angular-cli
二、問(wèn)題
angular2 編寫路由后(如下)在npm start后可以正常訪問(wèn)，但是打包發(fā)布到服務(wù)器（tomcat）刷新后出現(xiàn)404的問(wèn)題。
const routes: Routes = [
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: 'index', component: IndexComponent },
{ path: 'main', component: MainComponent },
{ path: 'help', component: HelpComponent }
];
三、解決方式
分析：angular2 畢竟是客戶端執(zhí)行的，當(dāng)直接訪問(wèn)路由地址時(shí)服務(wù)器也不知到底是什么請(qǐng)求，所以就404 。
so，問(wèn)題來(lái)了。
1、直接訪問(wèn)路由地址時(shí)服務(wù)器到底訪問(wèn)的時(shí)生么？很簡(jiǎn)單，當(dāng)然是angular的首頁(yè)了（我的是index.html）。
2、訪問(wèn)路由時(shí)，服務(wù)器將地址轉(zhuǎn)發(fā)到angular首頁(yè)行不行？試了下確實(shí)可以，事實(shí)證明還是可以正常使用的，至于參數(shù)會(huì)不會(huì)丟，還么試驗(yàn)，應(yīng)該是沒問(wèn)題的。
思路這里，大家隨意，我是下面這樣做的。
網(wǎng)上也有篇文章提到在web.xml中配置攔截，導(dǎo)入個(gè)jar，實(shí)現(xiàn)跳轉(zhuǎn)的，我沒這樣搞。
由于我后端使用的SpringMVC，默認(rèn)是攔截所有的請(qǐng)求，且不帶.do（有強(qiáng)迫癥），上代碼
<!-- web.xml -->
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<!-- 此處可以可以配置成*.do，對(duì)應(yīng)struts的后綴習(xí)慣 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 自動(dòng)掃描該包，使SpringMVC認(rèn)為包下用了@controller注解的類是控制器 -->
<context:component-scan base-package="com.ovit" />
于是各種思想斗爭(zhēng)下開劈了一個(gè)新的控制器/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 {
/**
* 默認(rèn)處理/web下說(shuō)有的請(qǐng)求，全部轉(zhuǎn)發(fā)到index.html
* @param request
* @param response
*/
@RequestMapping("**")
public void routes(HttpServletRequest request ,HttpServletResponse response) {
request.setAttribute("routes","路由跳轉(zhuǎn)");
try {
// 此處路徑要打兩點(diǎn)，如果直接寫 index.html 會(huì)循環(huán)反問(wè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 {}
第一次使用簡(jiǎn)書寫博客，測(cè)試能不能修改 - ，沒有廣告很清爽，寫code很方便！！！
