持续构建：使用镜像方式进行Angular应用的开发构建
这篇文章以当前稳定版本的Angular CLI 8.3.21为例，介绍一下使用镜像方式进行Angular应用的开发、构建的方法。
Angular环境准备
安装Node，然后在此基础之上安装Angular CLI即可完成Angular开发环境的准备。以8.3.21为例，相应的Dockerfile可能如下所示：
FROM liumiaocn/nodejs:10.15.3
RUN apk update \
&& npm install -g @angular/[email protected] \
&& rm -rf /tmp/* /var/cache/apk/* *.tar.gz ~/.npm \
&& npm cache clear --force \
&& yarn cache clean
所以可以看到主要的准备只有一句 npm install。构建镜像可以直接使用docker build，也可以直接拉取DockerHub上的上述已经编译完成的镜像，执行如下命令即可：
docker pull liumiaocn/angular:8.3.21
liumiaocn:angular liumiao$ docker images |grep angular |grep 8.3.21
liumiaocn/angular 8.3.21 204314b3404a 12 minutes ago 102MB
liumiaocn:angular liumiao$
事前版本确认
liumiaocn:angular liumiao$ docker run --rm liumiaocn/angular:8.3.21 sh -c 'npm --version && node -v && ng --version'
6.4.1
v10.15.3
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.21
Node: 10.15.3
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.21
@angular-devkit/core 8.3.21
@angular-devkit/schematics 8.3.21
@schematics/angular 8.3.21
@schematics/update 0.803.21
rxjs 6.4.0
liumiaocn:angular liumiao$
创建demo应用框架
使用如下命令即可创建demo应用框架
执行命令：docker run -v `pwd`/demo:/demo --rm liumiaocn/angular:8.3.21 sh -c ‘cd / && ng new demo --skip-install --skip-git’
执行示例日志如下所示：
liumiaocn:angular liumiao$ ls
liumiaocn:angular liumiao$ docker run -v `pwd`/demo:/demo --rm liumiaocn/angular:8.3.21 sh -c 'cd / && ng new demo --skip-install --skip-git'
CREATE demo/README.md (1022 bytes)
CREATE demo/.editorconfig (246 bytes)
CREATE demo/.gitignore (631 bytes)
CREATE demo/angular.json (3577 bytes)
CREATE demo/package.json (1290 bytes)
CREATE demo/tsconfig.json (543 bytes)
CREATE demo/tslint.json (1953 bytes)
CREATE demo/browserslist (429 bytes)
CREATE demo/karma.conf.js (1016 bytes)
CREATE demo/tsconfig.app.json (270 bytes)
CREATE demo/tsconfig.spec.json (270 bytes)
CREATE demo/src/favicon.ico (948 bytes)
CREATE demo/src/index.html (290 bytes)
CREATE demo/src/main.ts (372 bytes)
CREATE demo/src/polyfills.ts (2838 bytes)
CREATE demo/src/styles.css (80 bytes)
CREATE demo/src/test.ts (642 bytes)
CREATE demo/src/assets/.gitkeep (0 bytes)
CREATE demo/src/environments/environment.prod.ts (51 bytes)
CREATE demo/src/environments/environment.ts (662 bytes)
CREATE demo/src/app/app.module.ts (314 bytes)
CREATE demo/src/app/app.component.css (0 bytes)
CREATE demo/src/app/app.component.html (25498 bytes)
CREATE demo/src/app/app.component.spec.ts (975 bytes)
CREATE demo/src/app/app.component.ts (208 bytes)
CREATE demo/e2e/protractor.conf.js (808 bytes)
CREATE demo/e2e/tsconfig.json (214 bytes)
CREATE demo/e2e/src/app.e2e-spec.ts (637 bytes)
CREATE demo/e2e/src/app.po.ts (262 bytes)
liumiaocn:angular liumiao$ ls
demo
liumiaocn:angular liumiao$
关于上述主要框架所生成的文件相关的说明，可参看：
- https://blog.csdn.net/liumiaocn/article/details/78366404
虽然版本已经发生了很多变化，但是使用Angular CLI所生成的大部分框架文件变化整体来说还不是特别的大。
安装依赖
使用npm install或者yarn install可以安装Angular应用所需的依赖，此命令所参照的文件为package.json，所以执行需要在在此文件所在的目录（应用的根目录）
执行命令：docker run -v `pwd`/demo:/demo --rm liumiaocn/angular:8.3.21 sh -c ‘cd /demo && npm install’
执行上述命令即可安装Angular应用所需要的相关依赖：
liumiaocn:angular liumiao$ ls demo
README.md e2e src tsconfig.spec.json
angular.json karma.conf.js tsconfig.app.json tslint.json
browserslist package.json tsconfig.json
liumiaocn:angular liumiao$ docker run -v `pwd`/demo:/demo --rm liumiaocn/angular:8.3.21 sh -c 'cd /demo && npm install'
...
注：此种方式不太方便的地方在于无法实时的确认npm install文件更新的状况
也可以使用yarn进行安装，执行示例命令如下所示：
执行命令：docker run -v `pwd`/demo:/demo --rm liumiaocn/angular:8.3.21 sh -c ‘cd /demo && yarn install’
有关yarn的介绍，可参看：https://blog.csdn.net/liumiaocn/article/details/81063463
常见问题
因为网络问题，往往会出现超时或者各种莫名其妙的问题，此种情况下建议使用设定npm的仓库为可以访问的镜像，比如
执行示例命令：docker run -v `pwd`/demo:/demo --rm liumiaocn/angular:8.3.21 sh -c ‘npm config set registry http://registry.npm.taobao.org/ && cd /demo && npm install’
依赖正常安装完毕，会出现一个名为node_modules的目录，相关的依赖都被下载至此目录下，很多时候重新删除此目录，再次进行构建也是一个不错的主意，但是会耗时多一些。
liumiaocn:angular liumiao$ ls demo/
README.md e2e package-lock.json tsconfig.app.json tslint.json
angular.json karma.conf.js package.json tsconfig.json
browserslist node_modules src tsconfig.spec.json
liumiaocn:angular liumiao$
结果确认
执行命令：docker run -v `pwd`/demo:/demo -p 4200:4200 --rm liumiaocn/angular:8.3.21 sh -c ‘cd /demo && ng serve --host 0.0.0.0 --port=4200 --open’
执行日志示例：
liumiaocn:angular liumiao$ docker run -v `pwd`/demo:/demo -p 4200:4200 --rm liumiaocn/angular:8.3.21 sh -c 'cd /demo && ng serve --host 0.0.0.0 --port=4200 --open'
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
ℹ ｢wds｣: Project is running at http://0.0.0.0:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.68 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2020-01-07T22:10:33.332Z - Hash: 083c1b857ccf3c9f3b80 - Time: 16602ms
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
页面确认
非容器方式
如果不习惯容器方式操作，建议使用nvm进行多重npm管理，以便于在实际项目中多个Angular版本的使用场景，使用方式可参看：
- https://blog.csdn.net/liumiaocn/article/details/81039853