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

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

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


当前回答

对于那些看到“加载模块脚本失败:…”的错误。简单的去你的棱角分明。将“OutputPath”改为“dist”。然后运行ng build——configuration production来构建你的应用。

原因是angular认为你的应用程序在根目录下,但如果你不做这个更改,它就在根目录/YourAppName下

其他回答

简单的答案。使用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文件,然后上传到平台上。

如果你在Apache (Linux服务器)上部署你的应用程序,那么你可以遵循以下步骤: 请遵循以下步骤:

步骤1: Ng build——prod——env=prod

步骤2。(复制区域到服务器) 然后创建dist文件夹,复制dist文件夹并部署到服务器根目录。

步骤3。在根文件夹中创建。htaccess文件,并将其粘贴到。htaccess . conf文件中

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

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

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应用到优化对象的每个属性,这实际上将禁用所有的最小化。

希望这能有所帮助,希望我能在这周尝试一下。

在Azure上创建Web应用程序 在vs code中创建Angular 2应用。 Webpack到bundle.js。 下载Azure站点发布的概要文件xml 配置Azure-deploy using https://www.npmjs.com/package/azure-deploy与网站简介。 部署。 尝尝奶油。