将 Angular 2 应用程序部署到 Azure答案

【问题标题】：Deploy Angular 2 App to Azure将 Angular 2 应用程序部署到 Azure
【发布时间】：2025-12-05 16:55:01
【问题描述】：

我正在学习 Angular 2 和 Azure。我跟着Angular 2 Tutorial，一切都在本地运行良好。

我发布了app to Azure。发布成功。但是当我访问该站点时，它卡在了加载阶段。查看 Chrome 控制台中的日志，我看到以下错误。找不到/app/main.ts 文件。

按照this question 的建议，我通过“Kudu”仪表板检查了我部署的文件。我没有看到任何*.ts 仅部署了*.js 和*.map。

然后我回到 Visual Studio 将所有 *.ts 文件的属性更改为 Copy Always。更改后可以看到*.ts文件被复制到.\bin\app目录下。但是，在我将项目重新发布到 Azure 后（再次成功），我在请求 main.ts 文件时仍然遇到 404 错误。

根据this question IIS 无法正确提供 Typescript 文件。

首先：如何在 Azure 上应用建议的更改来修复它？

其次：为什么我们需要使用*.ts 文件？根据我的理解，*.ts 被编译为*.js。为什么我们不能只请求正确部署到 Azure 的 *.js 文件？

【问题讨论】：

嗨，对不起，你能告诉我你是如何上传你的 angular2 应用程序的（意思是你压缩并上传它，你上传到wwwroot 或wwwroot\webapp？）还有什么您使用的 WebApp 类型？我被困在这里..对不起！
嗨@Selem，我没有手动进行任何压缩。只是按照视觉工作室的发布向导。我可以看到我的文件在“wwwroot”目录下。我的应用是 ASP.NET Web Api 2。希望这会有所帮助。
你好，我刚刚在我的 azure 帐户上创建了一个 Web 应用程序。然后打开 VS2015 并创建 ASP.NET Empty App 4.6。我添加了 angular 2 示例应用程序文件并在本地运行良好。然后我将它发布到azure（右键单击项目并发布），我什至可以通过kudu看到文件，并且在systemjs.config.js中将defaultExtension设置为js。但是地图文件没有上传。我仍然有同样的问题'卡在加载......'。有什么想法吗？你介意分享一个工作应用吗？
当然，这是我在 azure 上构建和托管的实时 angular 2 网站。 learnangular2.azurewebsites.net/crisis-center
你有一个具体的答案：*.com/questions/37487046/…

【解决方案1】：

@弗兰克，

使用 .ts 文件仅用于演示和教程，实际上建议使用 .js 文件运行您的网站。

我正在运行一个示例应用程序，您可以参考一下以了解它是如何工作的。

希望这会有所帮助。

【讨论】：

【解决方案2】：

这是我遵循的步骤：

【讨论】：

很酷，但链接已失效
任何关于如何使用 Sublime Text 或 Atom 或 Webstorm 的线索？
此链接指定从 A 到 Z 所需的操作 *.com/questions/37487046/…
我认为这是正确的答案。您需要在应用程序容器中进行包还原，以便它具有 Angular 和所有 npm 依赖项。您可以通过将 node_modules 添加到您的项目并将其包含在您的部署中来执行此操作，或者您可以通过在部署并在 wwwroot 目录中运行 npm install 后登录到实例来执行此操作。我认为后者更干净。