托管 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 文件。 （出于性能原因，Bundles 是导入的，但请记住，随着 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 发布 beta.14 版本。 Webpack 将创建一个分发目录 - dist - 您可以将其部署到服务器。 Webpack 将所有代码捆绑到一个文件中，该文件放在 dist 文件夹中。这里有一个很好的资源来了解angular2 app的代码和部署结构：https://github.com/mirkonasato/angular2-course-webpack-starter

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

Answer 5

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