【问题标题】：Angular2 - How to deploy/build npm based Angular 2 siteAngular2 - 如何部署/构建基于 npm 的 Angular 2 站点
【发布时间】：2016-12-31 20:34:08
【问题描述】：

我对这一切都比较陌生，我读过其他一些感觉相似的问题，但我的经验不足让我质疑哪条路是最好的。

我有一个基于 Angular 2 指南中的快速入门的正常运行的 Angular 2 站点。它目前使用 lite-server 在本地托管，但我想将其移至我们的服务器，以便可以在外部查看。我的理解是我需要将 TS 文件转换为 JS（我认为这已经从 lite-server 实时发生），然后将这些文件移动到服务器？

有人可以解释实现这一点所需的步骤吗？感觉好像 Angular 2 快速入门有利于构建 Systemjs，但是我看到很多帖子都提到了 webpack。

systemjs 和 webpack 可以互换吗？它们是将 Angular 2 项目构建为可部署格式的首选方法吗？

【问题讨论】：

看看这篇文章，可能会给你一点见解和方向stackoverflow.com/questions/35539622/…
我已查看此链接，希望了解更多详情。批准的答案 1.) 说我可以转换 TS 并移动文件。这是怎么做到的？这些文件已经在服务器上并使用 IIS 进行了设置，但角度永远不会加载，主应用程序指令不会触发，只会在 index.html 上看到“正在加载...”。我确实有一个 systemjs.config.js 文件，这是否意味着我需要查看有关 systemjs 的解决方案或者我可以使用 webpack？只是在寻找前进的方向。

标签： angular deployment build

【解决方案1】：

首先澄清一下

将文件编译为 js 的不是 lite 服务器，而是 typescript tsc。如果您尝试过 angulor.io 的 5 分钟快速入门，那么您可以在第一阶段看到它正在安装这些依赖项

"devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",------>for serving app to browser
    "typescript": "^1.8.10",----->for compiling
    "typings":"^1.0.4"
  }

在这里你可以在这个脚本中看到它是如何发生的

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

首先它运行 tsc，它将你的文件编译为 js，然后它在监视模式下运行它，以便它可以检测任何更改并重新编译你的文件，并在它运行具有此功能的 lite 脚本命令

"lite": "lite-server"

现在回答您的实际问题

Angular2 - 如何部署/构建基于 npm 的 Angular 2 站点？

有很多工具，如 grunt、gulp、webpack 和 jspm。 Angular 团队还宣布了一个新工具 angular-cli，它让事情变得更容易。

请注意，它仍在开发中且不稳定。 learn about angular-cli

有很多关于如何使用这些工具的指南。我也有一个

angular2-webpack-seed

Webpack 在所有其他工具中居于首位，这是我的看法，所以肯定有其他工具更喜欢其他工具。我相信 webpack 给了你很多选择。有许多插件可以让您的生活更轻松。您可以使用 webpack-dev-server 运行您的应用程序，它还为您提供了很棒的功能。

learn about webpack

【讨论】：

感谢您的解释。我现在开始更加了解这一点。我选择了 webpack。我正在为 Angular 2 配置它。再次感谢。
欢迎您的明智选择，如果您发现使用 webpack 进行配置有困难，请查看我在 config 文件夹中的种子，它非常轻巧且易于理解 :-)
当我尝试构建似乎源于以 .ts 结尾的条目文件时，我遇到了一些错误。 “错误：无法解析模块'ts'”知道如何纠正这个问题吗？我在解析扩展数组中有“.ts”。
Nvm 在最后一条评论中，我发现这是 b/c 我自己缺少实际的加载程序文件。