スポンサーリンク

Rails5API@HerokuとIonic3でTodoアプリにtryするも挫折

(20170708追記)

以下のようにやったら、Rails APIとIonicでTodoアプリを作成することができた。

http://twosquirrel.mints.ne.jp/?p=18681

 

——-

以下のTodoアプリ作成記事をIonic3とRails5で写経してみたい!

Creating ToDo Application Using Ionic 2 CLI
Jinal Shah Jan 18 2017 Article
http://www.c-sharpcorner.com/article/creating-todo-application-using-ionic-2-cli/

ありがたいことに、ソースコードは、以下にある。
https://github.com/jinalshah999/ionic2todoapplication

(環境)
Windows 8.1
Ruby2.3.3-p222
SQLite 3.18.0
DevKit mingw64-64-4.7.2
Node.js v6.10.2
Rails 5.1.0
Git 2.8.1

(1)まずは、ソースコードをダウンロードして、試してみる。

https://github.com/jinalshah999/ionic2todoapplication/archive/master.zip

をダウンロードして展開し、cmd.exeで、

npm install
ionic serve

すると、以下のようなエラー。

TypeError: Cannot read property 'AssetUrl' of undefined

ググってみると、

https://stackoverflow.com/questions/40282288/angular-2-cannot-read-property-asseturl-of-undefined

ということらしいので、package.jsonを以下のように変更して、

"@angular/compiler-cli": "^2.0.0"

再度、

npm install
ionic serve

なんかいろいろやったけど、だめだった。。。とほほ。。。

https://forum.ionicframework.com/t/ionic-2-build-faill/67872/2

https://github.com/tkem/openlap/blob/master/package.json

https://forum.ionicframework.com/t/ionic-2-rollup-git-clone-error-namespace-conflict/67844/4

(2)ionic3アプリの作成

ionic start ionic3-rails5-todo
//何か聞かれたら、Enterを押す

cd ionic3-rails5-todo

ionic serve


(3)tasksページの作成

ionic g page tasks


src/pages/tasks/task.ts を作成

(4)dbtaskservicの作成(http://localhost:3000/tasksとの通信を設定)

ionic g provider dbtaskservice


src/providers/dbtaskservice/dbtaskservice.ts

(変更前)

(変更後)

(参考)(というか、コピペです。)
https://github.com/jinalshah999/ionic2todoapplication/blob/master/src/providers/dbtaskservice.ts

(5)src/app/app.module.ts の確認。

ionic g provider dbdataservice でproviderを作成しているので、app.module.tsに、自動的に DbtaskserviceProvider がimportされ、providers: のところにも記載されている。これを、一応、確認しておく。

(6)src/app/pages/tasks/tasks.ts

(変更前)

(変更後)

この、

Typescript Error

Type 'Observable<any>’ is not assignable to type 'Task[]’. Property 'length’ is missing in type 'Observable<any>’.


をググってみても、全く解決方法が分からない。

よくわからないので、this.allTaskのところを、let allTaskに変えておいた。(ダメかな、、、)

(7)

なんか、いろいろ試してみたが、だめであった。。。

 

 

 

 

 

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです!

作成中