如何捆绑 Angular 应用程序进行生产

使用 Angular CLI 2 到 14（TypeScript）

一次性设置

npm install -g @angular/cli

ng new projectFolder 创建一个新应用程序

捆绑步骤

ng build（当目录为 projectFolder 时在命令行中运行）。用于生产的标记 prod 包现在是默认设置（如果需要，请参阅 Angular 文档以对其进行自定义）。

使用 Brotli 压缩资源 使用以下命令 for i in dist/*/* 压缩资源；做 brotli $i;完毕

v6+ 的包默认生成为 projectFolder/dist(/$projectFolder）**

输出

使用 Angular 14.0.2 使用 CLI 14.0.2 和选项 CSS 没有 Angular 路由的大小

dist/main.[hash].js 捆绑您的应用程序 [大小：118 KB 用于新的 Angular CLI 应用程序空，36 KB 压缩]。

dist/polyfill-[es-version].[hash].bundle.js 捆绑的 polyfill 依赖项（@angular，RxJS ...）[大小：34 KB 用于新的 Angular CLI 应用程序为空，11 KB 压缩]。

dist/index.html 应用程序的入口点。

dist/runtime.[hash].bundle.js webpack 加载器

dist/style.[hash].bundle.css 样式定义

从 Angular CLI 资产配置复制的 dist/assets 资源

部署

您可以使用启动本地 HTTP 服务器的 ng serve --prod 命令获取应用程序的预览，以便可以使用 http://localhost:4200 访问带有生产文件的应用程序。 这对于生产用途来说是不安全的。

对于生产用途，您必须部署所选 HTTP 服务器中 dist 文件夹中的所有文件。

---

2.0.1 最终使用 Gulp（TypeScript - 目标：ES5）

一次性设置

npm install（当目录为projectFolder时在cmd中运行）

捆绑步骤

npm run bundle（目录为projectFolder时在cmd中运行）bundles生成到projectFolder/bundles/

输出

bundles/dependencies.bundle.js [ size: ~ 1 MB (as small as possible) ] 包含 rxjs 和 angular 依赖项，而不是整个框架

包含 rxjs 和角度依赖，而不是整个框架

bundles/app.bundle.js [大小：取决于你的项目，我的是 ~ 0.5 MB] 包含你的项目

包含您的项目

文件结构

projectFolder / app /（所有组件、指令、模板等）

项目文件夹/gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');

gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

gulp.task('inline-templates', function () {
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
    .pipe(tsc({
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    }))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

gulp.task('bundle-dependencies', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');

  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

projectFolder / package.json（与快速入门指南相同，仅显示捆绑所需的 devDependencies 和 npm-scripts）

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  },
  "license": "ISC",
  "dependencies": {
    ***
  },
  "devDependencies": {
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  }
}

projectFolder / systemjs.config.js（与快速入门指南相同，不再提供）

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  };

  // filterSystemConfig - index.asp's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

projetcFolder / dist-systemjs.config.js （只是显示了与 systemjs.config.json 的区别）

var map = {
    'app':                        'dist/app',
  };

projectFolder / index.html (production) - 脚本标签的顺序很关键。在 bundle 标记之后放置 dist-systemjs.config.js 标记仍然允许程序运行，但依赖包将被忽略，并且将从 node_modules 文件夹加载依赖项。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <base href="/"/>
  <title>Angular</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>

<my-app>
  loading...
</my-app>

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>

<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>

<script>
    System.import('app/boot').catch(function (err) {
      console.error(err);
    });
</script>
</body>
</html>

projectFolder / app / boot.ts 是引导程序所在的位置。

我能做的最好的:)

---

Angular 2 和 Webpack（没有 CLI 设置）

1- Angular2 团队的教程

Angular2 团队发布了使用 Webpack 的 tutorial

我创建了教程中的文件并将其放置在一个小的 GitHub seed project 中。因此，您可以快速尝试工作流程。

指示：

npm 安装

npm 开始。为了发展。这将创建一个虚拟的“dist”文件夹，该文件夹将在您的本地主机地址上重新加载。

npm 运行构建。用于生产。 “这将创建一个物理“dist”文件夹版本，而不是可以发送到网络服务器。dist 文件夹是 7.8MB，但实际上只需要 234KB 就可以在网络浏览器中加载页面。

2 - Webkit 入门工具包

此 Webpack Starter Kit 提供了比上述教程更多的测试功能，并且看起来很受欢迎。

---

使用 SystemJs builder 和 gulp 的 Angular 2 生产工作流程

Angular.io 有快速入门教程。我复制了本教程并扩展了一些简单的 gulp 任务，将所有内容捆绑到 dist 文件夹，可以复制到服务器并像那样工作。我尝试优化一切以在 Jenkis CI 上正常运行，因此 node_modules 可以被缓存并且不需要复制。

Github 上带有示例应用程序的源代码：https://github.com/Anjmao/angular2-production-workflow

清理 typescripts 编译的 js 文件和 dist 文件夹 在 app 文件夹中编译 typescript 文件 使用 SystemJs 捆绑器将所有内容捆绑到 dist 文件夹，并生成用于浏览器缓存刷新的哈希 使用 gulp-html-replace 将 index.html 脚本替换为捆绑版本并复制到 dist 文件夹将 assets 文件夹中的所有内容复制到 dist 文件夹

节点：虽然您总是可以创建自己的构建过程，但我强烈建议使用 angular-cli，因为它具有所有需要的工作流程并且现在可以完美运行。我们已经在生产中使用它，并且完全没有 angular-cli 的任何问题。

---

Angular CLI 1.xx（适用于 Angular 4.xx、5.xx）

这支持：

Angular 2.x 和 4.x

最新的 Webpack 2.x

Angular AoT 编译器

路由（正常和懒惰）

SCSS

自定义文件捆绑（资产）

其他开发工具（linter、单元和端到端测试设置）

最初设定

ng new project-name --routing

您可以添加 --style=scss 以获得 SASS .scss 支持。

您可以添加 --ng4 以使用 Angular 4 而不是 Angular 2。

创建项目后，CLI 会自动为您运行 npm install。如果您想改用 Yarn，或者只想查看项目骨架而不安装，check how to do it here。

捆绑步骤

在项目文件夹内：

ng build -prod

在当前版本中，您需要手动指定 --aot，因为它可以在开发模式下使用（尽管由于速度慢，这不实用）。

这也为更小的包执行 AoT 编译（没有 Angular 编译器，而是生成编译器输出）。如果您使用 Angular 4，则使用 AoT 的包要小得多，因为生成的代码更小。
您可以在开发模式下使用 AoT（源地图，不缩小）测试您的应用，并通过运行 ng build --aot 来测试 AoT。

输出

默认输出目录是 ./dist，尽管它可以在 ./angular-cli.json 中更改。

可部署文件

构建步骤的结果如下：

（注意：<content-hash> 指的是文件内容的哈希/指纹，这是一种缓存破坏方式，这是可能的，因为 Webpack 自己编写 script 标签）

./dist/assets 文件按原样从 ./src/assets/** 复制

./dist/index.html 来自 ./src/index.html，添加 webpack 脚本后 源模板文件可在 ./angular-cli.json 中配置

./dist/inline.js 小型 webpack 加载器 / polyfill

./dist/main..bundle.js 包含所有生成/导入的 .js 脚本的主 .js 文件

./dist/styles..bundle.js 当你为 CSS 使用 Webpack 加载器时，这是 CLI 方式，它们在这里通过 JS 加载

在旧版本中，它还创建了 gzipped 版本以检查其大小和 .map sourcemaps 文件，但随着人们不断要求删除这些文件，这种情况不再发生。

其它文件

在某些其他情况下，您可能会发现其他不需要的文件/文件夹：

./out-tsc/ 来自 ./src/tsconfig.json 的 outDir

./out-tsc-e2e/ 来自 ./e2e/tsconfig.json 的 outDir

./dist/ngfactory/ 来自 AoT 编译器（从 beta 16 开始，如果不分叉 CLI，则无法配置）

---

是否可以将角度库及其依赖项与我的应用程序分开？

不使用 CLI，这是为了让 tree-shaking 起作用。那就是删除所有未在您的应用程序中使用的 Angular EcmaScript 模块。有计划在开发模式下禁用此功能以提高速度（他们将加载的库称为“DLL”），但没有计划在最终结果中分离。如果你在没有 CLI 的情况下滚动你自己的 Webpack 东西，它应该是可以实现的。

如何使用 dist 文件夹检查我的应用程序。如何在我的网络服务器中托管？

您只需将其复制到服务器。这是一个简单的静态网站，无论如何都可以提供服务。如果您使用路由，您可能希望将所有调用重定向到 HTML 文件，为此请检查服务器配置部分 angular.io/docs/ts/latest/guide/… 上的 Angular 部署文档

@Meligy 如果我从产品包中删除 <content-hash> 怎么办。它可能会导致获取最新捆绑包时出现问题？