CLI进行单元测试和E2E测试的方法,cli工程搭建指南

第一篇小说是: “使用angular cli生成angular5项目”
://www.jb51.net/article/136621.htm

首先篇小说是: “使用angular cli生成angular5项目”
:CLI进行单元测试和E2E测试的方法,cli工程搭建指南。//www.jb51.net/article/136621.htm

前者工程搭建的二种手腕

  • 全程手动,一小点协调搭建,对本领职员要求相比高,必须对框架有深刻的领会和增加的经历,要能hold住工程搭建进程中的各类坑
  • seed工程,github上习以为常会有各类前端框架的种子工程,选贰个star多的就能够,然则也急需开发职员领会每一样计划,种子工程issues存在处理不立刻的标题
  • 官方cli工程,它遮盖了全部的布局,开辟职员没有要求关爱webpack等包裹配置,专注本身的作业就可以,但那也同格外候意味着失去了配备的狡猾,只好跟随官方社区,可是大多数气象下得以满意我们的须求

第二篇小说是: “使用angular cli从蓝本生成代码”
://www.jb51.net/article/137031.htm

第二篇文章是: “使用angular cli从蓝本生成代码”
://www.jb51.net/article/137031.htm

干什么要用Angular Cli

仅以大家项目采取的工程相比,未必适用于全数种子工程

图片 1

其三篇作品是: “使用Angular CLI生成路由”
://www.jb51.net/article/137033.htm

其三篇小说是: “使用Angular CLI生成路由”
://www.jb51.net/article/137033.htm

Angular Cli

Angular
CLI是叁个限令行分界面工具,它能够创建项目、添Gavin书以及施行一大堆开荒义务,举个例子测量试验、打包和揭破。

特性:

  • 神速创设component, module,service,class,directive等
  • 活动打包压缩,摇树优化
  • 热安顿(代码修改后,自动编写翻译刷新浏览器)
  • sass,less的预编写翻译自动识别
  • 购并了费用条件,测量检验情形,生产条件

Build.

第四篇小说时: “使用Angular CLI举办Build (营造) 和
Serve”://www.jb51.net/article/137034.htm

支付意况搭建

  1. 设置nodejs,假使您是全新遭受,最佳直接装公布的万丈版本(写那篇作品时,最新cli供给nodejs>=6.9)
  2. 安装 Angular Cli
    npm install -g @angular/cli (全局安装)
    设置达成后,运维 ng -v查看是不是安装成功
  3. 安装开采工具,推荐vscode

Build重要会做以下动作:

正文是该种类的末梢一篇小说.

运用cli创立工程

  1. ng new my-app (my-app是你项目名称)
    等待一段时间,cli会帮你创设好工程目录和所需的node_modules(老版本须要自个儿npm
    install安装node_modules)
  2. 开拓工程,目录结构如下:
    根目录

图片 2

借用ng官方网站介绍

图片 3

  1. 在my-app文件夹根目录下运作ng serve,你的首先个angular应用就开动了
  2. 新建文件能够透过ng generate <type> [options]命令,简写 ng g
  • Component ng g component my-new-component
  • Directive ng g directive my-new-directive
  • Pipe ng g pipe my-new-pipe
  • Service ng g service my-new-service
  • Class ng g class my-new-class
  • Interface ng g interface my-new-interface
  • Enum ng g enum my-new-enum
  • Module ng g module my-module
    任何ng命令就不在一一介绍,作者更爱好通过vscode等开辟工具来编写工
    程(举例ng
    format格式化代码,那类操成效ide工具恐怕更有益,每人开垦喜好差异)
  1. 老车手们自然要说了,作者要布署proxy,小编要运营桩服务器,别急,我们能够经过改换package.json文件,扩张运转想要的参数,ng
    serve相关参数参谋官方网站介绍

图片 4

小编配置如下:
自身希望运维时自动运转浏览器 —open
本人梦想配置proxy —proxy-config
本人期望运转打桩的服务器
本身盼望在修改代码后浏览器自动刷新 (依照官方文书档案介绍 ng
server支持热安顿,然则笔者的工程并未有生效,于是扩张了 —poll配置)

图片 5

proxy需要在node_modules同级目录配置贰个proxy.conf.json文件

图片 6

配置完毕后,使用npm start命令

  1. 编写翻译项目文件并出口到有个别目录
  2. Build targets决定了出口的结果
  3. bundling 打包
  4. 生育条件的build还有恐怕会开始展览uglify和tree-shaking(把没用的代码去掉)

单元测量检验.

插件引进

熟稔前端开采的童鞋,肯定对jquery,bootstrap不面生,那么在cli工程中如何引入他们吗,那也是接下去要介绍的主要.angular-cli.json
张开那一个文件能够观望十分的多布局
app 应用相关配置
e2e 端到端测量检验配置
lint 静态检查铺排
test 单元测量试验
default ng generate命令以及运转端口的配备等等

  1. 起步端口配置:

图片 7

  1. css引进配置,以bootstrap比如

图片 8

  1. js引进配置,以jquery,bootstrap举个例子

图片 9

亟待留心的是.angular-cli.json中的js和css的文本引进是以src为绝对目录的,并非.angular-cli.json所在目录

  1. sass和less无需大家安插,cli工程会活动编写翻译生成可用文件

ng build.

angular cli使用karma举行单元测量试验.

工程打包

angular打包编写翻译有两种情况,aot和jit,推荐应用aot格局(那也是前卫版本cli工程默许编写翻译方式),参照他事他说加以考察那篇作品angular2
JIT and AOT
ng build 暗中同意是
dev形式编写翻译打包(angular有dev蒙受和prod境况三种),编译肯定是选取prod蒙受
ng build 参数官方网站介绍

图片 10

配置package.json文件

图片 11

依照自身工程的高低,配置
—max_old_space_size,不然会唤醒内部存款和储蓄器溢出错误
运维命令 npm run build 生成编写翻译文件,然后安排到服务器上就能够

测验,静态检查
测量检验和静态检查就不详细介绍了,cli首假使通过lint和test命令实施的
在 tslint.json中布署检查准则,官方网站准绳

可以先看援助:

先是实践ng test –help或许ng test -h查看协助.

总结

倘令你不想布置繁琐的webpack等等,angular cli值得您富有,抱紧google大腿
O(∩_∩)O

ng build --help

推行测量检验的话就施行ng test就可以, 它会实施项目里具有的.spec.ts文件.

针对开采境况, 就是用命令 ng build.

何况它还或者会检测文件的成形, 假若文件有生成, 那么它会另行奉行测验.

暗中同意景况下, 它的出口目录在.angular-cli.json文件里ourDir属性配置的,
私下认可是/dist目录.

它应当在独立的巅峰进度中试行.

build之后会映重视帘dist里面有那个文件:

先是创立三个angular项目, 带路由的:

  1. inline.bundle.js 那是webpack的运转时.
  2. main.bundle.js 正是先后代码.
  3. pollyfills.bundle.js 正是浏览器的波利fills.
  4. styles.bundle.js 样式
  5. vendor.bundle.js 是angular和第三方库
ng new sales --routing

能够使用source-map-explorer来深入分析依赖,
况兼查看哪些模块和类在bundle里面.

开创好项目后, 直接实践命令测量检验:

首先修改上叁个事例中的代码:

ng test

图片 12

图片 13

执行ng build:

接下来会弹出三个页面, 便是测量检验的结果数据.

图片 14

上面笔者再增添多少个components 和 三个 admin module:

图片 15

ng g c person
ng g c order
ng g m admin --routing
ng g c admin/user
ng g c admin/email

能够观察变化了这么些文件.

接下来配置一下路由, 最首要收获这几个意义:

把dist里面包车型客车index.html格式化一下走访:

图片 16

图片 17

那儿小编重新实施一下ng test:

能够看来它援用了更动的5个js文件.

图片 18

开荒main.bundle.js可以见到本人写的代码:

固然程序运转没十分, 但是测验仍旧出现了难点: router-outlet is not an
angular component.

图片 19

能够看一下spec list:

上边运维程序: ng serve -o:

图片 20

图片 21

图片 22

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

那时候因为运行测量检验的时候, admin模块是独立运作的,
所以该模块并未援引Router模块, 所以不大概识别router-outlet.

因为ng build是支付时的build, 所以未有做其它优化, 文件挺大的.

那么哪些缓慢解决这几个主题素材?

那时看一下文件目录, 并未dist目录:

打开admin.component.spec.ts:

图片 23

图片 24

那么那一个文件是怎么被serve的吗?

把那句话填上, 然后就从未有过不当了:

那是因为, 那时候webpack是在内存中开始展览的serve.

图片 25

上边采取source-map-explorer进行深入分析, 首先安装它:

NO_ERRORS_SCHEMA告诉angular忽略那么些不识别的成分或许成分属性.

npm install --save-dev source-map-explorer
  1. –code-coverage -cc 代码覆盖率报告, 暗中认可那几个是不张开的,
    因为变化报告的速度照旧比相当慢的.
  2. –colors 输出结果使用各个颜色 暗许开启
  3. –single-run -sr 实施测量试验, 可是不检查测量试验文件变化 暗许不开启
  4. –progress 把测验的进度输出到调整台 暗中同意开启
  5. –sourcemaps -sm 生成sourcemaps 私下认可开启
  6. –watch -w 运转测量试验一回, 何况质量评定变化 暗中认可开启