Deploying Typescript + Angular app to Azure App Service via Azure Devops pipeline (ng modue not found)

Question

I have a Typescript plus Angular app that works great locally.

I'm trying to set up a deployment pipeline on Azure DevOps that builds and releases to App Service (Linux Node.js web app).

The plumbing works and the whole pipeline succeeds (both the build and release stages), however I cannot get the deployed app to work; it has a

ng module not found error

when it attempts 'npm start'. And that's that.

What am I doing wrong? How do I fix it?

Here's the YAML:

# Node.js Express Web App to Linux on Azure
# Build a Node.js Express app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger: none

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: 'redacted'

  # Web app name
  webAppName: 'redacted'

  # Environment name
  environmentName: 'redacted'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

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

    - script: |
        npm i -g -force @angular/[email protected]
        npm i -force
        ng build --prod
      displayName: 'npm install etc'

    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy: Redacted'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|14.x'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm start'

Answer 1

In order to Deploy Angular app you need to deploy the dist folder in the Azure Web app. dist folder is created after the Angular app is built.

Refer my Azure DevOps yaml pipeline for the same:-

Refer my SO thread answer:-

trigger:
- master

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: 'dist' # Assuming 'dist' is your build output folder
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/dist.zip' # Define the path for the zip file
    replaceExistingArchive: true

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)'
    Contents: '**/*.zip' # Assuming you want to copy all zip files
    TargetFolder: '$(Build.ArtifactStagingDirectory)/drop'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/drop'
    ArtifactName: 'drop'

- task: AzureRmWebAppDeployment@4
  displayName: 'Deploy Azure App Service'
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'xxx subscription (xxxxxxxd-e2b6e97xxx)'
    appType: 'webApp'
    WebAppName: 'silicon-webapp09'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/drop/dist.zip'
    StartupCommand: pm2 serve /home/site/wwwroot/my-appangular --no-daemon --spa

Output:-

Startup-command:-