Day 17：今天来部署你的 Angular 应用程序吧！

昨天我们已经将制作好的版型，套用到 Angular 的根元件 AppComponent，今天，我们就要来进行发行与部署 Angular 应用程序的流程。

首先，打开终端机面板，输入 ng build，在建置专案的过程中，一样会去呼叫 Webpack，Webpack 则会对所有的 TypeScript 进行编译，并把结果打包成数支 JavaScript 档案。

花了一段时间後，建置完成，并出现以下的画面。

此时，在侧边档案总管的面板，也会出现 dist/angular-demo 资料夹。

根据 Angular 官方文件的描述，ng build 执行完成後，预设路径会是 dist/project-name，也就是我们在上图中看到的 dist/angular-demo。

而 dist/angular-demo 资料夹里的档案，就是将来我们要复制到网站服务器的档案，然後这里有一件事情可以补充说明，Angular 是个纯前端的应用程序，因此只会有前端的 Code，也就是说，只有 HTML、CSS 及 JavaScript，顶多就是还包含了一些如：图片、字型档…这类的静态档案，这部分在 dist/angular-demo 资料夹也可以得到验证。

因此，只要把 dist/angular-demo 资料夹，复制到任何一个网站服务器，就可以直接执行，再者，Angular 是一个 JavaScript 的框架，所以所有的程序码，只会在浏览器中执行。

接下来，我们来检视 dist/angular-demo 资料夹中的 index.html 档案，可以发现跟我们前一天复制的内容差不多。

唯一的差异是，在 body 结尾标签前，引入了数支 JavaScript 档案，这是我们刚才使用指令 ng build 执行完成後，帮我们自动插入的。

这里可使用快捷键 f1 来开启命令列面版，并输入 wrap 可选择切换自动换行，来完整显示程序码。

回到档案总管的 dist/angular-demo 资料夹，可以看到一支我们不需要的档案 drama-blog.html，理由是我们已经将这个档案的内容，套用到 Angular 的根元件了，所以将来部署的时候，不再需要这个档案，因此我们可以到 angular.json 这个档案，把我们之前加入的这一段路径 src/drama-blog.html 移除，这样，之後再执行 ng build 时，drama-blog.html 就不会再出现於 dist/angular-demo 资料夹中了。

以上，就是关於 Angular 应用程序部署的过程。

目前参考的课程内容，有提到 ng build 及 ng build --prod 在输出档案间，档案大小有差异。而依据 Angular 官方文件的描述，目前使用 ng build，预设情况下会建立 "production" 配置，也就是在不更改预设值的状况下，现在使用 ng build 就会得到先前版本中 ng build --prod 的结果。如果有需求的话，仍然可以使用 ng build--configuration development 来得到 development 配置的结果，而档案大小就会有明显的差异。

这边额外补充一点，我在使用 ng build 建置专案的过程中，出现如下的警告字眼：

Your global Angular CLI version (12.2.3) is greater than your local version (12.1.4). The local Angular CLI version is used.

原因是我会在两台不同的电脑操作，所以造成了 Angular CLI 版本上的些微差异，虽然，目前版本不同步，不会对 ng build 造成影响，但如果你觉得每次都有警告讯息很烦，我们可以试着来处理掉。

把上面这段警告讯息，拿去 Google，可以在 stack overflow 找到解法，这边只要使用指令 npm install --save-dev @angular/cli@latest来升级本地端的 Angular CLI 版本，再一次 ng build 之後，就可以发现警告提示消失了。