ionic2如何升級到最新版本、配置開發環境

     好久沒寫東西了，去年用了angular2的RC版本和ionic2寫了一個項目，因為開發周期和有些版本不穩定，所以一直沒有升級，ng2新版本引用Aot打包，聽說優化還不錯，現在嘗試升級ionic2、angular2到最新版本，在此分享經驗。

1. 全局升級ionic、cordova（因為每個版本的初始化工程包引用的插件不一樣,本人升級后，新建工程出現一些錯誤。如果你新建工程出現錯誤，你可以卸載后重新安裝）

//解決安裝后新建出現的bug
npm uninstall -g ionic
npm uninstall -g corodva
 
npm install -g ionic cordova

2. 調整文件路徑結構（個人更傾向於官網的代碼書寫結構，因為在開發中有一些方便調試優化 ，新版本和舊版本的路徑差距很大， 新版的文件結構和老版有一定的修改，我在這里指出：

     2.1 用ionic2工具新建一個工程，新工程名字最好和之前一樣

     2.2 因為本人用於android，android版本太多了，所以本人用了crosswalk，保證使用最新webview，保證統一的兼容性，因為是新工程本人順便升級一下所有cordova插件包，感興趣的話可以看下

ionic plugin add cordova-plugin-crosswalk-webview

     2.3 安裝所有你需要的cordova插件后，初始化android基本工程

ionic run android

     2.4 修改一些啟動方法，因為ng2后面版本引用@NgModule，在此簡單給個例子

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp, {
      backButtonIcon: 'arrow-back',
      iconMode: 'ios',
      pageTransition: 'ios',
      tabbarPlacement: 'bottom',
      backButtonText: '返回'
      }, {}
    )],
  bootstrap: [IonicApp],
  entryComponents: [
    LoginPage,
    MyApp,
    TabsPage
  ],
  providers: [UserService,AppConfigService,{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

     2.5 有些組件的屬性寫法改了一些例如button按鈕

<button ion-button (click)="loginFn()"  color="danger" block default >
  立即登錄
</button>

     2.6 html模版的引用也發生一些變化，之前是全路徑，現在簡寫路徑

@Component({
  templateUrl: 'login.html',
  selector: 'login-page',
})

     2.7 之前ionic2開發，打包工具用的是gulp（配置文件很方便改動、添加自己東西），現在改用ionic-app-scripts，一個插件包，提供的修改配置參數不是特別的多，可以添加簡單的配置參數，修改創建相應的config配置文件，具體詳細配置可以參考github這個插件包詳細說明。 https://github.com/driftyco/ionic-app-scripts

在此提供自動生成沒有出現的命令，還是很有用的

  "scripts": {
    "release": "ionic-app-scripts build --prod", //調用angular2提供的AOT，加快瀏覽器客戶端編譯，不過文件也許變大，可以使用服務器zigb壓縮
  }  

     2.8 ionic2提供的開發環境反向代理一直有問題，我查看打包源碼簡單的改了一下

//找到 node_modules//@ionic/app-scripts/dist/dev-server/http-server.js文件
//搜索proxyMiddleware,用http-proxy-middleware替換proxy-middleware
var proxyMiddleware = require('http-proxy-middleware');
 
//搜索proxy.proxyNoAgent，替換下面的語句
47                //if (proxy.proxyNoAgent) {
48                //    opts.agent = false;
49                //}
50                //opts.rejectUnauthorized = !(proxy.rejectUnauthorized === false);
51                app.use(proxy.path, proxyMiddleware({
52                  target: proxy.proxyUrl,
53                  changeOrigin: true
54                }));
55                //app.use(proxy.path, proxyMiddleware(opts));

詳細修改方法我一發布github網站， https://github.com/driftyco/ionic-app-scripts/issues/790，可以參考

 

     2.9 因為文件的路徑可能時常發生改變，所以圖片在scss路徑引用最好使用變量函數

@mixin addAppImage($imagePath) {
  background-image: url("../images/" + $imagePath);
}