webtree/org.web-tree.mystuff.web

Web镜像概述

该镜像基于Angular CLI 1.4.2构建，包含Web项目开发所需的全套工具链，支持项目的开发、构建、测试等全流程操作。

核心功能

• 提供本地开发服务器，支持代码热重载
• 支持组件、指令、服务等多种Angular代码的快速生成
• 可生成生产环境优化的构建产物
• 集成Karma单元测试和Protractor端到端测试工具

使用场景

• Angular Web项目的本地开发与调试
• 项目的自动化构建与测试
• 快速搭建Angular开发环境

配置说明

开发服务器

运行开发服务器并映射端口到本地：

bash
docker run -p 4200:4200 webtree/org.web-tree.mystuff.web ng serve --host 0.0.0.0

访问http://localhost:4200%E5%8D%B3%E5%8F%AF%E6%9F%A5%E7%9C%8B%E5%BA%94%E7%94%A8%EF%BC%8C%E4%BF%AE%E6%94%B9%E6%BA%90%E7%A0%81%E5%90%8E%E5%BA%94%E7%94%A8%E4%BC%9A%E8%87%AA%E5%8A%A8%E9%87%8D%E8%BD%BD%E3%80%82

代码脚手架

生成新组件：

bash
docker run webtree/org.web-tree.mystuff.web ng generate component component-name

也可生成指令、管道、服务等其他类型文件，替换上述命令中的component为directive、pipe、service等即可。

构建项目

生成生产环境构建产物：

bash
docker run -v $(pwd)/dist:/app/dist webtree/org.web-tree.mystuff.web ng build --prod

构建产物将输出到本地当前目录的dist文件夹中。

单元测试

执行单元测试：

bash
docker run webtree/org.web-tree.mystuff.web ng test

端到端测试

先启动开发服务器，再执行端到端测试：

bash
# 启动开发服务器（后台运行）
docker run -d -p 4200:4200 --name angular-dev webtree/org.web-tree.mystuff.web ng serve --host 0.0.0.0
# 执行端到端测试
docker run --link angular-dev:app webtree/org.web-tree.mystuff.web ng e2e --base-url [***]
# 测试完成后清理容器
docker stop angular-dev && docker rm angular-dev