0

I've an old application that is at Java 1.6, Servlet 2.5 and deployed as WAR on a Websphere Application Server 7.x version. Now, I'm trying to add a newly written page with Angular2 framework and typescript.

My web.xml has the following servlet mapping.

<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>

In our existing application, we pass GET requests with a query parameter to our servlet to address redirection.

http://localhost:9081/rootContext/MyControllerServlet?brand=brand1 http://localhost:9081/rootContext/MyControllerServlet?brand=brand2 and so on. To this, we have to add the newly created Angular2 page when the brand is brand3. So, http://localhost:9081/rootContext/MyControllerServlet?brand=brand3 should redirect to an Angular2 page.

MyControllerServlet.com

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

This was working good with the existing pages which are all JSPs. The newly added Angular2 page is called brand3.jsp with the following configuration.

webpack-dist-conf.js

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

The output block looks like this.

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

The publicPath was added as the main*.js and vendor*.js were giving 404 without the root context.

The routes.ts has the following root configuration

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

The challenge is when we redirect to brand3.jsp, we get a 404 with the following error.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'rootContext/MyControllerServlet' Error: Cannot match any routes. URL Segment: 'rootContext/MyControllerServlet'

This redirection worked pretty good earlier, when the page was developed with Angular 1.6 version. We didn't even needed publicPath for rendering the main*.js and vendor*.js which are in the same folder of capmf.jsp.

The problem started arising only after upgrading to TypeScript and Angular2.

I've read that the Angular2 routes requires some server side configuration. To that effect, I have tried using tuckey's UrlRewriteFilter with following configuration.

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>

I know that URL rewriting is working as I could see debug statements. However, I haven't used it before and not sure, if I have configured it properly.

Additional note - We are using Maven3 to build the application and for Angular pages we are using 

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

The question I have are -

  • Is this happening because of tag? I'm not able to change the base href tag using the npm plugins. I get not a constructor error with base-href-webpack-plugin and webpack-base-href plugin
  • Is publicPath the right way to deal when rootContext is not getting added for src javascript files?
  • What else can I do to avoid the 404 error for brand3.jsp?
4

1 回答 1

0

Adding the context root in the base href was the right solution. 

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

After adding the base href corrected, there was no need for publicPath in the output block as well as the JS files were also found and did not give 404.

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

URL Rewriting is still required for getting the system to work if you refresh the page. It had nothing to do with the 404 we were getting when the base href tag was missing

于 2017-05-12T18:58:53.663 回答