如何捆绑Angular应用进行生产？

介绍
在部署Web应用程序之前，Angular提供了一种在几个CLI命令的帮助下检查Web应用程序行为的方法。通常，ng serve命令用于从本地内存构建，监视和服务应用程序。但是对于部署，通过运行ng build命令可以看到应用程序的行为。

ng服务和ng构建之间的区别

ng serve	ng build
The ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server.	The ng build command is intentionally for building the apps and deploying the build artifacts.
The command does not generate an output folder.	The output folder is – dist/.
The ng serve builds artifacts from memory instead for a faster development experience.	The ng build command generates output files just once and doesn’t serve them.

脚步
在执行部署应用程序的步骤之前，请确保尚未在系统中安装Angular CLI，然后运行以下命令。

npm install -g @angular/cli

第一步将是在部署应用程序之前将其捆绑用于生产。

• 导航到项目目录。

  cd project-folder

• 在Angular CLI中运行ng build命令

  ng build --prod 

  

• 要获取应用程序的预览，请运行以下命令：

  ng serve --prod

  这将启动带有生产文件的本地HTTP服务器。导航到http：// localhost：4200 /以查看该应用程序。
  通过这些步骤，就可以部署应用程序了。

方法
ng build命令将Angular应用编译到给定输出路径下名为dist /的输出目录中。此命令必须在工作目录内执行。 Angular中的应用程序构建器使用webpack构建工具，并在工作区配置文件(angular.json)中指定了配置选项，或者使用了命名的替代配置。当您使用CLI创建项目时，默认情况下会创建一个“生产”配置，您可以通过指定“ configuration="production"或--prod="true"选项来使用该配置。

–prod标志激活许多优化标志。其中之一是–aot for Ahead of Time编译。您的组件模板是在构建过程中进行编译的，因此TypeScript可以检测代码中的更多问题。您可以在开发人员模式下进行编译，但是如果要在生成产品之前看到此错误，仍可以激活–aot标志。

dist /文件夹
dist文件夹是build文件夹，其中包含可以在服务器中托管的所有文件和文件夹。
dist文件夹包含JavaScript格式的angular应用程序的已编译代码，以及所需的HTML和CSS文件。
内部dist /文件夹

Folder/File	Description
assets	The folder contains resources copied from the Angular CLI assets configuration.
index.html	index.html file is the entrypoint for the application.
main.[hash].js	The file contain bundled application.
polyfill.[hash].bundle.js	It contains polyfill dependencies
runtime-[es-version].[hash].bundle.js	It contains webpack loader
style.[hash].bundle.css	It contains the style definitions

缺点

• 性能：动态应用程序并非总是能达到理想的效果。复杂的SPA可能会因为大小不便而使用起来不便。
• 陡峭的学习曲线：由于AngularJS是一种多功能工具，因此完成任何任务总是有不止一种方法。这在工程师之间引起了一些混乱。