托管Angular 2应用程序

时间:2016-06-13 09:35:52

标签: javascript angularjs node.js angular hosting

我是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上传哪个文件?

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

5 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:5)

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

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

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

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

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

答案 2 :(得分:4)

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

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

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

答案 3 :(得分:1)

你需要使用像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。

答案 4 :(得分:1)

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

的页面中