CODEWITHSUNDEEP
angularazure-devopsazure-pipelinesazure-deploymentazure-appservice
misanthrop
misanthrop

Reputation: 939

Deployed Angular on Azure gives 404 on all routes

I tried all day to get my dev.azure pipeline for CI & CD for an Angular Frontend application running, but in the end nothing worked...

I am currently at the following status:

I have a web.config with the following content:

<?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>
  </system.webServer>
</configuration>

When I access the website with following URL: https://mySecretSubdomain.azurewebsites.net/ I get redirected to https://mySecretSubdomain.azurewebsites.net/home and see a blank page (in the sources I see that it returned my index.html).

Expected behaviour in this case is: show the login page (this happens when I run the application locally with Visual Studio Code.)

I turned on logging everywhere I found it in my azure app service. In the DetailedErrors folder under https://mySecretSubdomain.scm.azurewebsites.net/ I get the information that my request actually led to an HTTP 404 - not found error. And in the requested URL tag of the error description it shows the value: https://mySecretSubdomain:80/home (Please note: https makes sense, port 80 does not make sense, and I miss the part .azurewebsites.net in the URL).

The angular.json contains the following part:

...
"options": {
    browserTarget": "my-SecretApp-name:build",
    "host": "https://mySecretSubdomain.azurewebsites.net/",
    "port": 443
}
...

I searched through all possible options but I did not find anything which could help. Any idea?

edit 14/09/2020 - 1:

Following answers the comment of @Cece Dong - MSFT:

in yaml:

pool:
  name: Azure Pipelines
  demands: npm

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build --prod'

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: src
    includeRootFolder: false

- task: PublishBuildArtifacts@1
  displayName: 'Publish artifacts: drop'

edit 14/09/2020 - 2:

I just realized that in the tutorial (http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html) mentioned by @Cece Dong - MSFT there are more steps in the pipeline as then I have. So, I update my pipeline accordingly and I will keep you posted.

Upvotes: 4

Views: 3029

Answers (1)

misanthrop
misanthrop

Reputation: 939

The problem was that I did not create the correct pipeline.

In the end the following pipeline configuration worked:

pool:
  name: Azure Pipelines
steps:
- task: NodeTool@0
  displayName: 'Use Node 13.x'
  inputs:
    versionSpec: 13.x

- task: Npm@1
  displayName: 'npm install angular cli'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install -g @angular/cli'

- task: Npm@1
  displayName: 'npm install dependencies'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install --no-package-lock'

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build --prod'

- task: AzureRmWebAppDeployment@4
  displayName: 'Azure App Service Deploy: MyWebName'
  inputs:
    azureSubscription: 'MySubscription'
    WebAppName: MyWebName
    packageForLinux: 'dist/my-app-name'

Huge thanks to @Cece Dong - MSFT for pointing me towards the right direction by mentioning the tutorial: http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html

Upvotes: 4

Related Questions