技術

[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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

no image

ng-ifのelse句でコンポーネントのプロパティと名前重複

こんにちは、コーテッグのこやまです。 Angularを触っていたら、コンポーネン …

no image

【Angular】Full calendarで横スクロールを実装

こんにちは Full Calendarにはいくつかの表示モードがあります。 こち …

no image

document.querySelectorで色々なDOMを取得する

こんにちは javascriptでDOMを取得することは結構あるかと思います。 …

no image

【ionic】タブをタップで最上部にスクロール!

どうも、中田です。 今日はタブをタップでトップにゴーの日です。 どういう日かとい …

[Xcode] SDK Version Issue – This app was built with the iOS 12.0 SDK. Starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.

こんにちは。たなかです。 2019年、ブログ初更新になります。今年もよろしくお願 …