托管Angular 2应用程序

Question

我是Angular 2的新用户，我知道Angular 1.x等共享托管上的托管GoDaddy，但我不知道如何发布Angular 2应用程序，例如我有这个结构文件夹：

angular2-quickstart

--app
  app.component.ts
  main.ts

--node_modules

--typings

index.html
package.json
styles.css
systemjs.config.js
tsconfig.json
typings.json

我需要在ftp上传哪个文件？

我没有尝试任何事情，因为我不知道如何处理 提前谢谢！

Answer 1

如果您没有后端，免费托管网站通常会寻找index.html来开始他们的工作。因此，您的文件夹结构是正确的，但您需要上传js文件而不是ts文件。

Answer 2

作为一种基于组件的语言，angular 2在其部署过程中包含一些警告。 首先，开发环境中使用的文件不必运送到生产环境。简而言之，您只需要上传.js，.html和.css文件。

其次，即使您的应用程序只能部署上面提到的文件，建议包括以下过程：

捆绑：将所有.js文件编译为单个文件。例如，vendor.js可以包含所有第三方库，而bundle.js可以包含所有应用程序.js文件。 （捆绑包是出于性能原因导入的，但请记住，随着http 2的到来，这个过程将被放弃）

缩小：它是所有网络应用中的标准流程，但现在您只需缩小捆绑文件。

看一下本文，因为它提供了一些可以帮助您部署过程的工具示例。 http://www.ninjaducks.in/hacking/angular-setup/

Answer 3

我认为一个流行的工作流程是gulp-typescript你的.ts文件，并将生成的.js文件发送到分发文件夹。许多.js文件也可以“gulp-concatenated”（gulp-concat）到一个文件中。

当然你也需要发送你的html和css文件。

由于Angular2库在很大程度上依赖于node_modules文件夹中的内容，因此您需要在服务器端上传package.json和npm install。您可以尝试上传node_modules，但上传需要花费大量时间。

Answer 4

你需要使用像webpack或angular-cli这样的工具来构建angular2项目 - 这也是使用webpack post beta.14发布的。 Webpack将创建一个分发目录 - dist - 您可以将其部署到服务器。 Webpack将所有代码捆绑到一个放在dist文件夹中的文件中。这是了解angular2应用程序的代码和部署结构的一个很好的资源：https://github.com/mirkonasato/angular2-course-webpack-starter

克隆上面的目录，运行“npm install”安装所有依赖项并运行“npm run build”，你会看到你可以部署的分发文件夹 - dist。

Answer 5

好吧，您可以在根应用程序目录中运行ng build。它将创建一个包含app和文件的dist目录。您可以将此目录放入Web服务器将查找index.html

的页面中