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'

1. Please check if you add this dependency in your package.json. 2. Please download the pipeline artifact from the build and check if node_modules folder contains ng. See this blog for more detailed info. — Ziyang Liu-MSFT
– Ziyang Liu-MSFT, Commented Jan 22, 2024 at 3:35
It you still have the same issue, please try: 1. Deploy your app on your local machine using Azure CLI. If you have the same error, the issue may be related to your project. 2. Set up a self-hosted agent on your local machine where your app works, then run the pipeline using it and check what's the result. — Ziyang Liu-MSFT
– Ziyang Liu-MSFT, Commented Jan 22, 2024 at 3:35
Thanks, local is fine. I ended up with a different setup, using container registry and a docker image - this seems to work fine now. But will test some more options soon — soundcake
– soundcake, Commented Jan 22, 2024 at 13:07

SiddheshDesai · Accepted Answer · 2024-01-22 09:11:59Z

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:-

enter image description here

Startup-command:-

enter image description here

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related