Angular 单元测试框架由 karma 迁移为 Jest 实践

1 为什么要从 Karma+Jasmine 切换为 Jest Angular 官方默认推荐的单元测试框架为 Karma + Jasmine。 Karma 是通过启动 Chromium 浏览器,在真实的浏览器环境中执行单元测试。 Jest 通过配置指定运行环境,通常会配置为 jsdom,每个测试文件都在独立的运行环境中执行。 Karma 当前存在的主要问题有: 需要启动浏览器,编译整个项目并在浏览器
Angular 单元测试框架由 karma 迁移为 Jest 实践

Angular 9 新特性及 Angular 8 升级至 Angular 9 参考

1 Anguar9 新特性简介 1.1 默认使用 Ivy 编译器 Ivy 在 Angular8 时即可使用,但需要自行在 tsconfig.json 中增加配置以开启,曾经尝试过但会有一些构建问题。在解决了数百 BUG 后,Ivy 在 Angular9 中 作为了默认的编译方式。lvy 编译器和运行时提供了不少的优点: 打包尺寸更小:Ivy 编译器的设计目的是删除那些无法通过摇树优化使用的 Ang
Angular 9 新特性及 Angular 8 升级至 Angular 9 参考

升级至 Angular8 及实现自定义 webpack 配置的方案

1 升级至 Angular8 如果你使用的是 angular/cli 构建方案,执行 ng update 即可,该过程主要是更新 package.json 中的依赖。为了了解到底改变了哪些内容,个人更喜欢手动方式升级,方法参考如下: 首先全局安装 @angular/cli: npm i -g @angular/cli; 然后创建一个新的项目 ng new ng8-demo; 对比测试项目 ng8-
升级至 Angular8 及实现自定义 webpack 配置的方案

使用 commitlint 约束项目 Git 代码提交描述信息格式规范

1 Angular Git Commit Guidelines 规范 Git 提交应当书写 commit message。message 的内容怎么写都行,但如何写比较合理是一个问题。开源社区有很多相关的规范,使用最广泛的则是Angular Git Commit Guidelines 规范,并且有众多相关的工具可以检测提交是否遵循了预定义的规范。 Angular 规范要求的 commit mess
使用 commitlint 约束项目 Git 代码提交描述信息格式规范

nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法

报错信息很直观地指出是内存溢出了。是什么导致了内存溢出呢?其根本原因在于 nodejs 默认限制了最大可使用的内存大小。 nodejs V8 引擎在 64 位机器上默认限制使用内存最大不超过 1.7GB,超过这个限制官方建议尝试优化为多线程方式。 解决办法可以是增加 nodejs 可使用的最大内存大小,也可以从降低程序内存消耗的角度入手。 解决办法一: 设置 nodejs 配置项 配置项 max_
nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法

在 Angular-cli 中引入 simple-mock 实现前端开发 API Mock 接口数据模拟

在前后端分离的开发模式中,接口数据模拟(API Mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样,大概的方案可能会是这几类: 业务代码中临时写上 mock 数据的逻辑 在前端引入 mock 服务或框架,对 HTTP 请求服务进行拦截 代理转发至自建的 mock server 本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功
在 Angular-cli 中引入 simple-mock 实现前端开发 API Mock 接口数据模拟

Angular 中实现自定义组件的双向绑定的两种方法

在 Angular 中,对于表单元素,通过 即可以简单地实现双向绑定。对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的。 对于 ,需要至少实现该接口的如下方法:
Angular 中实现自定义组件的双向绑定的两种方法

一种自定义 Angular-cli 6.x/7.x 默认 webpack 配置的方法

Angular-cli 通过 angular.json 实现构建配置,对于复杂配置需求的支持,可以通过 ng eject 输出 webpack 的配置文件,然后自定义 webpack 来达到目的。 当前对于 Angular 6.x/7.x 的项目,Angular-cli 需采用 6.x/7.x 版本,而这些版本不支持 ng eject 命令,于是希望自定义 webpack 配置实现更多复杂需求就无
一种自定义 Angular-cli 6.x/7.x 默认 webpack 配置的方法

Angular 项目升级至 Angular6

前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试。总的来说,两次升级过程比较类似,也不算复杂。 0. 项目特点 该项目有如下特点: 历史悠久,项目庞大,源码文件数量近千 业务代码为主,极少应用 Angular 高级特性(升级简单) 采用 pug 编写 html 结构 采用 Less 编写 css 样式 采用 Express
Angular 项目升级至 Angular6