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);
}