自从去年8月份用ionic2以来 一直爬坑不断,从Beta版升级到rc.1几乎将项目里面每个文件改了个遍。后来为了稳定一直rc.2版到现在。这几天项目有比较大的变动,索性将rc.2升级到最新的2.2.0版本,跨度比较大,遇到的问题也很多。

不多说,下面开始升级!

  1. 安装最新的ionic命令行工具

    1
    2
    $ npm uninstall ionic -g
    $ npm install ionic -g
  2. 删除项目下的node_modules目录,修改package.json,并重新安装依赖

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    //修改package.json文件
    "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
    },
    "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
    }
    1
    $ npm install
  3. 查看官方changelog,看看那些地方需要修改.一般需要修改的地放文档中都会标明是breaking changes

    1. 2.0.0-rc.4 (2016-12-15) Events Api发生变化,events.publish(arg1, arg2)现在events.publish可以填写多个参数,与之对应的events.subscribe接受参数也变成多个

      1
      2
      3
      4
      5
      6
      7
      8
      9
      //之前
      events.subscribe('user:created', args => {
      console.log('Welcome ', args[0], ' at ', args[1]);
      });
      //现在
      events.subscribe('user:created', (user, time) => {
      console.log('Welcome ', user, ' at ', time);
      });
    2. 2.0.0-rc.4 (2016-12-15) 还提到了@ionic/app-scripts 0.0.47版本入口文件发生变化,删除main.dev.tsmain.prod.ts,并创建main.ts内容如下

      1
      2
      3
      4
      5
      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
      import { AppModule } from './app.module';
      platformBrowserDynamic().bootstrapModule(AppModule);

      并且修改package.jsonscripts内容

      1
      2
      3
      4
      "scripts": {
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
      }

      现在默认情况下构建的都是development(non-AoT)版本,
      如果需要构建生产环境版本,需要在构建命令后添加--pord,如ionic run ios --pord

      还有tsconfig.json也发生了变化

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      {
      "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "declaration": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
      "dom",
      "es2015"
      ],
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "target": "es5"
      },
      "include": [
      "src/**/*.ts"
      ],
      "exclude": [
      "node_modules"
      ],
      "compileOnSave": false,
      "atom": {
      "rewriteTsconfig": false
      }
      }

      @ionic/app-scripts 1.0.0中还增加了sw-toolbox的依赖,之前修改的package.json文件中已经声明了,但是需要修改src/service-worker.js

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      /**
      * Check out https://googlechrome.github.io/sw-toolbox/docs/master/index.html for
      * more info on how to use sw-toolbox to custom configure your service worker.
      */
      'use strict';
      importScripts('./build/sw-toolbox.js');
      self.toolbox.options.cache = {
      name: 'ionic-cache'
      };
      // pre-cache our key assets
      self.toolbox.precache(
      [
      './build/main.js',
      './build/main.css',
      './build/polyfills.js',
      'index.html',
      'manifest.json'
      ]
      );
      // dynamically cache any other local assets
      self.toolbox.router.any('/*', self.toolbox.cacheFirst);
      // for any other requests go to the network, cache,
      // and then only use that cached resource if your user goes offline
      self.toolbox.router.default = self.toolbox.networkFirst;
    3. 2.0.0-rc.4(2016-12-15)inputsslides组件也有一些变化,不过我的项目中没有用到就没有修改。

    4. 2.0.0-rc.6 (2017-01-24)中需要修改theme/variables.scss引入ionic-icons的方式

      1
      2
      3
      @import "ionicons";
      //修改为
      @import "ionic.ionicons";
5. [2.2.0 (2017-03-08)](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#220-2017-03-08) `@ionic/storage`升级到`2.0.0`版Storage引入方式发生变化。

    1. 将 `Storage`从`app.module.ts`文件`providers`数组中移除
    2. 将`app.module.ts`文件中`import { IonicStorage } from '@ionic/storage'`替换成`import { IonicStorageModule } from '@ionic/storage'`
    3. 将`IonicStorageModule.forRoot()`添加到`app.module.ts`的`imports`数组中

    以上步骤即可升级`ionic/storage`至2.0.0版,否则会报`Error: Can't resolve all parameters for Storage: (?, ?).`错误
  1. 其他一些问题
    由于新版app-script依赖了source-map,如果你在一个.ts文件中声明了多个class则会导致编译错误

    1
    2
    3
    4
    5
    6
    7
    [17:59:06] webpack started ...
    [17:59:07] copy finished in 12.50 s
    /Users/fan2net/Documents/truemerger/xincaidong/node_modules/source-map/lib/source-node.js:115
    node.add(nextLine.substr(0, mapping.generatedColumn));
    ^
    TypeError: Cannot read property 'substr' of undefined

    这是source-map的一个bug,还没有修复。

    目前的解决方案是修改node_modules/source-map/lib/source-node.js:115

    1
    2
    3
    var nextLine = remainingLines[0];
    //修改为
    var nextLine = remainingLines[0] || '';

最后

如果发现其他问题我会及时更新

大家如果遇到升级后带来的问题,可以再下面评论,分享解决方案