How to Deploy Angular 6 to Azure Web App - You do not have permissions

user_1406168 0
Viewed 3012

I have created a clean Angular 6 App. I add following web.config to the src folder:

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular" 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="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

I added "src/web.config" in the assets section in the angular.json file. I have updated the node version on the web app to 10.6.

When I deploy the application and navigato to site I get following:You do not have permission to view this directory or page.

I followed following sample: https://itnext.io/easy-way-to-deploy-a-angular-5-application-to-azure-web-app-using-vsts-pipelines-4a288b9deae1

Any suggestions?

angular azure
2 Answers

It took me entirely too long to figure this out. I hope it helps.

  • In your app service, Click "Application Settings". Scroll to the bottom. You will see "Virtual applications and directories". Your virtual path should be "/" and physical path should be "site/wwwroot/" Change your Physical path to "site/wwwroot/'appname'" "appname" should be whatever the name of your application is. Or it should be whatever folder is inside of your "dist".
user_104751990

I wouldn't expect you to get this error message but in the web.config I miss the part where you define the MimeMap for json files. Please try this web.config:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".woff"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
     </staticContent>

      <rewrite>
        <rules>
            <rule name="Angular" 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="/" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
</configuration>

See also: Web.config for hosting an Angular application on Azure Web App

user_11634230
Related