###### tags: `Angular` `Proxy` `baseHref`
# 🌝[T] 如何引入其他專案的 Library

本篇將簡單講解在開發工具完成後，在其他專案中引入該開發工具後，發現其工具還有地方需要調整時，該如何同時執行這兩個專案一起開發、除錯。

## 前情提要

開發完 `quest` 工具後，我們想在 `ss-question` 透過網址直接使用 `quest`，所以我們想說應該可以直接透過雙開兩支專案，並使用 proxy 同時來測試兩個專案。

但實際測試後發現我們無法單純的直接透過 proxy 轉接，其原因是因為 library 相關的 js 檔在載入的時候會失敗。

因此我們就來探討該如何能讓 library 的 js 能夠成功載入到 app 的程式內。

## 方法一

### 步驟一: 將 library `hard link` 至 app 內

[Windows 檔案系統上的連結 (Link)](https://magicjackting.pixnet.net/blog/post/223136040)

==terminal==

先將目錄導至 library 應放置的位置

cd C:\Users\alle\Desktop\svn\ss-question\projects

再將 libray link 至該位置

//mklink /D <link> <target_file> 
mklink /D lib-quest ..\..\quest\projects\lib-quest

### 步驟二: 在 app-rounting 中補上 library 的 Module

**app-routing.module**

const routes: Routes = [
  //app
  {
    path: 'module/ss-question',
    loadChildren: () => import('../../../lib-ss-question/src/lib/lib-ss-question.module').then((m) => m.LibSsQuestionModule),
  },
  {
    path: 'module/ss-question/module/ss-question',
    redirectTo: 'module/ss-question',
  },
  // library
  {
    path: 'module/quest',
    loadChildren: () => import('../../../lib-quest/src/lib/lib-quest.module').then((m) => m.LibQuestModule),
  },
  {
    path: 'module/quest/module/quest',
    redirectTo: 'module/quest',
  },
];

### 步驟三: 調整 angular.json 設定

第二步完成後並重新執行時， terminal 會跳出類似該錯誤訊息:

:::warning
ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property
:::

這裡我試直接照著該錯誤訊息去 google 看他有什麼解法

[ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property](https://stackoverflow.com/questions/52441509/ts-is-missing-from-the-typescript-compilation-please-make-sure-it-is-in-your-ts)

我試到該解答才成功，提供給大家參考一下

> 小補給 [Preserve Symlinks in Angular Libraries](https://stackoverflow.com/questions/58260202/preserve-symlinks-in-angular-libraries)

**angular.json**

"projects": {
    "app-ss-question": {
       "architect" : {
           "build": {
               "options": {
                   "preserveSymlinks": true,
               }
           }
       }
    }
}

### 其他: 調整 angular.json 設定

該步驟主要是讓打包時不要將 app-rouing 的設定包含 library。

**angular.json**

"projects": {
    "app-ss-question": {
       "architect" : {
           "build": {
               "configurations": {
                   "production": [
                       {
                           "replace": "projects/app-ss-question/src/app/app-routing.module.ts",
                           "with": "projects/app-ss-question/src/app/app-routing.module.prod.ts"
                       }
                   ]
               }
           }
       }
    }
}

## 方法二

### 步驟一: 調整 angular.json 設定
**angular.json**

"projects": {
    "app-iamsample": {
        "architect": {
            "build": {
                "options": {
                    "baseHref": "/module/iamsample/"
                }
            }
        }
    }
}

### 步驟二: 加上 Library 的 proxy

**proxy.json**

{
    "{library's baseHref}": { // /module/quest
        "target": "{library's target}", // http://localhost:4199/
        "changeOrigin": true,
        "secure": false,
        "logLevel": "debug"
    }
}

## 小結論
以上兩種方法皆可以實現我們這次的需求，但現階段比較推薦`方法二`，原因是:

1. 設定的內容相較方法二複雜，且容易漏加入 library 的 module 設定
2. 雖然可以在 VSCode 一次改到兩個專案，但提交時還是要回到自己的專案內才可以，所以感覺會容易忘記這是兩個專案的關聯