Issues with Azure Pipeline for ABP Angular Frontend Deployment

Question

Issues with Azure Pipeline for ABP Angular Frontend Deployment

Al Amran 331

The deployment of an ASP.NET Core application consists of a backend using the ABP framework and a frontend built with Angular, stored in a single repository on Azure DevOps. A YAML pipeline has been configured to deploy both components to separate Azure Web Apps (Windows). The backend app deploys successfully, but the frontend app fails to build and release correctly.

Key Requirement: Before building the Angular app, the proxy must be generated using the ABP CLI. The pipeline does not generate this proxy during execution, which is essential for type safety and IntelliSense support in Angular when handling API calls.

Below is the YAML script configuration for the pipeline:

# ASP.NET

# Build and test ASP.NET projects.
# Add steps that publish symbols, save build artifacts, deploy, and more:

trigger:
  branches:
    include:
      - develop
variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'
  angularDir: 'angular'
  outputDir: 'dist/ClientPortal'
stages:
- stage: BuildAndDeploy
  jobs:
  - job: BuildJob
    pool:
      vmImage: 'windows-latest'
    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET 8 SDK'
      inputs:
        version: '8.0.x'
        includePreviewVersions: true
    - task: NuGetCommand@2
      displayName: 'Restore NuGet packages'
      inputs:
        restoreSolution: '$(solution)'
    - task: VSBuild@1
      displayName: 'Build with Visual Studio'
      inputs:
        solution: '$(solution)'
        msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(Build.ArtifactStagingDirectory)"'
        platform: '$(buildPlatform)'
        configuration: '$(buildConfiguration)'
    - task: PublishBuildArtifacts@1
      displayName: 'Publish Artifact'
      inputs:
        PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    - task: AzureRmWebAppDeployment@5
      displayName: 'Deploy to Azure Web App'
      inputs:
        ConnectionType: 'AzureRM'
        azureSubscription: 'Visual Studio(********************************)'
        appType: 'webApp'
        WebAppName: 'abp-backend-cicd'
        package: '$(Build.ArtifactStagingDirectory)/**/*.zip'
    
    # Frontend Deployment tasks
    - task: NodeTool@0
      inputs:
        versionSpec: '20.x'
      displayName: 'Install Node.js'
    - script: |
        cd angular
        npm install -g yarn
      displayName: 'Install Yarn'
    
    # Run ABP CLI from cmd.exe to generate Angular proxy
    - task: CmdLine@2
      inputs:
        script: |
          cd angular
          echo Installing ABP CLI and generating proxy...
          call dotnet tool install -g Volo.Abp.Cli --version 8.1.2
          abp generate-proxy -t ng -u
      displayName: 'Load ABP Proxy with CLI'
    
    - script: |
        cd angular
        echo "Installing Angular dependencies via npm..."
        ng config -g cli.packageManager yarn
        yarn add @angular/cli
        yarn add install-peers
        ng build --configuration production
      workingDirectory: '$(angularDir)'
      displayName: 'NPM Build Angular App'
    - task: CopyFiles@2
      displayName: 'Copy web.config to dist folder'
      inputs:
        sourceFolder: '$(Build.SourcesDirectory)/Deployment-Materials/Dev'
        contents: 'web.config'
        targetFolder: '$(Build.SourcesDirectory)/$(angularDir)/$(outputDir)'
    - task: CopyFiles@2
      inputs:
        sourceFolder: '$(angularDir)/$(outputDir)'
        contents: '**'
        targetFolder: '$(Build.ArtifactStagingDirectory)'
      displayName: 'Prepare Artifact for Publishing'
    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: '$(Build.ArtifactStagingDirectory)'
        artifactName: 'angular-clientportal'
      displayName: 'Publish Angular Build Artifact'

Assistance is required to resolve the issue of the frontend app not building and releasing successfully in the Azure Pipeline.

Durga Reshma Malthi 6,360 Microsoft External Staff Moderator

Hi Al Amran

Use a local installation of the ABP CLI in the Angular project instead of a global one.

- task: CmdLine@2
  inputs:
    script: |
      cd angular
      echo Installing ABP CLI and generating proxy...
      dotnet new tool-manifest
      dotnet tool install Volo.Abp.Cli --version 8.1.2
      dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url>
  displayName: 'Load ABP Proxy with CLI'

Replace <your-backend-url> with your actual backend app URL (including /api if required).

Instead of CmdLine@2 (Windows shell), you can also use PowerShell@2 for consistency:

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      cd angular
      dotnet new tool-manifest
      dotnet tool install Volo.Abp.Cli --version 8.1.2
      dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url>
  displayName: 'Generate Angular Proxy using ABP CLI'

Hope this helps!

Please Let me know if you have any queries.

Al Amran 331 Reputation points

2025-07-02T14:27:46.2733333+00:00

Hello @Durga Reshma Malthi

We tried your suggested solution but does not resolved the issue and can't create angular proxy container in the expected destination directory.

If we run from Cmdline, getting below error:

If we run from PowerShell@V2, getting below error:

Thanks for your prompt response.

Regards,
Amran

Durga Reshma Malthi 6,360 Microsoft External Staff Moderator

Hi Al Amran

Make sure your angular.json has a valid "defaultProject" set. If not, the CLI won’t know where to place the generated proxy.

You can also try explicitly passing the target project:

abp generate-proxy -t ng --target YourAngularProjectName

Or use the schematic directly:

ng generate @abp/ng.schematics:proxy-add --target=YourAngularProjectName --source=YourAngularProjectName
```Alternatively, try the below steps:

1. Ensure Node.js and yarn are installed and then add the below step before calling `abp generate-proxy`:

   ```yaml
   - script: |
       cd angular
       echo Installing dependencies for ABP proxy generation...
       yarn install
       yarn add -D @abp/ng.schematics
     displayName: 'Install ABP Angular Schematics'

After this add the below script and try again.

   - task: CmdLine@2
     inputs:
       script: |
         cd angular
         echo Installing ABP CLI and generating proxy...
         dotnet new tool-manifest
         dotnet tool install Volo.Abp.Cli --version 8.1.2
         dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url>
     displayName: 'Load ABP Proxy with CLI'

Hope this helps!

Please Let me know if you have any queries.

Al Amran 331 Reputation points

2025-07-04T06:58:27.3233333+00:00

Hello @Durga Reshma Malthi
Thanks for your continuous response.

We have tried explicitly passing the target project but doesn't resolve the issue. After then we have tried to use the schematic directly and found below error,

After this, we have tried your suggested way to add manifest tool and local insatll of ABP CLI but it didn't help much. Getting below error,

Durga Reshma Malthi 6,360 Microsoft External Staff Moderator

Hi Al Amran

As per the 1st screenshot, those are warnings, you can ignore.

If you're still hitting an issue when executing the schematic or ABP CLI, then

Add This Task (Before Proxy Generation):

- task: CmdLine@2
  inputs:
    script: |
      cd angular
      echo Installing Yarn dependencies...
      call yarn install
      echo Installing ABP Angular schematics...
      call yarn add -D @abp/ng.schematics@8.1.2
      echo Verifying ABP schematic install...
      dir node_modules/@abp/ng.schematics
    workingDirectory: '$(Build.SourcesDirectory)'
  displayName: 'Install ABP Angular Schematics'

Add This Task (To Generate Proxy):

- task: CmdLine@2
  inputs:
    script: |
      cd angular
      echo Creating .NET local tool manifest...
      dotnet new tool-manifest
      echo Installing ABP CLI...
      dotnet tool install Volo.Abp.Cli --version 8.1.2
      echo Running ABP CLI to generate Angular proxy...
      dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url> --no-cache
      echo Proxy generation finished.
    workingDirectory: '$(Build.SourcesDirectory)'
  displayName: 'Generate Angular Proxy via ABP CLI'

After Proxy Step: Build Angular App:

- task: CmdLine@2
  inputs:
    script: |
      cd angular
      echo Building Angular app...
      call yarn build --configuration production
    workingDirectory: '$(Build.SourcesDirectory)'
  displayName: 'Build Angular Frontend'

As per 2nd screenshot, use PowerShell@2 instead of CmdLine@2:

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      cd angular
      dotnet new tool-manifest
      dotnet tool install Volo.Abp.Cli --version 8.1.2
      dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url>
    workingDirectory: '$(Build.SourcesDirectory)'
  displayName: 'Generate ABP Proxy with CLI via PowerShell'

Hope this helps!

Please Let me know if you have any queries.

Al Amran 331 Reputation points

2025-07-04T08:45:20.38+00:00

Hello @Durga Reshma Malthi

I have tried your suggested orders tasks according to CmdLine and PowerShell but doesn't resolve the issue. Proxy is not generated as following message,

Thanks for your continuous support.
Durga Reshma Malthi 6,360 Reputation points Microsoft External Staff Moderator

2025-07-07T08:47:10.0233333+00:00
Hi Al Amran

As we discussed in private message, after trying this script - frontend.txt, ABP proxy was successfully generated.

However, you mentioned: "I can’t see the proxy directory in Azure Repos" "No dist/ClientPortal in the artifact".

This is expected behavior. Azure Pipelines does not commit generated files back to your Git repository unless you explicitly add a step. So, you won’t see the src/app/proxy folder in Azure Repos, unless you commit it manually.

Firstly, Open angular/angular.json and look for defaultProject and check if it is missing or set incorrectly.

Normally it should be like this:

{ "$schema": "...", "defaultProject": "ClientPortal", // <-- Check this "projects": { "ClientPortal": { "architect": { "build": { "options": { "outputPath": "dist/ClientPortal" // <-- Confirm this matches your YAML

If your angular.json uses:

"defaultProject": "app"

Then adjust the build command to:

call yarn build app --configuration production

then fix in yaml pipeline if needed,

In your pipeline:

variables: outputDir: 'dist/ClientPortal'

To confirm angular build path, add this debug step:

- script: | echo "Listing Angular build output..." dir angular/dist displayName: 'Inspect Angular Build Output'

If the folder is angular/dist/client-portal (lowercase or different casing), update your outputDir variable accordingly.

Hope this helps!

Please Let me know if you have any queries.

Your answer

Durga Reshma Malthi 6,360 Reputation points Microsoft External Staff Moderator

2025-07-02T13:40:06.4366667+00:00

Hi Al Amran

Use a local installation of the ABP CLI in the Angular project instead of a global one.

- task: CmdLine@2 inputs: script: | cd angular echo Installing ABP CLI and generating proxy... dotnet new tool-manifest dotnet tool install Volo.Abp.Cli --version 8.1.2 dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url> displayName: 'Load ABP Proxy with CLI'

Replace <your-backend-url> with your actual backend app URL (including /api if required).

Instead of CmdLine@2 (Windows shell), you can also use PowerShell@2 for consistency:

- task: PowerShell@2 inputs: targetType: 'inline' script: | cd angular dotnet new tool-manifest dotnet tool install Volo.Abp.Cli --version 8.1.2 dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url> displayName: 'Generate Angular Proxy using ABP CLI'

Hope this helps!

Please Let me know if you have any queries.
Al Amran 331 Reputation points

2025-07-02T14:27:46.2733333+00:00

Hello @Durga Reshma Malthi

We tried your suggested solution but does not resolved the issue and can't create angular proxy container in the expected destination directory.

If we run from Cmdline, getting below error:

If we run from PowerShell@V2, getting below error:

Thanks for your prompt response.

Regards,
Amran
Durga Reshma Malthi 6,360 Reputation points Microsoft External Staff Moderator

2025-07-03T07:55:17.9033333+00:00

Hi Al Amran

Make sure your angular.json has a valid "defaultProject" set. If not, the CLI won’t know where to place the generated proxy.

You can also try explicitly passing the target project:

abp generate-proxy -t ng --target YourAngularProjectName

Or use the schematic directly:

ng generate @abp/ng.schematics:proxy-add --target=YourAngularProjectName --source=YourAngularProjectName ```Alternatively, try the below steps: 1. Ensure Node.js and yarn are installed and then add the below step before calling `abp generate-proxy`: ```yaml - script: | cd angular echo Installing dependencies for ABP proxy generation... yarn install yarn add -D @abp/ng.schematics displayName: 'Install ABP Angular Schematics'

After this add the below script and try again.
- task: CmdLine@2 inputs: script: | cd angular echo Installing ABP CLI and generating proxy... dotnet new tool-manifest dotnet tool install Volo.Abp.Cli --version 8.1.2 dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url> displayName: 'Load ABP Proxy with CLI'

Hope this helps!

Please Let me know if you have any queries.
Al Amran 331 Reputation points

2025-07-04T06:58:27.3233333+00:00

Hello @Durga Reshma Malthi
Thanks for your continuous response.

We have tried explicitly passing the target project but doesn't resolve the issue. After then we have tried to use the schematic directly and found below error,

After this, we have tried your suggested way to add manifest tool and local insatll of ABP CLI but it didn't help much. Getting below error,
Durga Reshma Malthi 6,360 Reputation points Microsoft External Staff Moderator

2025-07-04T08:03:00.6433333+00:00

Hi Al Amran

As per the 1st screenshot, those are warnings, you can ignore.

If you're still hitting an issue when executing the schematic or ABP CLI, then

Add This Task (Before Proxy Generation):

- task: CmdLine@2 inputs: script: | cd angular echo Installing Yarn dependencies... call yarn install echo Installing ABP Angular schematics... call yarn add -D @abp/ng.schematics@8.1.2 echo Verifying ABP schematic install... dir node_modules/@abp/ng.schematics workingDirectory: '$(Build.SourcesDirectory)' displayName: 'Install ABP Angular Schematics'

Add This Task (To Generate Proxy):

- task: CmdLine@2 inputs: script: | cd angular echo Creating .NET local tool manifest... dotnet new tool-manifest echo Installing ABP CLI... dotnet tool install Volo.Abp.Cli --version 8.1.2 echo Running ABP CLI to generate Angular proxy... dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url> --no-cache echo Proxy generation finished. workingDirectory: '$(Build.SourcesDirectory)' displayName: 'Generate Angular Proxy via ABP CLI'

After Proxy Step: Build Angular App:

- task: CmdLine@2 inputs: script: | cd angular echo Building Angular app... call yarn build --configuration production workingDirectory: '$(Build.SourcesDirectory)' displayName: 'Build Angular Frontend'

As per 2nd screenshot, use PowerShell@2 instead of CmdLine@2:

- task: PowerShell@2 inputs: targetType: 'inline' script: | cd angular dotnet new tool-manifest dotnet tool install Volo.Abp.Cli --version 8.1.2 dotnet tool run abp generate-proxy -t ng --url https://<your-backend-url> workingDirectory: '$(Build.SourcesDirectory)' displayName: 'Generate ABP Proxy with CLI via PowerShell'

Hope this helps!

Please Let me know if you have any queries.
Al Amran 331 Reputation points

2025-07-04T08:45:20.38+00:00

Hello @Durga Reshma Malthi

I have tried your suggested orders tasks according to CmdLine and PowerShell but doesn't resolve the issue. Proxy is not generated as following message,

Thanks for your continuous support.
Durga Reshma Malthi 6,360 Reputation points Microsoft External Staff Moderator

2025-07-07T08:47:10.0233333+00:00

Hi Al Amran

As we discussed in private message, after trying this script - frontend.txt, ABP proxy was successfully generated.

However, you mentioned: "I can’t see the proxy directory in Azure Repos" "No dist/ClientPortal in the artifact".

This is expected behavior. Azure Pipelines does not commit generated files back to your Git repository unless you explicitly add a step. So, you won’t see the src/app/proxy folder in Azure Repos, unless you commit it manually.

Firstly, Open angular/angular.json and look for defaultProject and check if it is missing or set incorrectly.

Normally it should be like this:

{ "$schema": "...", "defaultProject": "ClientPortal", // <-- Check this "projects": { "ClientPortal": { "architect": { "build": { "options": { "outputPath": "dist/ClientPortal" // <-- Confirm this matches your YAML

If your angular.json uses:

"defaultProject": "app"

Then adjust the build command to:

call yarn build app --configuration production

then fix in yaml pipeline if needed,

In your pipeline:

variables: outputDir: 'dist/ClientPortal'

To confirm angular build path, add this debug step:

- script: | echo "Listing Angular build output..." dir angular/dist displayName: 'Inspect Angular Build Output'

If the folder is angular/dist/client-portal (lowercase or different casing), update your outputDir variable accordingly.

Hope this helps!

Please Let me know if you have any queries.

Share via

Issues with Azure Pipeline for ABP Angular Frontend Deployment

Your answer