一旦Angular应用进入生产阶段,你该如何部署它们呢?

到目前为止我看到的所有指南(甚至在angular.io上)都依赖于一个lite-server来服务和browserSync来反映变化——但是当你完成开发时,你如何发布应用程序呢?

我是否导入index.html页面上所有已编译的.js文件,还是使用gulp缩小它们?它们会起作用吗?在生产版本中,我是否需要SystemJS ?


当前回答

点击下面的链接,

修改Index.html页面的脚本文件路径 改变你的component.html路径,以防你的获取错误无法找到位置

https://angular.io/docs/ts/latest/guide/deployment.html !# dev-deploy

其他回答

Angular 2在Github Pages中的部署

测试Angular2 Webpack在ghpages中的部署

首先从dist文件夹中获取所有相关文件,对我来说是: + CSS文件在资产文件夹 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将这些文件推入您创建的repo中。

1 -如果你想让应用程序在根目录上运行-创建一个特殊的repo,名称为[yourgithubusername].github。IO并将这些文件推到主分支中

2——如果你想在子目录或根目录以外的不同分支中创建这些页面,创建一个分支gh-pages并将这些文件推到该分支中。

在这两种情况下,我们访问这些部署页面的方式将是不同的。

对于第一种情况,它将是https://[yourgithubusername].github.io,对于第二种情况,它将是[yourgithubusername].github。io /(回购的名字)。

如果你想使用第二种情况部署它,请确保在dist中更改index.html文件的基本url,因为所有的路由映射都依赖于你给出的路径,它应该设置为[/branchname]。

链接到本页

https://rahulrsingh09.github.io/Deployment

去回购

https://github.com/rahulrsingh09/Deployment

简单的答案。使用Angular CLI并发出

ng build 

命令在项目的根目录下。站点将在dist目录中创建,您可以将其部署到任何web服务器。

这将用于测试,如果你在你的应用程序中有生产设置,你应该使用

ng build --configuration production

这将在dist目录中构建项目,并且可以将其推送到服务器。

自从我第一次发布这个答案以来,发生了很多事情。CLI终于在1.0.0,所以按照这个指南去升级你的项目应该在你尝试构建之前发生。https://github.com/angular/angular-cli/wiki/stories-rc-update

在Angular CLI中,你可以使用以下命令:

ng build --prod

它生成一个dist文件夹,其中包含部署应用程序所需的所有内容。

如果你没有使用web服务器的经验,我建议你使用Angular to Cloud。你只需要把dist文件夹压缩成zip文件,然后上传到平台上。

你可以通过使用Ahead of Time编译器编译来获得最小和最快的加载产品包,并使用rollup来进行树摇/缩小,如angular AOT烹饪书中所示:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

在之前的回答中说过,这也可以用Angular-CLI来实现,但如果你还没有使用CLI来制作你的应用,你应该按照食谱来做。

我还有一个材料和SVG图表的工作示例(由Angular2支持),它包括一个用AOT烹饪书创建的包。您还可以找到创建bundle所需的所有配置和脚本。点击这里查看:https://github.com/fintechneo/angular2-templates/

我制作了一个快速视频,演示了AoT编译构建与开发环境的文件数量和大小之间的区别。它显示了上面github存储库中的项目。你可以在这里看到:https://youtu.be/ZoZDCgQwnmQ

要在IIS中部署应用程序,请遵循以下步骤。

第一步:使用ng Build——prod命令构建Angular应用

步骤2:构建后,所有文件都存储在应用程序路径的dist文件夹中。

步骤3:在C:\inetpub\wwwroot中创建一个名为QRCode的文件夹。

第四步:复制dist文件夹的内容到C:\inetpub\wwwroot\QRCode文件夹。

步骤5:使用命令(Window + R)打开IIS管理器,输入inetmgr,单击“确定”。

步骤6:右键单击默认网站,然后单击添加应用程序。

第七步:输入别名“QRCode”,设置物理路径为C:\inetpub\wwwroot\QRCode。

第八步:打开index.html文件,找到行href="\"并删除'\'。

步骤9:现在在任何浏览器中浏览应用程序。

你也可以跟着视频更好地理解。

视频网址:https://youtu.be/F8EI-8XUNZc