自從去年8月份用ionic2以來 一直爬坑不斷，從Beta版升級到rc.1幾乎將項目里面每個文件改了個遍。后來為了穩(wěn)定一直rc.2版到現(xiàn)在。這幾天項目有比較大的變動，索性將rc.2升級到最新的2.2.0版本,跨度比較大,遇到的問題也很多。

不多說,下面開始升級!

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

   $ npm uninstall ionic -g
   $ npm install ionic -g
   

2. 刪除項目下的node_modules目錄，修改package.json，并重新安裝依賴

   //修改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"
     }
   

   $ npm install
   

3. 查看官方changelog，看看那些地方需要修改.一般需要修改的地放文檔中都會標(biāo)明是breaking changes

   1. 2.0.0-rc.4 (2016-12-15) Events Api發(fā)生變化，events.publish(arg1, arg2)現(xiàn)在events.publish可以填寫多個參數(shù)，與之對應(yīng)的events.subscribe接受參數(shù)也變成多個

      //之前
      events.subscribe('user:created', args => {
          console.log('Welcome ', args[0], ' at ', args[1]);
      });
      
      //現(xiàn)在
      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版本入口文件發(fā)生變化，刪除main.dev.ts和main.prod.ts,并創(chuàng)建main.ts內(nèi)容如下

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

      并且修改package.json的scripts內(nèi)容

       "scripts": {
          "ionic:build": "ionic-app-scripts build",
          "ionic:serve": "ionic-app-scripts serve"
        }
      

      現(xiàn)在默認(rèn)情況下構(gòu)建的都是development(non-AoT)版本,
      如果需要構(gòu)建生產(chǎn)環(huán)境版本，需要在構(gòu)建命令后添加--pord,如ionic run ios --pord。

      還有tsconfig.json也發(fā)生了變化

      {
        "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文件中已經(jīng)聲明了，但是需要修改src/service-worker.js

      '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)中inputs和slides組件也有一些變化，不過我的項目中沒有用到就沒有修改。

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

      @import "ionicons";
      //修改為
      @import "ionic.ionicons";
      

   5. 2.2.0 (2017-03-08) @ionic/storage升級到2.0.0版Storage引入方式發(fā)生變化。

      1. 將 Storage從app.module.ts文件providers數(shù)組中移除

      2. 將app.module.ts文件中import { IonicStorage } from '@ionic/storage'替換成import { IonicStorageModule } from '@ionic/storage'

      3. 將IonicStorageModule.forRoot()添加到app.module.ts的imports數(shù)組中

         以上步驟即可升級ionic/storage至2.0.0版，否則會報Error: Can't resolve all parameters for Storage: (?, ?).錯誤

4. 其他一些問題
   由于新版app-script依賴了source-map,如果你在一個.ts文件中聲明了多個class則會導(dǎo)致編譯錯誤

   [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，還沒有修復(fù)。

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

   var nextLine = remainingLines[0];
   //修改為
   var nextLine = remainingLines[0] || '';
   

最后

如果發(fā)現(xiàn)其他問題我會及時更新

大家如果遇到升級后帶來的問題，可以再下面評論，分享解決方案