Angular 2 升级 Angular 4 历程

Angular 4 在昨天(2017-03-24)正式发布了,我的系列教程也得更新一下。步骤略繁琐,不用 cli 的项目反倒更简单一些,但是 cli 平时给我们的便利还是很多的,升级最多半年一次而已。

教程链接:
第一节:初识Angular-CLI
第二节:登录组件的构建
第三节:建立一个待办事项应用
第四节:进化!模块化你的应用
第五节:多用户版本的待办事项应用
第六节:使用第三方样式库及模块优化用
第七节:给组件带来活力
Rx--隐藏在Angular 2.x中的利剑
Redux你的Angular 2应用
第八节:查缺补漏大合集(上)
第九节:查缺补漏大合集(下)

更新 angular-cli

随着 Angular 升级到版本 4, angular-cli 也进入了 1.0 正式版。所以我们需要先更新 angular-cli 的版本。 首先需要删除旧的 angular-cli,如果你的 angular-cli 是在 beta-28 之前的版本,需要在工程目录下执行下面的命令:

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

angular-clibeta-28 之后改了包名,并入 @angular 的子项目,包名改成了 @angular/cli,所以如果是 beta-28 之后的版本,请执行下面的命令删除:

npm uninstall -g @angular/cli
npm uninstall --save-dev @angular/cli

然后我们需要安装新的 @angular/cli,但进行之前需要清理一下缓存:

npm cache clean
npm install -g @angular/cli@latest

更新 angular-cli.json

工程根目录下的 angular-cli.json 现在的命名前面多了一个点,变成了 .angular-cli.json,虽然旧的命名仍被接受,但为了保险起见,我们还是改一下。

这个 .angular-cli.json 比原来的版本改动了几个地方,第一个是 Schema,我们需要在 "project": { 之上添加一条 Schema 的配置:

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    ...
  },

添加完之后,在 VSCode 中会发现 project 配置中的 version 下面出现了绿线警告,也就是说 schema 中没有这一项,所以 version 可以删除了。

maintest 之间插入一行配置 polyfills:

"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",

并且删除 src/main.tssrc/test.ts 中的 import './polyfills.ts'; 那一行。

然后把下面 "tsconfig": "tsconfig.app.json", 这句改成下面的2行:

"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",

接下来是 environments 的那段,原来的样子是

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

现在需要改成:

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

现在新增了 lint 配置,在 e2etest 之间加入:

  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },

最后一段 defaults 那一坨改成:

"defaults": {
  "styleExt": "css", //或者 scss 根据项目情况而定 
  "component": {
    "inlineTemplate": false,
    "spec": true
  }
}

更新 tsconfig

src/tsconfig.json 需要改名成 tsconfig.app.json 并更新到下面的样子:

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

新增加定义单元测试配置的 src/tsconfig.spec.json

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

e2e 目录下原有的 tsconfig.json 改名成 e2e/tsconfig.e2e.json 然后更新成:

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types":[
      "jasmine",
      "node"
    ]
  }
}

在项目根目录下新建一个 tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

更新 package.json

更新 package.json 中的软件包版本号

dependencies 段落中的:

  1. 所有以 @angular 开头的包的版本都改成 ^4.0.0
  2. rxjs 版本改成 ^5.1.0
  3. 删掉 ts-helpers
  4. zone.js 版本号更新至 ^0.8.4

devDependencies 段落中的:

  1. @angular/compiler-cli 的版本改成 ^4.0.0
  2. @types/node 版本改成 ~6.0.60
  3. codelyzer 版本改成 ~2.0.0
  4. jasmine-core 版本号更新至 ~2.5.2
  5. jasmine-spec-reporter 版本号更新至 ~3.2.0
  6. karma 版本号更新至 ~1.4.1
  7. karma-chrome-launcher 版本号更新至 ~2.0.0
  8. karma-cli 版本号更新至 ~1.0.1
  9. karma-jasmine 版本号更新至 ~1.1.0
  10. 添加一行 "karma-jasmine-html-reporter": "^0.2.2",
  11. 添加一行 "karma-coverage-istanbul-reporter": "^0.2.0",
  12. 删除 karma-remap-istanbul
  13. protractor 版本号更新至 ~5.1.0
  14. ts-node 版本号更新至 ~2.0.0
  15. tslint 版本号更新至 ~4.5.0
  16. typescript 版本号更新至 ~2.1.0

最后更新 scripts 为:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

更新 kama.conf.js

src/kama.conf.js 改成如下:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
          ? ['progress', 'coverage-istanbul']
          : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

更新 protractor.conf.js

src/protractor.conf.js 改成如下

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

更新 tslint.json

搜索 no-inferrable-types 把这行改成:

"no-inferrable-types": [true, "ignore-params"],

然后新增下面的规则:

"callable-types": true,
"import-blacklist": [true, "rxjs"],
"import-spacing": true,
"interface-over-type-literal": true,
"no-empty-interface": true,
"no-string-throw": true,
"prefer-const": true,
"typeof-compare": true,
"unified-signatures": true,

重新安装依赖软件包

接下来需要重新安装依赖项:

rm -rf node_modules dist # Windows 用户使用 rmdir 来删除
npm install --save-dev @angular/cli@latest
npm install

到此为止,升级结束,运行 ng serveng build 一切正常。我目前只升级了第一章代码,计划会在 ng4tut 陆续把教程代码都升级到 4.x

4.0 代码地址:
https://github.com/wpcfan/awesome-tutorials/tree/ng4tut

2.x 代码地址:

https://github.com/wpcfan/awesome-tutorials/tree/master

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Angular CLI 是什么? Angular CLI 是一个命令行接口(Command Line Interf...
    semlinker阅读 4,170评论 0 39
  • 导语 Angular2(已经统一更名为Angular,而Angular1表示1.x版本,以下统称Angular都是...
    cipchk阅读 2,760评论 1 46
  • 史上最简单Angular2教程,大叔都学会了 作者:王芃 wpcfan@gmail.com 第一节:初识Angul...
    接灰的电子产品阅读 58,734评论 76 248
  • 1:环境搭建 今天给大家介绍4种环境搭建的方法。 一:Angular-cli的安装 官方指导文档:www.angu...
    真的稻城阅读 1,436评论 2 9
  • ……………………..以训练想象力和思考力为目的,互相设局,自主破局,突破困境完成故事。 规则:每人写一个场景,依次...
    镜上霜阅读 593评论 3 2