Angular Deployment using Azure Devops doesn't load -- shows "hey node developers!" page

deploy angular app using azure devops
azure devops angular environment variables
sonarqube angular azure devops
deploy angular app to azure
azure devops run angular unit tests
protractor azure devops
asp net core angular azure devops
deploy angular app to azure ftp

I'm trying to deploy an angular app to Azure, the deployment seems to work, the artifacts look correct, however when I go to the website I am shown the default Azure "hey node developers" page. See (http://testss-123.azurewebsites.net/)

My build pipeline is as follows:

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

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

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'
  workingDirectory: '$(Build.SourcesDirectory)'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

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

and my deployment pipeline is the default "Deploy a Node.js app to Azure App Service" see here

I have tried this both with an actual app, and also with the default app built buy "ng new"

Your Azure WebApp is running on an IIS instance by default. If you want to handle the Html5 Mode(without the hashbang) then you have to create a Web.Config file and define a rewrite.

<configuration>
   <system.webServer>
      <defaultDocument enabled="true">
         <files>
            <add value="index.html" />
         </files>
      </defaultDocument>
   </system.webServer>
</configuration>

Create and Deploy Angular 8 with CI/CD using Azure DevOps, Create and Deploy Angular 8 with CI/CD using Azure DevOps Your browser does not currently recognize any of the video formats available. In a previous article, we saw how to use Azure DevOps to deploy an Angular application to an Azure App Service running .NET Core. Even though an Angular application works perfectly on an Azure App Service, we don't need a .NET runtime (or any other runtime such as nodejs, Ruby, PHP, ) to host our Angular application if it's not using Server Side Rendering.

If you login http://testss-123.scm.azurewebsites.net/. You will probably find your code was deployed to folder site/wwwroot/dist/yourapp, install of site/wwwroot. It might cause this issue.

You can modify your archiveFiles task as below. Point the rootFolderOrFile to the app-name folder under dist folder. And set includeRootFolder to false.

so that the output zip file only contain your ready-to-deploy code.

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist/<yourapp>'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

Azure DevOps for Angular Applications, Azure DevOps for Angular Applications. Create a simple Angular 6 application. Alter some code. Put it under version control repository git. Push the code to a shared repository on Azure DevOps. Build the optimized version of the code. Deploy it to a Web App under Azure App Service. Test the deployed app using Login into Azure DevOps; One way to deploy your angular static website on Azure is to log in to your portal and upload all the files manually. Check out this article on how we can do it manually.

I was unable to solve this problem, however as a workaround I deployed the app in a docker container, with the following dockerfile

FROM node:latest AS node

WORKDIR /app

COPY . .

RUN npm install && \
    npm run build-prod

FROM nginx:alpine
COPY --from=node /app/dist/superselection/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=node /app/dist/* /usr/share/nginx/html

the following nginx conf file in my src folder:

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

and finally the following build pipeline:

pool:
  name: Azure Pipelines
steps:
- task: Docker@0
  displayName: 'Build an image'
  inputs:
    azureSubscription: XXXXXXXX
    azureContainerRegistry: XXXXXXXX
    defaultContext: false
    context: '$(System.DefaultWorkingDirectory)'

- task: Docker@0
  displayName: 'Push an image'
  inputs:
    azureSubscription: XXXXXXXX
    azureContainerRegistry: XXXXXXXX
    action: 'Push an image'

Deploy Angular app using Azure DevOps build and release , Deploy Angular app using Azure DevOps build and release pipelines Your browser does Duration: 15:37 Posted: Mar 8, 2020 We will see how we can deploy the Angular app to Azure easily by configuring build and release pipelines in Azure DevOps using Azure DevOps FTP Upload Task.

Angular CI/CD with Azure Devops to Azure App Service, In this video I show you how to create, build, and deploy your Angular app to Azure App Duration: 15:17 Posted: Mar 27, 2019 Deploy Angular App Using Azure DevOps Build and Release Pipelines. How to easily deploy the Angular app to Azure by configuring build and release pipelines in Azure DevOps. Sibeesh Venu.

Azure DevOps, Docker, and Angular, A simple Angular project using Angular CLI. (I won't dive into the details of Angular in this article.) Source control that uses Azure DevOps over a Git interface� Azure DevOps is used to deploy an application to the cloud. If you don’t have an organization, please create one and then click on the ‘Create Project’ button. Create a new project, enter the project name and description, select the visibility as “public” or “private”.

Continuously Deploying Angular to Azure Storage with Azure DevOps, In this article, we're deploying an application that doesn't use Server Side Rendering, so we have no need for such a runtime. An Azure Storage� Release and Deploy the Angular 6 app to Azure App Service To do the deployment of the app, we will create a Release Pipeline. In this pipeline, you will create an environment named Dev. Although I will guide you to create that environment, later on, you can extend the same release pipeline to add more environments like Test, UAT, Staging and Prod.

Comments
  • Would you please share your latest information about this issue?Could you solve the issue through Levi‘s solution ? If you have any concern, feel free to share it here.
  • slides.com/sajeetharan/angular-continuous-integration#/11
  • I've tried this, (and added it to the angular.json) and still have the same issue
  • I attempted to do this, but still didn't have any luck. In the end I managed to get around the issue by deploying the app in a docker container.
  • @Joe Bucklkey. That's great you work it around, Did you make any changes to your yaml when deploying to docker container? It would be appreciated if you could share the your steps to do this.
  • see answer below
  • Thanks for sharing your solution here, you could Accept it as an Answer, so it could help other community members who get the same issues and we could archive this thread, thanks.