Angular+AD B2C+Node项目VSTS部署后manifest.json 404错误求助

Hey, let's tackle that manifest fetch failure you're hitting after deploying your Angular app to Azure App Service. I've worked through similar issues with MSAL.js and Angular deployments, so here are the targeted fixes to get your app running smoothly:

1. Make sure manifest.json is included in your Angular build #

First off, double-check that your manifest.json is being packaged correctly during the build. Angular only copies files listed in the assets section of angular.json to the dist folder.

• Open your angular.json file, navigate to projects -> [your-app-name] -> architect -> build -> options -> assets
• Ensure src/manifest.json is listed in the assets array (adjust the path if your manifest is in a different location):

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/manifest.json"
  ]
  

Run ng build locally and check the dist folder—you should see manifest.json there. If it's missing, the build isn't including it, which explains the 404.

2. Configure Azure App Service to serve static files correctly #

Since you're not using a web.config, Azure's Node.js hosting might not be handling static JSON files properly. Create a staticwebapp.config.json file in your project root with this content:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "mimeTypes": {
    ".json": "application/json"
  }
}

This config does two things: it ensures all routes point to Angular's index.html (fixing SPA routing issues) and tells the server to serve .json files with the correct MIME type—this prevents the "Unexpected token" error that happens when the server returns HTML instead of JSON for your manifest.
Don't forget to add this config file to your angular.json assets so it gets deployed with your app.

3. Verify your VSTS build and deploy steps #

Check your VSTS pipeline to make sure you're building and deploying the right files:

• Confirm your run build command uses the production configuration: use ng build --prod (for Angular 12 and earlier) or ng build --configuration production (Angular 13+). Development builds sometimes skip certain static assets.
• In the Azure App Service Deploy step, make sure the "Package or folder" path points to your Angular build output—usually dist/[your-app-name]. If you're deploying the wrong folder, your manifest won't be on the server.

4. Check your MSAL.js manifest path configuration #

Make sure the path to manifest.json in your MSAL setup is correct. If your app is deployed to the root of your App Service, the path should be /manifest.json. If you're using a virtual directory, adjust it to /[virtual-directory]/manifest.json.
For example, in your MSAL config (usually in app.module.ts or a dedicated config file):

const msalConfig = {
  auth: {
    clientId: 'your-client-id',
    authority: 'https://your-b2c-tenant.b2clogin.com/your-tenant.onmicrosoft.com/your-policy',
    redirectUri: 'https://your-app.azurewebsites.net/',
    // Ensure any manifest-related paths here are correct
  },
  // ... other config
};

If you're using @azure/msal-angular, double-check that you haven't hardcoded an incorrect path for the manifest.

5. Dig into Azure App Service logs for more clues #

If none of the above works, turn on logging in Azure Portal to see exactly what's happening:

• Go to your App Service resource, navigate to Monitoring > Log Stream
• Trigger the 404 error by visiting your app, then check the logs. You'll see details like the exact request path, what the server returned, and any underlying errors. This can help you spot if the request is going to the wrong place or if the server is misconfigured.

Work through these steps one by one, and you should get that manifest loading correctly in no time.

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