带有 CLI 的 Angular 2 - 为生产而构建 [英] Angular 2 with CLI - build for production

问题描述

我刚刚安装了 angular-cli 1.0.0.beta.17(最新版本)，开始新项目，能够毫无问题地在端口 4200 上服务项目 - 只是标准的应用程序工作！"留言.

I have freshly installed angular-cli 1.0.0.beta.17 (latest one), start new project, able to serve project on port 4200 with no problems - just standard "app works!" message.

但是，当我尝试使用命令 ng build --prod 为生产构建这个空的通用应用程序时，我根本没有创建 main.*.js 文件，并且有几个屏幕警告如:

However when I try to build for production this empty and generic application by using command ng build --prod I do not have main.*.js file created at all and have a few screens of warnings like:

• 删除未使用的函数...
• 初始化中的站点效果...
• 等

这是一个全新的空项目 - 我还没有机会打破任何东西......

This is a brand new empty project - I did not have a chance to break anything yet...

如何构建生产版本?

推荐答案

针对 Angular v6+ 进行了更新

Updated for Angular v6+

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build --prod=true

# Dev - and so are these
ng build --configuration=development
ng build --c=development
ng build --prod=false
ng build

此处有更多标志设置

根据 Angular-cli 的 github wiki v2+，这些是启动开发和生产构建的最常见方法

Per Angular-cli's github wiki v2+, these are the most common ways to initiate a dev and production build

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

有不同的默认标志会影响 --dev 和 --prod 构建.

There are different default flags that will affect --dev vs --prod builds.

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

--prod 还设置以下不可标记的设置:

--prod also sets the following non-flaggable settings:

• 如果在 .angular-cli.json 中配置，则添加 Service Worker.
• 用 production 替换模块中的 process.env.NODE_ENV值(某些库需要此值，例如 react).
• 在代码上运行 UglifyJS.

• Adds service worker if configured in .angular-cli.json.
• Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).
• Runs UglifyJS on the code.

我需要进行一些故障排除才能使 AOT 正常工作.当我跑步时:

I need to do some troubleshooting in order to get AOT working. When I ran:

ng build --prod --aot=false

ng build --prod --aot=false

我会得到一个类似于

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

最初，我必须进行一些项目重构才能使 AOT 工作.但是，如果您遇到此错误，它们可能是一个修复程序.试试

Originally, I had to do some project refactoring to get AOT to work. However, they may be a fix if you are encountering this error. Try

npm i Enhanced-resolve@3.3.0

npm i enhanced-resolve@3.3.0

https://github.com/angular/angular-cli/issues/7113

这篇关于带有 CLI 的 Angular 2 - 为生产而构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！