tmp: TypeScript

## Update CLI
CLIのバージョンを上げておく
```
$ sudo nom i -g ionic cordova
```

## Update Ionic 3
packageをupgrade
```js
"dependencies": {
  "@angular/common": "4.1.3",
  "@angular/compiler": "4.1.3",
  "@angular/compiler-cli": "4.1.3",
  "@angular/core": "4.1.3",
  "@angular/forms": "4.1.3",
  "@angular/http": "4.1.3",
  "@angular/platform-browser": "4.1.3",
  "@angular/platform-browser-dynamic": "4.1.3",
  "@ionic-native/core": "3.12.1",
  "@ionic-native/splash-screen": "3.12.1",
  "@ionic-native/status-bar": "3.12.1",
  "@ionic/storage": "2.0.1",
  "ionic-angular": "3.5.3",
  "ionicons": "3.0.0",
  "rxjs": "5.4.0",
  "sw-toolbox": "3.6.0",
  "zone.js": "0.8.12"
},
"devDependencies": {
  "@ionic/app-scripts": "2.0.2",
  "typescript": "2.3.4"
}
```

`BrowserModule` を import, `Http` を利用している場合は `HttpModule` も import  
`app.module.ts`
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

...

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp)
],
```
* https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#300-2017-04-05

`src/index.html` に `vender.js` を追加
```

<script src="build/polyfills.js"></script>

<script src="build/vendor.js"></script>

<script src="build/main.js"></script>

```

`src/service-worker.js` に `vender.js` を追加
```
    './build/main.js',
    './build/vendor.js',
    './build/main.css',
```

## Update Ionic Storage 2.0.1
`IonicStorageModule` を import  
`app.module.ts`

```typescript
import { IonicStorageModule } from '@ionic/storage'

...

imports: [      
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  IonicStorageModule.forRoot()
],
```
`Storage` を Inject して使用するように変更
```typescript
import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(private storage: Storage) { }

...

}
```
* https://ionicframework.com/docs/storage/

## Update Ionic Native 3.x
pluginを別々インストールするように変更されたので、必要なpluginを `package.json` に追加する
```js
"dependencies": {
  ...
  "@ionic-native/status-bar": "3.12.1",
}
```
対象pakcageをimportし、Injectして使用するように変更
```typescript
import { StatusBar } from '@ionic-native/status-bar';

export class MyApp {
  constructor(private statusBar: StatusBar) { }

...

}
```

## Others

### Replace template to ng-template
`template` が deprecated なので `ng-template` に変更
```
<ng-template [ngIf]="...">
  ...
</ng-template>
```

### Ionic CLI configs
ionicコマンドでconfigを変えて実行している場合はそのconfigも修正する
```
$ ionic build ios -w ./config/webpack.config.js
```

## Errors

### `Cannot read property 'filter' of undefined` on building (deeplinks)
`app.module.ts` を確認  
`@NgModule` に設定する各値を変数で代入するとエラーが発生する  
直接指定すればOK
```
// NG
@NgModule({
  declarations: declarations,
  imports: imports,
  bootstrap: [IonicApp],
  entryComponents: entryComponents,
  providers: providers,
})

// OK
@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  bootstrap: [IonicApp],
  entryComponents: [ ... ],
  providers: [ ... ],
})
```

### `TypeError: Path must be a string. Received true` on building (uglifyjs)
typescript が `target: 'es5'` でtranspileされてない可能性  
`tsconfig.js` の確認と `es6` の場合は babili か uglify-es を利用する

### Http request failed `undefined is not an object (evaluating 'o.apply')`
wkwebview engine を最新にしてみる

### `Error: Cannot read property 'replace' of undefined` on starting iOS simulator
最新の `cordova-ios` だとダメみたいなので別branchを利用する
```
$ ionic cordova platform add https://github.com/apache/cordova-ios.git#4.4.0-ios-sim
```

## Note
どうしてもダメな場合は `ionic start` でv3プロジェクトを作成して比較するか  
https://github.com/ionic-team/ionic-conference-app  
を参考に比較して見るとなんとなるかも

## 参考
* https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

tmp

Thursday, July 27, 2017

Update Ionic 2.3.0 to 3.5.3

Wednesday, September 9, 2015

LoVA Tool(デッキシミュレータ)