Angular项目部署后无法找到JSON文件但可读取同目录图片文件

Hey there, let's dig into this 404 issue with your JSON file—super weird that images work but JSON doesn't, right? Let's break down the most likely fixes based on what you've described:

1. Double-check your Angular build asset configuration #

First, make sure Angular is actually including your JSON files in the production build. Open up your angular.json file and look for the assets array under the build configuration. It should either include the entire assets folder, or explicitly list your JSON path like this:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/assets/json/socialMedia.json" // Or just "src/assets" to cover all subfolders
]

If you forgot to add the JSON path or the assets directory here, the file won't get copied to the dist folder when you run ng build --prod—that's a common culprit for missing static files post-deployment.

2. Verify your request path is correct (relative vs absolute) #

When fetching the JSON with HttpClient, make sure you're using a proper relative path. For example:

this.http.get('./assets/json/socialMedia.json');

The ./ at the start ensures the request is relative to your app's base href. Also, double-check the <base href="/"> tag in your index.html—if your site is hosted in a subdirectory, you'll need to adjust this (like <base href="/my-subdir/">). Using an absolute path without accounting for base href can break asset paths on deployment even if they work locally.

3. Fix server routing to handle static assets correctly #

The biggest clue here is that your error returns an HTML page instead of a proper 404 for the JSON file—that means your server is redirecting all unknown routes to your Angular app's index.html (standard for SPAs), but it's doing this even for static asset requests like your JSON. Here's how to fix it for common servers:

For Nginx:

Add a location block to your config that serves assets first before handling SPA routing:

location /assets/ {
    try_files $uri $uri/ =404;
}

location / {
    try_files $uri $uri/ /index.html;
}

This tells Nginx to check if the asset exists first, and only fall back to the Angular app if it doesn't.

For Apache:

Update your .htaccess file to exclude the assets folder from SPA rewrite rules:

RewriteEngine On
# Skip rewrite for assets
RewriteRule ^assets/ - [L]
# Handle SPA routing for all other requests
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

For Netlify/Vercel (static hosts):

If you're using a static hosting service, adjust your redirect config to prioritize assets. For Netlify, create a _redirects file with:

/*    /index.html   200
/assets/*    /assets/:splat   200!

The ! flag tells Netlify to use this rule before the SPA catch-all. For Vercel, add similar logic to your vercel.json file.

4. Clear caches (server + browser) #

Sometimes old cached files can cause false 404s. Make sure you're deploying the latest dist folder, clear any CDN or server cache if you're using one, and do a hard refresh (Ctrl+Shift+R) in your browser to bypass local cache.

Let me know if any of these fixes get your JSON file loading properly! 😊

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