awesomeinc/angular-cli

angular-cli

镜像概述

本Docker镜像基于Node环境，全局安装了https://github.com/angular/angular-cli工具，旨在为开发者提供便捷的容器化环境，用于构建、测试和运行https://angular.io/应用程序，消除本地环境差异带来的问题。

核心功能

1. 集成Node环境与全局@angular/cli，支持Angular项目创建、构建、测试等全流程操作；
2. 针对Docker环境优化单元测试（Karma）和端到端测试（Protractor）配置；
3. 提供统一开发环境，确保团队成员使用相同工具版本，提升协作效率。

使用场景

1. 本地开发：快速搭建Angular环境，避免本地环境冲突；
2. CI/CD流水线：作为构建/测试环节基础镜像，保证环境一致性；
3. 团队协作：统一工具版本，减少环境差异导致的问题。

配置说明

单元测试（Karma）

在Docker内运行ng test需修改karma.conf.js：

js
const isDocker = require('is-docker')();
...
    browsers: isDocker ? ['ChromeDocker'] : ['Chrome'],
    customLaunchers: {
      ChromeDocker: {
        base: 'ChromeHeadless',
        flags: [
          '--headless', '--disable-gpu', '--no-sandbox', 
          '--remote-debugging-port=9222', '--window-size=800,600'
        ]
      }
    },

安装is-docker依赖：

json
"is-docker": "^1.1.0"

端到端测试（Protractor）

修改protractor.conf.js：

js
const isDocker = require('is-docker')();
...
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: isDocker ? [
        '--headless', '--disable-gpu', '--no-sandbox', '--window-size=800,600'
      ] : []
    }
  },
  chromeDriver: isDocker ? '/usr/bin/chromedriver' : null,

部署示例

Docker Run

查看@angular/cli版本：

bash
docker run --rm docker.xuanyuan.run/awesomeinc/angular-cli ng version

Docker Compose

创建docker-compose.yml：

yaml
version: '3'
services:
  angular-cli:
    image: docker.xuanyuan.run/awesomeinc/angular-cli
    volumes: ["./my-angular-app:/app"]
    working_dir: /app
    command: ng build --prod

运行构建：

bash
docker-compose run angular-cli