技術

[Ionic] ionic serveでの動作確認でファイルの変更が反映されない!

投稿日:

こんにちは。たなかです。

参画しているプロジェクトで散々苦しめられているIonicですが、携わっているうちに「なんだか結構面白いかも?」と思い、現在は個人で学習中です。

テストアプリを立ち上げてみてブラウザで確認! Ionic serve!

$ ionic serve

Start a local dev server for app dev/testing
(引用元はこちら)

気になるファイルを片っ端からいじっていきます。

 

田中「app.module.tsってなんだろう?編集!」
Ionic「Building…(ローディングぐるぐる)」

田中「home.htmlがビュー担当かな?文言変更!」
Ionic「Building…(ローディングぐるぐる)」

田中「セミコロン入れ忘れちゃった!修正!」
Ionic「Building…(ローディングぐるぐる)」

 

ページを更新せずとも、ローカルファイルの変更がすぐに反映されるのでなんか気持ちいいです。

変更がブラウザに反映されない?

そんな具合で画面に色々パーツを追加してみましたが、作業しているうちにブラウザでうまく反映されなくなってしまいました。

えー。ページを更新しても治りません。

Ionic serveを再入力すると治りますが、その都度サーバーを立ち上げ直すのもいちいち時間がかかるし面倒です。

 

解決方法

編集した.tsファイルを再保存してみる!

Ionic serveはソースファイルの変更を監視して、更新されたファイルを自動的にリロードする仕組みのようなので、編集したTypescriptファイル上で[cmd + s]を叩いてやればそれだけで解決することが分かりました。

わかってしまえば簡単なことでしたが、いちいちサーバー立ち上げ直す必要がなくなってすっごく快適です。よかったー。

本当にどうしようもないときは潔く再起動しなきゃですが、チリも積もれば的に開発スピードが上がると良いですね。

短いですが今回はここまで。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

no image

【rails】websocket-rails動きません!

どうも中田です。 巷ではrailsでwebsocketを動かすのは簡単♪簡単♪っ …

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

no image

HTMLエンティティを探すならHTML Arrowsがオススメ!

こんにちは htmlエンティティっていうのを聞いたことがありますか? アンパサン …

no image

【AngularJS】 $on, $emit, $broadcast

どうも、なかたです。 AngularJSのコントローラー(スコープ)間のデータや …

no image

[Rails]Deviceのfacebook認証でinvalid_credentials….

こんばんは Deviceでfacebook認証機能を作っていたらinvalid_ …