Angular2生产流水线成功后未加载生产环境配置求助

Let's walk through the most likely causes and fixes for your issue where the Angular app is still pointing to the test WebAPI despite having the correct production config in the build artifact:

1. Verify the Angular Build Command Targets Production #

First, double-check that your pipeline's build step is actually triggering a production build. Angular uses configuration files to inject environment-specific variables during the build process—if you run a default ng build without specifying the production configuration, it will use the development environment settings even if the environment.prod.ts exists.

• Confirm your build command is:

  # For Angular 12+
  ng build --configuration production
  # For older Angular versions
  ng build --prod
  

• To validate, download the build artifact from your pipeline, unpack it, and check the bundled main.js (or similar chunk file) for the API URL. If it still shows the test URL, the build step is the root problem.

2. Check Ansible Roles for Accidental Config Overwrites #

Your Ansible playbook uses three roles to deploy to Azure App Service. It's possible one of these roles is overwriting the production build's config files with test environment values during deployment:

• Inspect the tasks in ansible-role-azure-asp, ansible-role-azure-app-service, and ansible-role-azure-app-service-bindcertificate:
  • Look for any tasks that copy or template environment files (like environment.ts or environment.prod.ts) into the deployment directory.
  • Ensure these roles are only deploying the already-built artifacts from your pipeline, not injecting separate config files.
• You can also check the deployed files directly in Azure App Service: Go to Advanced Tools > Kudu > Debug Console > Site > wwwroot and verify the bundled JS files contain the production API URL.

3. Rule Out Browser Caching #

Sometimes the issue is just cached old assets in the browser. Even if you deployed the correct production build, users (including you) might still be loading the old test version from cache:

• Force a hard refresh of the app (Ctrl+F5 on Windows/Linux, Cmd+Shift+R on Mac).
• In Chrome DevTools, go to Network > Disable cache (check the box) and reload the app to see if it pulls the new production config.
• Ensure your Angular build is generating file hashes (enabled by default in production mode) so browsers recognize new assets. You can confirm this by looking at the filenames in your build artifact—they should look like main.abc123.js.

4. Validate Angular's Environment Variable Usage #

Make sure your Angular code is actually using the environment variables instead of hardcoded URLs:

• Check your service files or API call logic to confirm it's importing and using the environment config:

  import { environment } from '../environments/environment';
  
  // Correct usage
  export class ApiService {
    private apiUrl = environment.apiUrl;
    // ... rest of the service
  }
  

• If you find hardcoded test URLs anywhere, replace them with the environment variable and re-run the production build.

5. Check Azure App Service Application Settings #

Some teams use Azure App Service's Application Settings to override frontend configs dynamically. If there's a setting like API_URL or similar pointing to the test environment, it might be overriding your build-time config:

• Go to your Azure App Service in the portal > Configuration > Application settings.
• Look for any settings that might be setting the API URL, and either update them to the production URL or remove them if you want to use the build-time config.

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