Angular 5部署至Tomcat后更新不生效问题求助

Hey there, let's troubleshoot why your Angular 5 app's latest updates aren't showing up on Tomcat after redeployment—I’ve dealt with this exact headache before, so here are the most reliable fixes to try out:

1. Bypass Browser Cache First #

More often than not, the issue is just your browser hanging onto old static files (JS/CSS bundles).

• Try a hard refresh: press Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac) to force the browser to skip cached resources and load everything fresh.
• For testing, you can also disable cache entirely in your browser's DevTools: open the Network tab and check the "Disable cache" box (make sure DevTools is open while you refresh).

2. Add Hashes to Angular Build Outputs #

Angular 5 builds produce static files with fixed names (like main.bundle.js) by default—this makes browsers and Tomcat cache them aggressively. Fix this by enabling filename hashing:

• Open your project’s .angular-cli.json file (this is the config file for Angular 5; later versions use angular.json).
• Find the apps array, and add "outputHashing": "all" to your app’s configuration:

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "outputHashing": "all",
    // ... rest of your app config
  }
]

• Rebuild your app with ng build --prod, then redeploy the new dist folder. Now every build will generate files with unique hash suffixes (e.g., main.abc123.bundle.js), so old cached files won’t interfere.

3. Clear Tomcat’s Internal Cache #

Tomcat keeps its own cache of compiled and static resources, which might be holding onto old versions:

• Stop the Tomcat service first.
• Delete the work folder in your Tomcat installation directory—this stores temporary compiled files that can cause stale content.
• Optional: Check your conf/context.xml for caching settings. If you see something like:

<Resources cachingAllowed="true" cacheMaxSize="100000" />

You can set cachingAllowed="false" temporarily to test if that’s the culprit, or adjust the cache size/expiry rules for production.

• Restart Tomcat and redeploy your updated dist files.

4. Ensure Full File Replacement During Deployment #

Sometimes partial file overwrites happen (due to permissions or incomplete transfers), leaving old files behind:

• Before redeploying, delete all existing files in your Tomcat webapps directory (e.g., if you’re deploying to the ROOT folder, empty the ROOT directory completely).
• Then copy the entire contents of your new dist folder into the webapps directory—don’t just drag-and-drop to overwrite, as some files might fail to replace.

5. Configure Tomcat’s Static Resource Expiry #

Set up cache control headers in Tomcat to tell browsers when to refresh resources:

• Open conf/web.xml in your Tomcat installation.
• Find the default servlet configuration, and add a cacheControl init parameter:

<servlet>
    <servlet-name>default</servlet-name>
    <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
    <init-param>
        <param-name>cacheControl</param-name>
        <param-value>max-age=3600, must-revalidate</param-value>
    </init-param>
    <!-- ... rest of the servlet config -->
</servlet>

This sets a 1-hour expiry for static resources—after that, browsers will check with Tomcat for updated files instead of using cached versions.

内容的提问来源于stack exchange，提问作者Jagan S