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)に関しては以下の本がお勧めです!
作成中
ディスカッション
コメント一覧
まだ、コメントがありません