Angular 是目前前端开发领域最热门的框架之一，它通过 TypeScript 提供了强类型系统和更好的可维护性。然而，手动配置 Angular 应用是非常麻烦和繁琐的，Angular CLI 的出现很好地解决了这个问题。本文将介绍如何使用 Angular CLI 构建生产就绪的应用程序，包括步骤和一些技巧。
安装 Angular CLI
首先，我们需要安装 Angular CLI。如果您还没有安装 Node.js，您需要先下载 Node.js 并安装。然后打开命令行窗口并输入以下命令：
npm install -g @angular/cli
该命令会在全局安装 Angular CLI，这可能需要一些时间。安装完成后，您就可以使用它来创建、运行和构建 Angular 应用了。
创建 Angular 应用
接下来我们要创建一个新的 Angular 应用。对于这一步，您需要在命令行窗口中切换到您希望创建应用的目录，并输入以下命令：
ng new my-app
该命令会创建一个名为“my-app”的新 Angular 应用，并且会自动为您完成一些基本配置。
运行 Angular 应用
完成创建应用之后，你会进入应用所在的目录。到这里您可以使用以下命令来运行该应用：
cd my-app ng serve
该命令将启动一个本地开发服务器，并在您的浏览器中打开应用的首页。此时如果您改变任何代码，应用将自动重新编译和刷新。
构建生产就绪的应用程序
当您已经完成了开发并准备上线时，您需要对您的应用进行构建，以生成一个发布版本。构建版本的应用程序将会更加轻量级，并且在用户端的加载速度也会更快。
你可以使用以下命令来构建生产版的应用程序：
ng build --prod
该命令将会对您的应用程序进行构建，并且将构建版本的应用程序产生在 dist/ 目录中。通过 --prod 选项，构建过程会进行更为彻底的优化。
使用 Docker 部署应用程序
在完成构建之后，我们通常会将应用程序部署到服务器上。在这种情况下，使用 Docker 容器来打包和部署我们的应用程序是一个不错的选择。
您可以使用以下 Dockerfile 来构建一个 Docker 容器：
-- -------------------- ---- ------- - ---- ----- -------- ---- ------------ - ------------------------ --- -- ------------------- ---- ---------- ------------------ - ------- ----- - ---- --- ---- ----- --------------------- - -- -- -- ------ --
该 Dockerfile 文件使用了官方的 Nginx 镜像，并拷贝了我们的构建版本 dist/ 到 Nginx 的 HTML 目录下，再替换掉 Nginx 的默认配置文件。这样我们就将应用程序打包到了一个 Docker 镜像中。
最后，构建 Docker 镜像并运行它：
docker build -t my-app . docker run -p 80:80 my-app
总结
本文介绍了如何使用 Angular CLI 构建生产就绪的应用程序，包括安装 Angular CLI，创建、运行和构建 Angular 应用，以及使用 Docker 部署应用程序的方法。Angular CLI 极大地简化了我们的开发流程，使开发人员能够快速构建高质量的 Angular 应用。如果您正在使用 Angular，那么强烈建议您尝试一下 Angular CLI，并且将 Angular 应用程序部署到 Docker 容器中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c883975ad90b6d0413ce54