从 Servlet 重定向到 Angular2 页面导致 404答案

【问题标题】：Redirection to Angular2 page from Servlet results in 404从 Servlet 重定向到 Angular2 页面导致 404
【发布时间】：2017-05-01 14:17:31
【问题描述】：

我有一个 Java 1.6、Servlet 2.5 的旧应用程序，并在 Websphere Application Server 7.x 版本上部署为 WAR。现在，我正在尝试使用 Angular2 框架和打字稿添加一个新编写的页面。

我的 web.xml 有以下 servlet 映射。

<servlet>
        <servlet-name>MyControllerServlet</servlet-name>
        <servlet-class>com.company.path.MyControllerServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>MyControllerServlet</servlet-name>
    <url-pattern>/MyControllerServlet</url-pattern>
</servlet-mapping>

在我们现有的应用程序中，我们将带有查询参数的 GET 请求传递给我们的 servlet 以解决重定向问题。

http://localhost:9081/rootContext/MyControllerServlet?brand=brand1 http://localhost:9081/rootContext/MyControllerServlet?brand=brand2 等等。为此，我们必须在品牌为brand3 时添加新创建的Angular2 页面。所以，http://localhost:9081/rootContext/MyControllerServlet?brand=brand3 应该重定向到 Angular2 页面。

MyControllerServlet.com

if(brand.equalsIgnoreCase(BRAND1)){
  response.sendRedirect(BRAND1_PAGE);
}else if(brand.equalsIgnoreCase(BRAND2)){
  response.sendRedirect(BRAND2_PAGE);
}

这对于所有 JSP 的现有页面效果很好。新添加的Angular2页面名为brand3.jsp，配置如下。

webpack-dist-conf.js

new HtmlWebpackPlugin({
   template: conf.path.src('index.html'),                   
   filename: 'brand3.jsp'
})

输出块如下所示。

 output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js',
    publicPath: '${pageContext.request.contextPath}/'
 }

publicPath 被添加为 main*.js 和 vendor*.js 给 404 没有根上下文。

routes.ts 具有以下根配置

{
 path: '',
 redirectTo: 'landingpage',
 pathMatch: 'full'
},
{
 path: 'landingpage',
 component: LandingPageComponent
}

挑战在于，当我们重定向到 brand3.jsp 时，我们会收到 404 并出现以下错误。

ERROR 错误：未捕获（承诺中）：错误：无法匹配任何路由。 URL 段：'rootContext/MyControllerServlet' 错误：无法匹配任何路由。 URL 段：'rootContext/MyControllerServlet'

当页面使用 Angular 1.6 版本开发时，这种重定向在早期工作得很好。我们甚至不需要 publicPath 来渲染位于 capmf.jsp 同一个文件夹中的 main*.js 和 vendor*.js。

问题是在升级到 TypeScript 和 Angular2 后才开始出现的。

我读到 Angular2 路由需要一些服务器端配置。为此，我尝试使用带有以下配置的 tukey 的 UrlRewriteFilter。

web.xml

<filter>
 <filter-name>UrlRewriteFilter</filter-name>
 <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
 <init-param>
  <param-name>logLevel</param-name>
  <param-value>DEBUG</param-value>
 </init-param>
</filter>
<filter-mapping>
 <filter-name>UrlRewriteFilter</filter-name>
 <url-pattern>/*</url-pattern>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
</filter-mapping>

urlrewrite.xml

<rule enabled="true">
    <note>Do not process URL ending at index.html</note>
    <from>contextRoot/brand3.jsp$</from>
    <to last="true">-</to>
</rule>

<rule>
    <from>contextRoot/landingpage</from>
    <to>contextRoot/brand3.jsp</to>
</rule>

我知道 URL 重写正在工作，因为我可以看到调试语句。但是，我以前没有使用过，不确定是否配置正确。

附加说明 - 我们正在使用 Maven3 来构建应用程序，并且对于我们正在使用的 Angular 页面

<groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
<version>1.4</version>

我的问题是——

发生这种情况是因为标签吗？我无法使用 npm 插件更改基本 href 标签。我得到 not a constructor error 使用 base-href-webpack-plugin 和 webpack-base-href 插件
当没有为 src javascript 文件添加 rootContext 时，publicPath 是否是正确的处理方式？
我还能做些什么来避免 brand3.jsp 的 404 错误？

【问题讨论】：

我能够使用 BaseHrefWebpackPlugin 并将标签添加到brand3.jsp。在此之后，无需 publicPath 即可加载 javascript 文件。但是，有一个小问题。默认情况下，路由会附加斜杠。因此，不会加载默认页面。如果我手动删除尾部斜杠，我可以到达着陆页。

标签： url-rewriting angular2-routing websphere-7 html-webpack-plugin servlet-2.5

【解决方案1】：

在基础 href 中添加上下文根是正确的解决方案。

new BaseHrefWebpackPlugin({ baseHref: '${pageContext.request.contextPath}/contextRoot' })

添加base href 更正后，输出块中不需要publicPath，JS文件也找到了，没有给出404。

output: {
 path: path.join(process.cwd(), conf.paths.dist),
 filename: '[name]-[hash].js'
}

如果刷新页面，仍然需要 URL 重写才能使系统正常工作。这与我们在缺少基本 href 标记时得到的 404 无关

【讨论】：