<h1 id="0208-live-server-開啟-build-檔案"><a aria-hidden="true" class="anchor-heading" href="#0208-live-server-開啟-build-檔案"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>0208 Live Server 開啟 build 檔案</h1>
<h2 id="1-直接資料夾開啟-indexhtml會遇到一些問題"><a aria-hidden="true" class="anchor-heading" href="#1-直接資料夾開啟-indexhtml會遇到一些問題"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>1. 直接資料夾開啟 index.html，會遇到一些問題:</h2>
<p>在 angular 的 index.html 預設是 <code>&#x3C;base href="/"></code></p>
<p>所以會以檔案資料夾目錄的位置打開(網址列會長這樣: <code>file:///C:/Users/xxx.../dist/apps/client/index.html</code>)</p>
<p>如果想用 <code>&#x3C;base href="./"></code> 解決問題，若有設定路由會發現網址除了 server 根網址以外還多了路由，然後發生 404 錯誤...</p>
<p><img src="/assets/images/2022-02-08-17-00-24.png"></p>
<p>另外，在瀏覽器上 es6 module 一定會遵循 CORS (參考文章:<a href="https://www.ithome.com.tw/voice/132470">ES6 模組匯入-林信良</a>)，所以如果直接用 <code>file:///C:/Users/xxx.../dist/apps/client/index.html</code> 開啟會出現這樣的錯誤:</p>
<p><img src="/assets/images/2022-02-08-17-18-04.png"></p>
<p><img src="/assets/images/2022-02-08-17-55-33.png"></p>
<blockquote>
<p>Origin: null 是 null 的。😭</p>
</blockquote>
<h2 id="2-下載-live-server"><a aria-hidden="true" class="anchor-heading" href="#2-下載-live-server"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>2. 下載 Live Server</h2>
<p><img src="/assets/images/2022-02-08-13-49-40.png"></p>
<p>所以這時就可以用 vscode 的 <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server 擴充套件</a> 來解決 Origin 的問題。</p>
<p>接著發現可以成功載入首頁，但是其他路由會 404...</p>
<h2 id="3-使用-live-server-但路由出問題"><a aria-hidden="true" class="anchor-heading" href="#3-使用-live-server-但路由出問題"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>3. 使用 Live Server 但路由出問題:</h2>
<p>原因是瀏覽器把路由當成 http request 了。😭</p>
<p><img src="/assets/images/2022-02-08-18-04-09.png"></p>
<p>於是為了解決這個問題，可以設定 HashLocationStrategy。</p>
<pre class="language-typescript"><code class="language-typescript">providers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>provide<span class="token operator">:</span> <span class="token maybe-class-name">LocationStrategy</span><span class="token punctuation">,</span> useClass<span class="token operator">:</span> <span class="token maybe-class-name">HashLocationStrategy</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre>
<h2 id="4-關於-angular-hashlocationstrategy"><a aria-hidden="true" class="anchor-heading" href="#4-關於-angular-hashlocationstrategy"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>4. 關於 Angular HashLocationStrategy</h2>
<ul>
<li>Angular 官網
<a href="https://angular.tw/api/common/HashLocationStrategy">HashLocationStrategy</a></li>
</ul>
<blockquote>
<p>A LocationStrategy used to configure the Location service to represent its state in the <a href="https://en.wikipedia.org/wiki/URL#Syntax">hash fragment</a> of the browser's URL.
此 LocationStrategy 用來配置 Location 服務，以便在瀏覽器 URL 的 <a href="https://en.wikipedia.org/wiki/URL#Syntax">hash 片段</a>中表示其狀態。</p>
</blockquote>
<ul>
<li>URI fragment wiki 說明
<a href="https://en.wikipedia.org/wiki/URI_fragment">URI fragment</a></li>
</ul>
<blockquote>
<p>Fragments depend on the document MIME type and are evaluated by the client (web browser). Clients are not supposed to send URI fragments to servers when they retrieve a document, and without help from a local application (see below) fragments do not participate in HTTP redirections.</p>
</blockquote>
<p>所以看起來 fragments 可以解決網址被送到 server 的問題！🎉</p>
<p>感覺設定成 HashLocationStrategy 只有好處沒有壞處的感覺(除了不常看到有網址會長這樣以外)。</p>
<h2 id="5-小結設定-hashlocationstrategy--live-server"><a aria-hidden="true" class="anchor-heading" href="#5-小結設定-hashlocationstrategy--live-server"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>5. 小結:設定 HashLocationStrategy + live server</h2>
<p>以後要開啟 build 後的檔案，可以設定 HashLocationStrategy 然後再用 live server 開啟就 Ok 了。🎉</p>
<hr>
<h2 id="tags"><a aria-hidden="true" class="anchor-heading" href="#tags"><svg aria-hidden="true" viewBox="0 0 16 16"><use xlink:href="#svg-link"></use></svg></a>Tags</h2>
<ol>
<li><a class="color-tag" style="--tag-color: #017371;" href="/notes/zavPiB0ApTq1sGZOGq9xJ">PROG.Angular</a></li>
<li><a class="color-tag" style="--tag-color: #030764;" href="/notes/yvz3NEjMcVQ7sYJm3trFQ">PROG.Server</a></li>
</ol>

1. 直接資料夾開啟 index.html，會遇到一些問題:

3. 使用 Live Server 但路由出問題:

5. 小結:設定 HashLocationStrategy + live server

0208 Live Server 開啟 build 檔案

Dendron 官網: https://wiki.dendron.so/