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

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

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


当前回答

要在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

其他回答

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到dist文件夹ng Build——prod——output-path ./dist来构建你的Angular应用 在你的Angular应用程序路径下创建server.js文件: Const express = require('express'); Const path = require('path'); Const app = express(); app.use(表达。Static (__dirname + '/dist')); App.get ('/*', function(req,res) { res.sendFile(路径。Join (__dirname + '/dist/index.html')); }); app.listen (80); 永远启动server.js

这是所有!您的应用程序应该正在运行!

您可以构建用于生产的应用程序

ng build --configuration=production

然后你可以检查你的角度。它的值通常是dist,但也可以是不同的。

"build": {
          "options": {
            "outputPath": "dist"

使用dist作为值,生成的输出文件将放在/dist文件夹下

在构建angular项目时,你的项目将只由静态文件Html、Javascript、Css和图像或其他资产组成。正因为如此,你所需要的只是一个可以向客户端提供静态文件的web服务器。就这么简单。可以是nginx, tomcat,任何可以将这些静态文件提供给客户端的东西。这在angular的文档中也有说明

因为这些文件是静态的,你可以把它们托管在任何web服务器上 具备文件服务能力

你在outputPath下构建的项目已经包含了一个index.html,它将自动导入所有必要的文件,所以当index.html被传递给客户端时,浏览器也将获取所有其他必要的文件。必要的信息已经包含在index.html中。

你的第二个问题

我用gulp缩小它们吗

官方的方式

角。Json将包含每个环境的特定配置,其中之一将是优化

优化可以是布尔值(true, false)

"configurations": {
            "production": {
              "optimization": true  --> will mean true for all properties of the next custom object

优化也可以是一个自定义对象

 "configurations": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true
      },
      "fonts": true
    }

切换到"scripts": false将导致.js文件不会被缩小

同时切换到样式-> "minify": false也将避免样式缩小。

不管角的构型是什么。Json进行优化,它可以被覆盖,如果你在构建过程中提供一个参数。因此,通过执行ng build——configuration=production——optimization=false,它将构建用于生产的项目,并将值false应用到优化对象的每个属性,这实际上将禁用所有的最小化。

截至2017年,最好的方法是在你的angular项目中使用angular-cli (v1.4.4)。

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

你不需要显式地添加——aot,因为它在默认情况下是打开的——prod。-output-hashing的使用取决于你对缓存爆破的个人偏好。

您可以通过添加以下内容显式添加CDN支持:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

如果你计划使用CDN进行托管,这是相当快的。

要在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