Angular 7 PWA部署后出现Manifest获取失败(404)错误求解决方案

Hey, I’ve dealt with this exact frustrating 404 issue when deploying Angular 7 PWAs before—let’s break down the most common fixes that resolved it for me and other developers:

• Verify your angular.json asset configuration
  The #1 culprit is usually that manifest.json isn’t being copied to your production build folder. Double-check your angular.json under the build > options > assets array to ensure it explicitly includes src/manifest.json:

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/manifest.json" // Critical line—don’t omit this!
  ],
  

  After updating, rebuild with ng build --prod and check your dist folder—you should see manifest.json there. If not, recheck your file path (make sure it’s not in src/assets/manifest.json unless you reference it that way).

• Fix the index.html manifest link
  A typo or incorrect path in your index.html’s manifest link will also trigger a 404. Confirm the href matches your deployment path:

  • If your app is deployed at the root domain (e.g., https://example.com/), use: <link rel="manifest" href="manifest.json">
  • If deployed to a subpath (e.g., https://example.com/my-app/), use the full relative path: <link rel="manifest" href="/my-app/manifest.json">
    Double-check for typos (like manifests.json instead of manifest.json—we’ve all been there!).

• Check server configuration
  Sometimes the issue isn’t with Angular, but your web server blocking or misrouting the manifest request:

  • Ensure your server (NGINX, Apache, etc.) is serving files from the correct dist directory.
  • Add the correct MIME type for manifests—some servers return 404 for unrecognized file types. For NGINX, add this to your config:

    types {
      application/manifest+json json;
    }
    

  • Avoid rewrite rules that redirect all requests to index.html (common in SPA setups)—make sure manifest.json is excluded from these rules.

• Validate ngsw-config.json paths
  Your PWA’s service worker config might be pointing to the wrong manifest path. Open ngsw-config.json and confirm the manifest entry matches your deployment URL:

  "manifest": "/manifest.json"
  

  If you’re using a subpath, update it to something like "/my-app/manifest.json".

• Quick debug trick
  Open your browser’s DevTools > Network tab, refresh the page, and look for the manifest.json request. Check the "Request URL" to see exactly where the browser is trying to fetch it—this will immediately tell you if the path is wrong or the file isn’t being served.

内容的提问来源于stack exchange，提问作者Karthikeyan Vellingiri