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
}
}
]
}
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": "<rootDir>/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
配置流水線
