angular 6 兼容性
了解angular不同版本支持浏览器情况，尤其是IE：
https://angular.io/guide/browser-support
angular6 cli 创建项目
npm install -g @angular/cli
ng new 代码库名
具体参考文档：https://github.com/angular/angular-cli/wiki
添加 rxjs-compat
angular 6使用的是RxJS 6，它带来了一些重大改变，但是可以通过添加rxjs-compat缓解这一问题，rxjs-compat软件包允许您在保持v5代码运行的同时逐渐迁移。
npm install rxjs-compat@6
还可以安装rxjs-tslint自动转成rxjs6。
npm install rxjs-tslint
建立 migrate.tslint.json
{
"rulesDirectory": ["node_modules/rxjs-tslint"],
"rules": {
"update-rxjs-imports": true,
"migrate-to-pipeable-operators": true,
"collapse-rxjs-imports": true
}
}
执行 tslint-fix
./node_modules/.bin/tslint -c migrate.tslint.json --project src/tsconfig.app.json --fix
具体内容：
RxJS 6有哪些新变化？
如何從 RxJS 5.x 升級至 RxJS 6
polyfill IE11(BA comfirm)
Angular CLI 创建的框架带了polyfill.ts文件，里面包含了一些通用的polyfill，根据需求打开一些polyfill。
Angular and Internet Explorer
prettier
添加prettier保持代码风格一致。prettier只关注格式化，并不具有lint检查语法等能力。
npm install prettier
在项目目录下添加一个文件.prettierrc
{
"overrides": [
{
"files": ["**/*.ts", "**/*.js"],
"options": {
"parser": "typescript",
"singleQuote": true,
"printWidth": 100
}
},
{
"files": "**/*.scss",
"options": {
"parser": "css"
}
},
{
"files": "**/*.json",
"options": {
"parser": "json",
"printWidth": 120
}
}
]
}
参考文档
vscode + prettier 专治代码洁癖
tslint 代码语法审查
angular-cli创建的项目自带了tslint，需要做的就是把规则和配置做些修改。
tslin.json文件是规则配置说明，能自动检查，并提示错误。配置项可参考官方文档：Configuring TSLint
我们之前已经使用了prettier。所以可以加上tslint-config-prettier 和tslint-plugin-prettier。
tslint.json
{
"rulesDirectory": ["node_modules/codelyzer", "tslint-plugin-prettier"],
"extend": ["tslint:latest", "tslint-config-prettier"],
"rules": {
"prettier": true,
.....
}
}
tslint-plugin-prettier是把 Prettier 作为TSLint的一个规则加入到里面。
使用tslint:recommended（官方推荐配置）或tslint:latest（除了官方推荐的还有一些持续更新的内容），tslin-config-prettier会把原先lint配置里涉及到格式化的配置覆盖重写，其他lint同理，这个主要是解决prettier和tslint格式化冲突的问题。
把prettier加到pre-commit里，使用husky和pretty-quick
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
参考文档
用 ESLint 和 Prettier 写出高质量代码和tslint同理
apollo
http请求使用的是graphql，所以要安装apollo-angular。
"graphql": "^0.13.2",
"graphql-tag": "^2.9.2",
...//dev
"apollo-angular": "^1.1.2",
"apollo-angular-link-headers": "^1.1.0",
"apollo-angular-link-http": "^1.1.1",
"apollo-cache-inmemory": "^1.2.5",
"apollo-client": "^2.3.5",
"apollo-link-context": "^1.0.8",
具体请参考apollo-angular官方文档
反向代理
现在很多都是前后端分离的开发模式，所以前端经常会有跨域请求。使用代理以后所有http请求在浏览器看来都是同域请求，不再存在跨域问题。
找了一个关于反向代理的解释：反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
当前做的就是把api接口反向代理到graphql mock server：
- 新加一个文件proxy.conf.json
{
"/api": {
"target": "http://127.0.0.1:8080/graphql",
"secure": false
}
}
- 在angular.json中architect.serve.options添加一条proxyConfig
"options": {
"browserTarget": "cmbkb-portal-desktop:build",
"proxyConfig": "./proxy.conf.json"
},
- 创建ApolloClient，这里的 /api 会请求http://127.0.0.1:8080/graphql
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ApolloModule, Apollo } from 'apollo-angular';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { setContext } from 'apollo-link-context';
import { httpHeaders } from 'apollo-angular-link-headers';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ApolloModule, HttpLinkModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(apollo: Apollo, httpLink: HttpLink) {
const headers = httpHeaders();
const http = httpLink.create({ uri: '/api' });
apollo.create({
link: headers.concat(http),
cache: new InMemoryCache()
});
}
}
参考
angular-cli关于proxy的配置
基于angular-cli配置代理解决跨域请求问题
Jest
Jest 是跑测试的一个框架，比起angular自带的karma要快的多。
npm install jest jest-preset-angular --dev- 在package.json添加入口：
"jest": {
"preset": "jest-preset-angular",
"setupTestFrameworkScriptFile": "/src/setupJest.ts"
}
setupJest.ts
import 'jest-preset-angular';
import './jestGlobalMocks';
jestGlobalMocks.ts
const mock = () => {
let storage = {};
return {
getItem: key => (key in storage ? storage[key] : null),
setItem: (key, value) => (storage[key] = value || ''),
removeItem: key => delete storage[key],
clear: () => (storage = {})
};
};
Object.defineProperty(window, 'localStorage', { value: mock() });
Object.defineProperty(window, 'sessionStorage', { value: mock() });
Object.defineProperty(window, 'getComputedStyle', {
value: () => ['-webkit-appearance']
});
Object.defineProperty(window, 'URL', {
value: {
createObjectURL: () => {}
}
});
- 添加命令
"test": "jest",
"test:watch": "jest --watch",
具体配置可以参考testing-angular-faster-jest
UI 框架 - CDK
根据官方get-started引入CDK框架
图标（字体，inline-svg）
现在项目上大部分都偏好使用图标字体。有很多种办法可以实现。
当前使用的是 icon-font-generator 来构造font，并没有把它放进webpack打包流程中，而是分开。
其他方法还有inline-svg等等。
README
更新README
Submodule
有关联的库，可以作为submodule存在
Pipeline
配置流水线