ionic2从RC2升级到2.2.0的一些问题

自从去年8月份用ionic2以来 一直爬坑不断，从Beta版升级到rc.1几乎将项目里面每个文件改了个遍。后来为了稳定一直rc.2版到现在。这几天项目有比较大的变动，索性将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，看看那些地方需要修改.一般需要修改的地放文档中都会标明是breaking changes

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

      //之前
      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.ts和main.prod.ts,并创建main.ts内容如下

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

      并且修改package.json的scripts内容

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

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

      还有tsconfig.json也发生了变化

      {
        "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

      '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引入方式发生变化。

      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: (?, ?).错误

4. 其他一些问题
   由于新版app-script依赖了source-map,如果你在一个.ts文件中声明了多个class则会导致编译错误

   [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

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

最后

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

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