假設我想把 Spartacus 的 url 後面增加 custom url 訪問，比如以前透過 `https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/` 訪問，現在透過 `https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/jerry` 訪問。

在 CSR 即客戶端渲染模式下，在 app.module.ts 裡增加如下程式碼：

```typescript
{ provide: APP_BASE_HREF, useValue: /jerry/ }],
```

這段程式碼是在 Angular 中用於配置依賴注入（Dependency Injection）的提供者（Provider）的配置。

`provide: APP_BASE_HREF`：`provide` 是提供者配置中的關鍵字，指定要提供的依賴項。`APP_BASE_HREF` 是 Angular 提供的一個令牌（token），用於表示應用的基本 URL 路徑。

`useValue: /jerry/`：`useValue` 是提供者配置中的關鍵字，指定要提供的依賴項的具體值。在這種情況下，它指定了 `APP_BASE_HREF` 的具體值為 `/jerry/`。這表示應用的基本 URL 路徑為 `/jerry/`，即應用的根路徑是 `/jerry/`。

透過這段程式碼的配置，可以在 Angular 中使用依賴注入方式獲取 `APP_BASE_HREF` 的值，以便在應用中使用該值來構建 URL。例如，在路由配置中使用 `APP_BASE_HREF` 可以幫助正確地生成路由連結。

同時在 angular.json 檔案裡，增加如下配置：

```json
"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
           "deployUrl": "/jerry/",
```

這段程式碼來自 `angular.json` 檔案的 `build` 配置部分。它的作用是指定 Angular 應用在構建過程中的選項，具體解釋如下：

- `"builder": "@angular-devkit/build-angular:browser"`：這是構建過程中使用的構建器（builder）。`@angular-devkit/build-angular:browser` 是 Angular 提供的預設構建器，用於構建瀏覽器端的應用程式。

- `"options"`：這是構建選項的配置部分，包含了一系列可配置的選項。

- `"deployUrl": "/jerry/"`：`deployUrl` 是一個選項，用於指定構建後的應用在部署時的基本 URL 路徑。在這個例子中，`/jerry/` 是指應用的部署路徑為 `/jerry/`。這意味著構建後的應用將在 `/jerry/` 路徑下部署。

透過設定 `deployUrl`，可以確保構建後的應用在部署時能夠正確地載入資原始檔（如 CSS、JavaScript 等）和執行路由導航等操作。這對於將應用部署到特定的子路徑或將應用託管在特定的伺服器上是非常有用的。

Spartacus base-url 訪問 - CSR 端需要修改的配置

相關文章