将 Angular2 应用程序发布和部署到 Azure

Question

我有一个 Angular 2 应用程序（在本地运行得非常好），我想在 Azure 中托管。

我遵循了本教程，https://prmadi.com/running-angular2-app-on-azure-app-services-with-ci-cd/，在我的根文件夹中添加了一个 web.config，我的 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>

Azure 上的 git 部署工作正常。但该应用程序不会加载。当我在浏览器中打开它时出现 http 500 错误：

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

当我转到 azure webApp 的日志时，我得到了：

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

Answer 1

在 web.config 文件的适当标签内临时添加以下内容：

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

添加完这些后，再次加载页面以查看是否可以获得更详细的错误。

Answer 2

主要问题是安装 Node 模块（以及一些自定义模块，如 ng-smart-tables）。我从 angular 2 quickstart 项目开始，在我处理它时已更新为 angular 4。

并且 nom install 不能单独运行，我必须通过命令行安装所有自定义模块。

所以为了解决这个问题，我用

开始了一个新项目

ng new

并且我在其中移动了我的组件和模块。我还把我的自定义包放在 package.json 文件中，按照教程进行操作，一切正常（不需要 web.config 文件）

将 Angular2 应用程序发布和部署到 Azure

Publishing & Deploy an Angular2 App to Azure

http

azure

web-deployment

azure-web-app-service

angular

web.config: