如何将使用 Typescript 开发的 Angular 2 应用程序部署到生产环境？答案

【问题标题】：How to deploy Angular 2 application developed in Typescript to production?如何将使用 Typescript 开发的 Angular 2 应用程序部署到生产环境？
【发布时间】：2015-12-22 02:16:40
【问题描述】：

我是 Angular 2 的新手。我对 Angular 2 在生产环境中的工作方式感到困惑。

在生产服务器中运行 Angular 2 应用程序的先决条件是什么？
是否可以在 IIS 服务器中部署应用程序，还是需要节点服务器？
在开发机使用node编译文件后，是否需要同时部署.js和.ts到生产环境？

【问题讨论】：

标签： angular

【解决方案1】：

我使用 JSPM 来准备我的 angular2 项目生产。 JSPM 等其他流行工具包括 webpack 和 browserfy。 JSPM 将完成的一项重要任务是捆绑构成 angular2 项目的各种模块。我还将“selfExecutingBundle”标志设置为 true 并让 JSPM 制作一个捆绑的 js 文件（例如 myApp.bundled.js），然后从那里缩小它（myApp.bundled.min.js），并在index.html 文件。

<html>

<head>
    <title>Hello Angular World</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
    <script src="/js/myApp.bundle.min.js"></script>
</body>

</html>

这就是你所需要的！

将来，当 HTTP/2 规范更普遍时，可能不需要捆绑基于模块的项目，但现在我认为需要捆绑。

没有对您的打字稿文件的引用（因为它们已经在制作 myApp.bundled.js 的过程中进行了转译）。正如 Zama 所说，您可以在任何服务器上运行 angular2（我使用 IIS 并且工作正常）。

更新：自从 Angular 2 的最终版本发布以来，我已经切换到使用 angular-cli 来构建生产环境。设置很简单（没有 gulp 任务的意大利面），并且最终的包是超级优化的（尤其是由于 tree-shaking）。我建议查看 angular-cli 以设置、开发和构建您的 ng2 项目。

【讨论】：

您有关于如何将打字稿中的所有内容捆绑到单个文件并缩小它的指南或其他内容吗？我第一次尝试将我的 Angular 应用程序投入生产。由于我是 Typescript 的新手，我不知道什么是好的方法。
这可能有点棘手。我在这里详细阐述了一点：stackoverflow.com/questions/33683885/angular2-with-asp-net-5/… 如果您需要更多帮助，请给我留言。配置后，它就像一个魅力。
我决定将我的 angular2 项目转移到：github.com/AngularClass/angular2-webpack-starter，制作单个 js 文件实际上非常轻松。
你好白兰度。由于我正在尝试遵循您的路线并使用 JSPM 将所有内容捆绑到一个 js 文件中，因此我想知道您是否可以共享一个示例，也许可以链接到示例项目的 git 存储库或其他东西。现在有很多新东西要学，angular2、react、systemJS、typescript，我觉得现在它是压倒性的。任何帮助将不胜感激。我运行 spring-boot+angular2。在此先感谢。
@Brankollic 我在此回复中详细说明了一点：stackoverflow.com/questions/34614743/… 如果这有帮助，请告诉我。一开始做对可能有点痛苦。

【解决方案2】：

Angular 2 应用程序是用 TS 编写的，但浏览器最后只能理解 JavaScript。因此，任何 TS 项目在开发时都会被转译为 JavaScript first event。

您可以在任何服务器上运行 Angular 2 应用程序。

您只需部署 .js 文件，因为浏览器不会解析 .ts 文件。

【讨论】：

【解决方案3】：

有许多初始种子项目包括服务和构建项目的能力。我正在使用（并且非常满意）https://github.com/antonybudianto/angular2-starter

您可以在这里找到许多其他人： https://github.com/timjacobi/angular2-education#boilerplates

【讨论】：

【解决方案4】：

应用服务器（我的回答是使用 Tomcat）、node.js 和 angular-cli（通过运行“npm install -g angular-cli”）
您可以部署到其他服务器
只有 .html、.js 和 .map 文件（至少对于我的解决方案而言）

如果您使用 angular-cli instructions shown here 创建了应用程序，这会更好。在您的应用程序根目录中，运行以下命令 ng build --env=prod，它将通过 webpack 捆绑 \dist 目录中的可部署项。

复制\dist 目录并将其粘贴到{CATALINA_HOME}\webapps。将 \dist 重命名为文件夹名称，例如 \foo。打开 \foo\index.html 并编辑 base-href 行以表示您的新目录名称：

<base href="/foo/">

通过 startup.bat 或您选择的首选项启动 Tomcat 并导航到 http://localhost:8080/foo/，您应该能够查看您的 Angular 2 应用程序。

注意：如果您没有使用ng new 命令创建项目，我已经阅读了在构建之前执行ng init 将允许您仍然遵循这些步骤的位置。不过我自己还没有测试过。

【讨论】：

【解决方案5】：

在生产环境中上传应用非常简单。步骤：

使用关注https://angular.io/docs/ts/latest/guide/webpack.html 创建一个应用程序
如果您的应用程序有路由器，那么不要忘记使用 {useHash: true} 来防止错误无法加载页面。喜欢：

RouterModule.forRoot(routes, { useHash: true })
在您的项目根路径中键入 npm build。
它会在项目根目录中自动创建 dist 文件夹。
不需要在生产环境中设置节点服务器。您可以简单地选择 apache 服务器并上传 dist 文件夹内容。

【讨论】：

你能分享更多关于最后一步的细节吗？例如，如果我想使用 tomcat，我应该将什么准确地复制到 webapps 文件夹中？我需要做一些配置吗？非常感谢。
npm build 命令没有创建 dist 文件夹，我缺少什么？
@BingLu 我们不需要tomcat服务器。只需配置 apache 服务器并粘贴内容。如果你想使用 tomcat 服务器然后制作 maven 项目并将所有数据从 dist 文件夹复制到项目中的 webapps 文件夹然后部署它。
@B.J.A.A.打开 package.json 文件然后检查脚本数组中的构建命令

【解决方案6】：

在开发应用程序时，所有的打字稿文件都会被转译器转译成 js 文件，因此您在生产中不需要 ts 文件。

此外，当您完成开发后，您需要做的就是使用一些捆绑工具（如webpack-starter 或angular2-seed）制作dist 目录的捆绑包。

然后您将此捆绑包部署到您的服务器。

上述软件包提供了大量关于如何将 angular2 应用部署到生产环境的信息。

希望这会有所帮助。

【讨论】：