```typescript
import { existsSync } from 'fs';
 
server.get(['/shop/*','/shop'], (req, res) => {
res.render(indexHtml, {
req,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
});
});
 
server.set('views', distFolder + '/shop );
const fs = require("fs");
fs.copyFileSync('dist/spartacusstore/browser/index.html', 'dist/spartacusstore/browser/shop/index.html');
```

這段程式碼是在使用 Node.js 進行 Angular 應用的伺服器端渲染（Server-side rendering，簡稱 SSR）時，針對特定路由路徑進行了一些額外的處理。

- 程式碼中使用 Node.js 內建模組 fs 中的 existsSync 方法，判斷 indexHtml 檔案是否存在。如果檔案不存在，則應該返回 404 錯誤頁面。

- 程式碼中的 server.get 方法監聽了 /shop/* 和 /shop 兩個路由路徑，並在請求這兩個路徑時渲染應用的主模板 indexHtml。在渲染模板時，透過 providers 屬性將 APP_BASE_HREF 的值設定為當前請求的路徑 req.baseUrl，這樣 Angular 應用就能夠正確地根據請求路徑進行路由匹配了。

- 程式碼中的 server.set 方法設定了應用程式的檢視資料夾，即告訴伺服器應該從哪裡載入檢視檔案。在這個例子中，檢視資料夾的路徑是 distFolder + '/shop'，也就是應用程式的構建輸出目錄 dist 下的 shop 資料夾。

- 程式碼中使用了 Node.js 內建模組 fs 中的 copyFileSync 方法，將 Angular 應用的構建輸出目錄 dist/spartacusstore/browser 下的 index.html 檔案複製到檢視資料夾 dist/spartacusstore/browser/shop 下，以便在渲染 /shop 和 /shop/* 路由路徑時使用。

·ng build --base-href /shop/· 是一個 Angular CLI 的命令，用於構建 Angular 應用程式，並設定應用程式的基本 URL。

具體來說，--base-href 引數用於指定應用程式在 Web 伺服器上的基本 URL，也就是說，應用程式將被部署在 http://server.com/shop/ 這個 URL 下。這個引數的值應該是以斜槓開頭和結尾的相對路徑，例如 /shop/。

當應用程式載入各種資原始檔時，都會以這個基本 URL 作為字首來載入資源。例如，如果應用程式中有一個 favicon.ico 的圖示檔案，那麼瀏覽器會請求 http://server.com/shop/favicon.ico 來獲取這個檔案。

透過指定基本 URL，可以讓應用程式在部署時更加靈活。例如，可以將應用程式部署在不同的子目錄下，或者在同一個 Web 伺服器上部署多個應用程式而不會發生衝突。

關於 Angular 應用部署時的 base-href 引數

相關文章