{%hackmd BJzAwtWvp %}

# [其他] Angular專案如何即時呈現在手機上

## 前言

最近的專案是所謂的 "小網"，也就是一個嵌入在手機 APP 裡面的網頁。這個網頁同時有網頁版及手機版，但我們也不是專業的手機 APP 開發者，想要可以讓網及在開發階段即時呈現在手機上該怎麼做呢?

## 解決方案1: 使用 ngrok

[ngrok](https://ngrok.com/) 是一個可以將本機伺服器的 port 對外開放的服務，這樣你就可以透過 ngrok 的網址來存取你的本機伺服器。這樣一來，你就可以在手機上存取你的本機伺服器，也就是可以即時看到你的網頁在手機上的呈現。

### 使用方式

1. 下載 ngrok，解壓縮 ngrok
2. 在 terminal 輸入 `./ngrok http 4200` (假設你的 Angular 伺服器是在 4200 port)
3. 你會看到一個類似 `http://xxxxxx.ngrok.io` 的網址，這就是你的本機伺服器的網址
4. 打開手機瀏覽器，輸入這個網址，就可以看到你的網頁在手機上的呈現

## 解決方案2: 使用本機 IP

1. 先確保手機與開發電腦在同一個網路下
2. 在 `angular.json` 裡面的 `projects -> your-project-name -> architect -> serve -> options` 裡面加上以下內容

    "options": {
            "host": "0.0.0.0",
            "disableHostCheck": true,
            "port": 4200
          }

3. 在 terminal 輸入 `ng serve`
4. 開另外一個 terminal 輸入 `ifconfig`，找到你的 IP 位址，找到 'IPv4 Address'，通常是 `192.168.x.x`，可能會有很多個，都試試看
5. 打開手機瀏覽器，輸入你的 `192.168.x.x:4200`，就可以看到你的網頁在手機上的呈現