Azure中的Angular应用程序显示原始js文本

时间:2018-04-03 20:32:45

标签: node.js angular azure azure-web-sites

我有一个在本地运行良好的角度应用程序。我可以运行http-server并访问该页面。现在我试图将其移动到Azure中运行。当我访问 sitename .azurewebsites.net网址时,我看到的是我的app.js文件的实际文本。它的渲染效果不像是在nodejs服务器上。

这是本地目录结构。从命令行我cd到app文件夹(app.js在app \ scripts文件夹中)并使用http-server启动它。我看到角度应用程序按预期呈现。

local run

在Azure中,我有web.config文件,指向app / scripts / app.js文件。当我访问 sitename .azurewebsites.net网址,而不是运行角度应用时,我只是将app.js文件作为文本提供给我。像这样:

azure raw

不确定缺少什么Azure设置让它知道将其作为Angular应用程序运行。在app Service中,我在Node Settings for Node:

下有一个条目
WEBSITE_NODE_DEFAULT_VERSION    6.9.1

以下是Azure中的目录结构:

enter image description here

这是网络配置:

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="app\scripts\app.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="app\scripts\^app.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="app\scripts\app.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

  </system.webServer>
</configuration>

1 个答案:

答案 0 :(得分:0)

这里有一些问题,但我发现了什么:

  1. dist文件夹的内容就是所需要的 - 我甚至不再拥有web.config文件了
  2. dist没有生成所有文件。生成的/scripts/vendor*.js文件为空。我通过以下建议修正了这个问题:Grunt build not populate scripts.js with bower_components
  3. 更新了App Service-&gt;应用程序设置 - &gt;虚拟应用程序和目录指向站点\ wwwroot \ dist - 这可能不是必需的,我复制了dist文件夹而不仅仅是它的内容。如果我将内容放在wwwroot级别,我可能需要进行此更改。