介绍
在部署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 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 | 它包含样式定义 |
缺点
- 性能：动态应用程序并非总是能达到理想的效果。复杂的SPA可能会因为大小不便而使用起来不便。
- 陡峭的学习曲线：由于AngularJS是一种多功能工具, 因此, 完成任何任务总是有不止一种方法。这在工程师之间引起了一些混乱。
