目录

一、Build

二、ng build

三、Build Targets和Environment

四、Serve

五、部署到nginx

---

一、Build

Build主要会做以下动作:

• 编译项目文件并输出到某个目录
• Build targets决定了输出的结果
• bundling 打包
• 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉)

二、ng build

可以先看帮助:

ng build --help

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
usage: ng build <project> [options]arguments:projectThe name of the project to build. Can be an application or a library.options:--aotBuild using Ahead of Time compilation.--base-hrefBase url for the application being built.--build-event-log**EXPERIMENTAL** Output file path for Build Event Protocol events--build-optimizerEnables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.--common-chunkUse a separate bundle containing code used across multiple bundles.--configuration (-c)A named build target, as specified in the "configurations" section of angular.json.Each named target is accompanied by a configuration of option defaults for that target.Setting this explicitly overrides the "--prod" flag--cross-originDefine the crossorigin attribute setting of elements that provide CORS support.--delete-output-pathDelete the output path before building.--deploy-urlURL where files will be deployed.--es5-browser-supportEnables conditionally loaded ES2015 polyfills.--eval-source-mapOutput in-file eval sourcemaps.--extract-cssExtract css from global styles into css files instead of js ones.--extract-licensesExtract all licenses in a separate file.--fork-type-checkerRun the TypeScript type checker in a forked process.--helpShows a help message for this command in the console.--i18n-fileLocalization file to use for i18n.--i18n-formatFormat of the localization file specified with --i18n-file.--i18n-localeLocale to use for i18n.--i18n-missing-translationHow to handle missing translations for i18n.--indexThe name of the index HTML file.--lazy-modulesList of additional NgModule files that will be lazy loaded. Lazy router modules will be discovered automatically.--mainThe full path for the main entry point to the app, relative to the current workspace.--named-chunksUse file name for lazy loaded chunks.--ngsw-config-pathPath to ngsw-config.json.--optimizationEnables optimization of the build output.--output-hashingDefine the output filename cache-busting hashing mode.--output-pathThe full path for the new output directory, relative to the current workspace.By default, writes output to a folder named dist/ in the current project.--pollEnable and define the file watching poll time period in milliseconds.--polyfillsThe full path for the polyfills file, relative to the current workspace.--preserve-symlinksDo not use the real path when resolving modules.--prodShorthand for "--configuration=production".When true, sets the build configuration to the production target.By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.--profileOutput profile events for Chrome profiler.--progressLog progress to the console while building.--rebase-root-relative-css-urlsChange root relative URLs in stylesheets to include base HREF and deploy URL. Use only for compatibility and transition. The behavior of this option is non-standard and will be removed in the next major release.--resources-output-pathThe path where style resources will be placed, relative to outputPath.--service-workerGenerates a service worker config for production builds.--show-circular-dependenciesShow circular dependency warnings on builds.--skip-app-shellFlag to prevent building an app shell.--source-mapOutput sourcemaps.--stats-jsonGenerates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.--subresource-integrityEnables the use of subresource integrity validation.--ts-configThe full path for the TypeScript configuration file, relative to the current workspace.--vendor-chunkUse a separate bundle containing only vendor libraries.--vendor-source-mapResolve vendor packages sourcemaps.--verboseAdds more details to output logging.--watchRun build when files change.--web-worker-ts-configTypeScript configuration for Web Worker modules.

针对开发环境, 就是用命令 ng build.
默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录.
build之后会看见dist里面有这些文件:

• inline.bundle.js 这是webpack的运行时.
• main.bundle.js 就是程序代码.
• pollyfills.bundle.js 就是浏览器的Pollyfills.
• styles.bundle.js 样式
• vendor.bundle.js 是angular和第三方库

可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面.
首先修改上一个例子中的代码:

admin.component.html

<p>admin works!</p><router-outlet></router-outlet>

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center"><h1>Welcome to {{ title }}!</h1>
</div><nav><ul><li><a href="" [routerLink] = "['/dashboard']">Dashboard</a></li><li><a href="" [routerLink] = "['/order']">Order</a></li><li><a href="" [routerLink] = "['/admin']">Admin-->user</a></li><li><a href="" [routerLink] = "['/admin/email']">Admin-->email</a></li></ul>
</nav><router-outlet></router-outlet>

执行ng build:

可以看到生成了这些文件.

把dist里面的index.html格式化一下看看:

查看main-es5.js和main-es2015.js，可以看到我们写的代码。

在dist/my-app1下面运行程序: ng serve -o:

可以看到在ng serve的时候, 加载了上述的文件.

三、Build Targets和Environment

Environment是指采用哪一个环境文件:

而Targets则是用来决定项目文件是如何被优化的。看一下开发和生产build的对比

	ng build	ng build --prod
Environment	environment.ts	environment..prod.ts
缓存	只缓存css里引用的图片	所有build的文件
source maps	生成	不生成
如何处理css	全局css输出到js文件	生成的是css文件
uglify	不	是
Tree-Shaking	不去掉无用代码	去掉无用代码
AOT	不	是
Bundling打包	是	是
--build-optimizer	否	是(和AOT以及Angular5)
--named-chunks	是	否
--output-hashing	media	所有

下面命令都是针对开发时的build, 它们的作用是一样的:

ng build
ng build --dev
ng build --dev -e=dev
ng build --target=development --environment=dev

下面则是生产build:

ng build --prod
ng build --prod -e=prod
ng build --target=production --environment=prod

其它常用的参数还有:

    --sourcemap -sm 生成source map
    --aot Ahead of Time编译
    --watch -w Watch并rebuild
    --environment -e Build环境
    --target -t Build target
    --dev 表示dev env和target
    --prod 表示prod env和target

先使用--aot:

ng build --aot

试试生产环境:

ng build --prod

可以看到所有的文件都非常小了

四、Serve

ng serve. 已经一直在用了, 下面看看它常用的参数:
    --open -o 打开默认浏览器
    --port -p 端口
    --live-reload -lr 发生变化时重新加载网页(默认开启的)
    --ssl 使用https
    --proxy-config -pc 代理配置
    --prod 在内存中serve 生产模式build的文件
试试 --prod:

ng serve --prod

通过文件大小可以看出确实是prod build的.

 

五、部署到nginx

1、linux安装nginx,查看《linux安装nginx步骤》

2、上传ng build --prod生成的dist下的文件夹（与工程同名）到linux服务器。

3、配置nginx的配置文件nginx.conf

   说明：

A、端口可以是任意非占用的端口;

B、根文件夹，这里指向上传的angular工程所在的文件夹；

4、重启nginx

5、浏览器访问