Ng构建——配置生产 (角度14以上)

Angular CLI 1.x。适用于Angular 4.x。x 5. x.x)

这支持:

角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，或者只是想查看项目框架而不安装，请在这里检查如何做到这一点。

包的步骤

在项目文件夹内:

ng build -prod

在当前版本中，您需要手动指定——aot，因为它可以在开发模式中使用(尽管由于速度慢，这是不实际的)。

它还为更小的包执行AoT编译(没有Angular编译器，而是生成编译器输出)。如果你使用Angular 4, AoT的包会更小，因为生成的代码更小。 你可以在开发模式下用AoT测试你的应用(source cemaps, no minification)，通过运行ng build——AoT测试你的应用。

输出

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

部署文件

构建步骤的结果如下:

(注意:<content-hash>指的是文件内容的hash /指纹，这意味着是一种缓存破坏方式，这是可能的，因为Webpack自己写脚本标签)

。/ dist /资产 原样从。/src/assets/**复制的文件 / dist / index . html 从。/src/index.html，添加webpack脚本后 源模板文件可以在。/angular-cli.json中配置 / dist / inline.js 小型webpack加载器/ polyfill / dist /主要。< content-hash > .bundle.js 主.js文件，包含所有生成/导入的.js脚本 。/ dist /风格。< content-hash > .bundle.js 当你为CSS使用Webpack加载器时，这是CLI的方式，它们是通过JS加载的

在旧版本中，它还创建了gzip版本来检查它们的大小，以及.map源地图文件，但这不再发生，因为人们一直要求删除这些文件。

其他文件

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

/ out-tsc /。 从/ src / tsconfig。json的outDir / out-tsc-e2e /。 从/ e2e / tsconfig。json的outDir / dist / ngfactory / 来自AoT编译器(在beta 16中，不使用CLI就无法配置)

使用SystemJs生成器和gulp的Angular 2生产工作流

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

源代码与示例应用程序在Github: https://github.com/Anjmao/angular2-production-workflow

清洁打字文件编译js文件和dist文件夹 在app文件夹内编译typescript文件 使用SystemJs捆绑器将所有内容捆绑到dist文件夹，并生成哈希值，以便浏览器缓存刷新 使用gulp-html-replace将index.html脚本替换为捆绑版本并复制到dist文件夹 复制资产文件夹内的所有内容到dist文件夹

Node:虽然你总是可以创建自己的构建过程，但我强烈建议使用angular-cli，因为它有所有需要的工作流，现在它工作得很完美。我们已经在生产环境中使用它了，在使用angular-cli时没有任何问题。

带Webpack的Angular 2(不需要CLI设置)

1- Angular2团队的教程

Angular2团队发布了一个使用Webpack的教程

我将教程中的文件创建并放置在一个小型GitHub种子项目中。因此，您可以快速地尝试工作流。

产品说明:

npm安装 npm的开始。为发展。这将创建一个虚拟“dist”文件夹，该文件夹将被重载到您的本地主机地址。 NPM运行构建。用于生产。这将创建一个可以发送到web服务器的物理“dist”文件夹版本。dist文件夹有7.8MB，但实际上只需要234KB就可以在web浏览器中加载页面。

2 - Webkit入门套件

这个Webpack入门套件比上面的教程提供了更多的测试功能，看起来很受欢迎。

Ng服务的工作是为我们的应用程序的开发目的服务。生产方面呢?如果我们看看我们的包装。Json文件，我们可以看到有我们可以使用的脚本:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

构建脚本使用Angular CLI的ng build，并带有——prod标志。我们现在试试。我们有两种方法:

#使用NPM脚本

npm run build

#直接使用cli

ng build --prod

这次我们得到了四个文件而不是五个。——prod标志告诉Angular把我们的应用缩小很多。

你可以在github上使用 angular-cli-ghpages

请查看链接，以了解如何使用此cli进行部署。

部署的网站通常会存储在github的某个分支中

gh-pages

使用可以克隆git分支和使用它像静态网站在您的服务器