79612266

Date: 2025-05-08 11:36:18
Score: 2.5
Natty:
Report link

When deploying an Angular app to Azure App Service (Windows) via ZIP, a web.config file is required to properly serve static files like index.html. Without it, Azure may throw errors ( dwasmod.dll).

To resolve the issue, I created a sample Angular application and added a web.config file to the root directory of the project.

Thanks to @Martin Brandl for clear explanation I've referred this blog and created a web.config file in my project.

Web.config file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

Pipeline.yaml file:

trigger:
  branches:
    include:
      - main

pool:
  vmImage: 'windows-latest'

variables:
  buildOutput: '$(Build.SourcesDirectory)/dist/angular-app/browser'

stages:
- stage: Build
  jobs:
  - job: BuildAngularApp
    steps:

    - task: NodeTool@0
      inputs:
        versionSpec: '20.x'
      displayName: 'Install Node.js'

    - script: |
        echo Installing Angular CLI and dependencies...
        npm install -g @angular/cli
        npm ci

        echo Building Angular App...
        ng build --configuration production
      displayName: 'Install and Build Angular App'

    - task: CopyFiles@2
      displayName: 'Copy web.config to build output'
      inputs:
        SourceFolder: '$(Build.SourcesDirectory)'
        Contents: 'web.config'
        TargetFolder: '$(buildOutput)'

    - task: ArchiveFiles@2
      displayName: 'Create deployment ZIP'
      inputs:
        rootFolderOrFile: '$(buildOutput)'
        includeRootFolder: false
        archiveType: 'zip'
        archiveFile: '$(Build.ArtifactStagingDirectory)/deployment.zip'
        replaceExistingArchive: true

    - task: PublishBuildArtifacts@1
      displayName: 'Publish ZIP Artifact'
      inputs:
        PathtoPublish: '$(Build.ArtifactStagingDirectory)/deployment.zip'
        ArtifactName: 'drop'

- stage: Deploy
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: DeployToAzure
    environment: 'production'
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop

          - task: AzureWebApp@1
            displayName: 'Deploy to Azure App Service'
            inputs:
              azureSubscription: '<azure-subscription>'
              appType: 'webApp'
              appName: '<azure-app>'
              package: '$(Pipeline.Workspace)/drop/deployment.zip'

I've successfully deployed application to Azure App Service (Windows) via Azure DevOps.

enter image description here

Set WEBSITE_RUN_FROM_PACKAGE to 0 in environment variables section of your App service.

enter image description here

Go to Configuration section of you web app -> Path mappings - > open virtual path and add below path

site\wwwroot\angular-app\browser

enter image description here

Prouction output:

enter image description here

Reasons:
  • Blacklisted phrase (0.5): Thanks
  • Blacklisted phrase (1): this blog
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Martin
  • Starts with a question (0.5): When
Posted by: Sirra Sneha