Angular Web App 可以在本地运行，但不能在 Azure 中运行答案

【问题标题】：Angular Web App Works Locally, But Not In AzureAngular Web App 可以在本地运行，但不能在 Azure 中运行
【发布时间】：2020-10-15 21:44:05
【问题描述】：

我正在尝试从 AngularJS 跳转到 Angular 2 及更高版本。我得到了这个：

https://www.c-sharpcorner.com/article/angular-2-routing-with-multiple-components-using-visual-studio-ide/

在本地工作并没有太多麻烦，但是当我在这里将其发布到 Azure 时：

http://potrangulartest14-10-2020.azurewebsites.net/

它不起作用。我已经阅读了我所能阅读的所有内容，网上有多个来源说我必须将我的 WEBSITE_NODE_DEFAULT_VERSION 应用程序设置值设置为 10.6.0，或者将其添加到我的 web.config：

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

但没有任何效果。有人可以解释一下我如何让这个 Angular 示例像在本地一样在 Azure 中工作吗？看来，Angular 路由元素根本没有在 Azure 中构建，尽管存在且完整，以便在本地工作。提前感谢您的帮助。

【问题讨论】：

您可以尝试只使用一个简单的 web.config：例如：
我假设您已经为生产构建了您的 spa 并且在您的应用服务中存在 dist 文件夹。
我无法让 web.config 工作，因为它抱怨路径为空。我在 debug 和 release 上都试过了，没有区别。
查看您的实时站点，在 node_modules 文件夹中有对脚本的引用。您是为生产而不是开发而构建的吗？脚本应该打包并直接从节点模块文件夹中引用，因为这可能在您的应用服务中不存在。
我尝试在 Visual Studio 的调试模式和发布模式下构建它，然后再将其发布到 Azure。我什么都不知道。最终结果似乎是一样的。

标签： angular azure routes

【解决方案1】：

好的，现在已经开始工作了。正如上面 Allan 所说，有多个对位于 node_modules 文件夹中的 .js 文件的引用（谢谢 Allan）。

这在本地工作，但由于它们未包含在我的项目中，因此在发布到云时它们不起作用。在项目中包含这些文件解决了这个问题。

如果有人对将这些文件简单地包含在项目中是否通常有任何建议，或者是否有更好的打包方法，那么我很想听听。我不想最终包含整个 node_modules 文件夹，但是在哪里画线呢？

感谢我在这里学到的任何信息，再次感谢艾伦为我指明了正确的方向。

【讨论】：

除非您尝试进行服务器端渲染，否则您应该不在生产中需要node_modules。构建的输出应该是静态 HTML、JS、CSS 包。