CODEWITHSUNDEEP
angularazurehttpazure-web-app-serviceweb-deployment
Antoine
Antoine

Reputation: 1

Publishing & Deploy an Angular2 App to Azure

I have a Angular 2 App (which works really well locally), that I would like to host in Azure.

I followed this tutorial, https://prmadi.com/running-angular2-app-on-azure-app-services-with-ci-cd/, with a web.config that I add, in my root folder, with my index.html :

web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <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="index.html" />
                </rule>
            </rules>
            <outboundRules>
                <rule name="AdjustCacheForHTMLPages" preCondition="IsIndexHTML">
                    <match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
                    <action type="Rewrite" value="no-cache, no-store, must-revalidate" />
                </rule>
                <preConditions>
                    <preCondition name="IsIndexHTML">
                        <add input="{REQUEST_FILENAME}" pattern="index\.html" />
                    </preCondition>
                </preConditions>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

The git deployement on azure works fine. But the app wont load. When I open it in my browser I have an http 500 error:

https://img15.hostingpics.net/pics/385274Capturedecran20170717a160101.png

And when I go to the log of my azure webApp I got :

</head> 
<body> 
<div id="content"> 
<div class="content-container"> 
<h3>HTTP Error 500.0 - Internal Server Error</h3> 
<h4>The page cannot be displayed because an internal server error has occurred.</h4> 
</div> 
<div class="content-container"> 
<fieldset><h4>Most likely causes:</h4> 
<ul>    <li>IIS received the request; however, an internal error occurred during the processing of the request. The root cause of this error depends on which module handles the request and what was happening in the worker process when this error occurred.</li>    <li>IIS was not able to access the web.config file for the Web site or application. This can occur if the NTFS permissions are set incorrectly.</li>    <li>IIS was not able to process configuration for the Web site or application.</li>     <li>The authenticated user does not have permission to use this DLL.</li>   <li>The request is mapped to a managed handler but the .NET Extensibility Feature is not installed.</li> </ul> 
</fieldset> 
</div> 
<div class="content-container"> 
<fieldset><h4>Things you can try:</h4> 
<ul>    <li>Ensure that the NTFS permissions for the web.config file are correct and allow access to the Web server's machine account.</li>     <li>Check the event logs to see if any additional information was logged.</li>  <li>Verify the permissions for the DLL.</li>    <li>Install the .NET Extensibility feature if the request is mapped to a managed handler.</li>  <li>Create a tracing rule to track failed requests for this HTTP status code. For more information about creating a tracing rule for failed requests, click <a href="http://go.microsoft.com/fwlink/?LinkID=66439">here</a>. </li> </ul> 
</fieldset> 
</div> 
 
<div class="content-container"> 
<fieldset><h4>Detailed Error Information:</h4> 
<div id="details-left"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr class="alt"><th>Module</th><td>&nbsp;&nbsp;&nbsp;AspNetInitializationExceptionModule</td></tr> 
<tr><th>Notification</th><td>&nbsp;&nbsp;&nbsp;BeginRequest</td></tr> 
<tr class="alt"><th>Handler</th><td>&nbsp;&nbsp;&nbsp;ExtensionlessUrlHandler-Integrated-4.0</td></tr> 
<tr><th>Error Code</th><td>&nbsp;&nbsp;&nbsp;0x00000000</td></tr> 
 
</table> 
</div> 
<div id="details-right"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr class="alt"><th>Requested URL</th><td>&nbsp;&nbsp;&nbsp;http://edcclone2:80/</td></tr> 
<tr><th>Physical Path</th><td>&nbsp;&nbsp;&nbsp;D:\home\site\wwwroot\dist</td></tr> 
<tr class="alt"><th>Logon Method</th><td>&nbsp;&nbsp;&nbsp;Not yet determined</td></tr> 
<tr><th>Logon User</th><td>&nbsp;&nbsp;&nbsp;Not yet determined</td></tr> 
 
</table> 
<div class="clear"></div> 
</div> 
</fieldset> 
</div> 
 
<div class="content-container"> 
<fieldset><h4>More Information:</h4> 
This error means that there was a problem while processing the request. The request was received by the Web server, but during processing a fatal error occurred, causing the 500 error. 
<p><a href="http://go.microsoft.com/fwlink/?LinkID=62293&amp;IIS70Error=500,0,0x00000000,9200">View more information &raquo;</a></p> 
<p>Microsoft Knowledge Base Articles:</p> 
  
 
</fieldset> 
</div> 
</div> 
</body> 
</html>

Upvotes: 0

Views: 449

Answers (2)

Antoine
Antoine

Reputation: 1

The main problem was the installation of Node modules ( and some of the customs modules like ng-smart-tables). I started with an angular 2 quickstart project which have been updated to angular 4 when I was working on it.

And the nom install does not work on it's own, i'll have to install all the custom modules throught a command line.

So to solve this I started a new project with 

ng new

And I moved my components and modules in it. Also I put my custom packages in the package.json file, follow the tutorial and everything was working well (no need of a web.config file)

Upvotes: 0

Aaron Chen
Aaron Chen

Reputation: 9940

Temporarily add the following within the appropriate tags in your web.config file:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpErrors errorMode="Detailed" />
    </system.webServer>
    <system.web>
        <customErrors mode="Off" />
        <compilation debug="true" />
    </system.web>
</configuration>

After you have added those, load the page again to see if you can get a more detailed error.

Upvotes: 1

Related Questions