如何打包Angular应用到生产环境（） _Angular应用

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

ng服务	ng构建
ng serve命令有意用于快速, 本地和迭代式开发, 还用于从本地CLI开发服务器构建, 监视和服务应用程序。	ng build命令专门用于构建应用程序和部署构建工件。
该命令不会生成输出文件夹。	输出文件夹是– dist /。
ng serve可以从内存中构建工件, 从而获得更快的开发体验。	ng build命令仅生成一次输出文件, 不提供输出文件。

步骤
在执行部署应用程序的步骤之前，请确保系统中已经安装了Angular CLI，如果没有安装，请运行以下命令。

npm install -g @angular/cli

第一步将是在部署应用程序之前将其捆绑用于生产。
导航到项目目录。

cd project-folder

【如何打包Angular应用到生产环境（）】在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 /文件夹

资料夹/档案	描述
assets	该文件夹包含从Angular CLI资产配置复制的资源。
index.html	index.html文件是应用程序的入口点。
main.[hash].js	该文件包含捆绑的应用程序。
polyfill.[hash].bundle.js	它包含polyfill依赖项
runtime- [es-version]。[hash] .bundle.js	它包含webpack加载器
style[hash].bundle.css	它包含样式定义