请求指导Angular 4/5应用部署至WebLogic服务器及Tomcat测试问题

Hey there! Let’s tackle your deployment headaches with Angular 4/5 on WebLogic (and that tricky Tomcat test issue too). The 404 errors you’re hitting are almost always related to SPA routing conflicts or incorrect deployment structure—let’s fix this step by step.

First, Let’s Nail the Build Process #

Before deploying, make sure your Angular app is built correctly with the right base path. This is critical for resource loading:

• For Angular 4: Run ng build --prod --base-href /your-app-context/
• For Angular 5: Run ng build --prod --base-href /your-app-context/

What’s --base-href for? It sets the root URL path where your app will live. If you’re deploying to WebLogic’s root context, use / instead of /your-app-context/. Skip this, and your CSS/JS assets will load from the wrong path—hello, 404!

Step 2: Correct Deployment Structure for WebLogic #

Don’t just dump the entire dist folder into WebLogic’s webapp root. Here’s the right way:

1. Open your dist folder and copy all its contents (not the folder itself) into a new directory (let’s call it angular-deploy).
2. Create a WEB-INF folder inside angular-deploy—this is required for WebLogic to recognize it as a valid web app.
3. Add a web.xml file inside WEB-INF (we’ll configure this next to fix routing).
4. Either zip the angular-deploy folder into a WAR file (e.g., angular-app.war) or deploy the folder directly via the WebLogic console.

Step 3: Fix SPA Routing with web.xml #

Angular is a single-page app, so when you refresh a route or type it directly into the browser, WebLogic tries to find a server-side resource (which doesn’t exist)—hence the 404. Add this to your WEB-INF/web.xml to route all missing paths back to index.html:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <!-- Set index.html as the default welcome file -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <!-- Redirect all 404s to index.html so Angular routing takes over -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

Step 4: Deploy via WebLogic Console #

1. Log into your WebLogic admin console (usually at http://your-server:7001/console).
2. Navigate to Deployments > Install.
3. Select your WAR file or angular-deploy folder, then follow the wizard.
4. When prompted, set the context root to match the --base-href value you used during the build (e.g., if you used /my-app/, set the context root to my-app).
5. Start the deployed application, and you should be good to go!

Fixing the Tomcat 404 Test Issue #

Same routing problem applies here. Try this:

1. Copy your dist contents into Tomcat/webapps/your-app-name.
2. Add the same WEB-INF/web.xml config we used for WebLogic (the error-page redirect works for Tomcat too).
3. Alternatively, for Tomcat 8+, use the Rewrite Valve for cleaner routing:
   • Edit Tomcat/conf/server.xml and add <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" /> inside the <Host> tag.
   • Create WEB-INF/rewrite.config with this rule:

     RewriteCond %{REQUEST_PATH} !-f
     RewriteRule ^/(.*)$ /index.html [L]
     

   This tells Tomcat to send any non-file requests to index.html.

Angular 5 Specific Tweaks #

Angular 5 shares almost all deployment logic with Angular 4, but there’s one optional tweak:

• If your assets are hosted on a separate CDN or path, use the --deploy-url flag during build:
  ng build --prod --base-href /my-app/ --deploy-url /my-app/assets/
  This ensures Angular loads your CSS/JS from the correct external path.

Common Mistakes to Avoid #

• Deploying the dist folder itself: WebLogic will treat dist as part of your context path, breaking resource loading. Always deploy the contents of dist.
• Mismatched context root and --base-href: These need to align perfectly to avoid 404s.
• Forgetting the web.xml routing fix: Without this, direct route access or page refreshes will fail.
• Not starting the app: Double-check that your deployment is marked as "Active" in WebLogic.

内容的提问来源于stack exchange，提问作者Akhilesh Mani