將本地庫鏈接到 Angular 5 項目

Question

我想要的是在本地擁有一個庫，當我更改它時，這些更改會反映在使用該庫的項目中。

我在本地機器上查看了這個庫： https : //github.com/manfredsteyer/angular-oauth2-oidc

所以我現在正在做的是，我去圖書館目錄，然后npm link

然后進入我的項目目錄並執行

npm link angular-oauth2-oidc

庫文件夾出現在我的node_modules文件夾中，但我無法使用它，因為當我啟動應用程序ng serve它說：

Cannot find module 'angular-oauth2-oidc'

我是這樣導入的：

import { OAuthModule } from 'angular-oauth2-oidc';

我嘗試在tsconfig.json文件的compilerOptions下添加路徑，但沒有成功。

關於我在這里缺少什么的任何想法？ 我已經嘗試了一些關於 angular github 問題的建議，但都沒有解決我的問題。

提前致謝

Answer 1

包文件夾中的 npm link 將在全局文件夾 {prefix}/lib/node_modules/ 中創建一個符號鏈接，鏈接到執行 npm link 命令的包

不要使用 npm link 向你的項目添加庫，使用 npm install ：

npm install angular-oauth2-oidc --save

Answer 2

你必須安裝它而不僅僅是鏈接它，所以使用這一行來加上標志 --save 以確保它會被保存在你的 package.json 中

npm install [package_name] --save

您可以從源網站或從https://www.npmjs.com/package/angular2獲取包名稱

Answer 3

當你說：

所以我現在正在做的是，我去圖書館目錄，然后 npm link

您的意思是您在克隆存儲庫的文件夾中執行npm link嗎？ 因為如果是這樣，那很可能是您的問題，因為那是源目錄而不是實際作為包發布的目錄。 您必須構建庫，將目錄更改為包的分發文件夾，然后運行npm link 。 然后，當您運行該庫的構建時，任何具有該鏈接的 Angular 應用程序都將自動在其 node_modules 中擁有您構建的最新版本。

此外，在使用鏈接庫的 Angular 應用程序中，您需要確保在 angular.json 中將preserveSymlinks設置為true 。

Answer 4

雖然您可以在一個 Angular 項目下創建多個項目（例如一個 Angular 應用程序和一個 Angular 庫）以使這個過程更容易一些，但我更喜歡將這兩個項目分開，因為我喜歡一個 git 存儲庫來呈現一個模塊。

首先，您需要將模塊鏈接到項目的package.json文件。 以下是一般在本地鏈接文件的方法： package.json 中的本地依賴項

鏈接一個普通的 Typescript 庫非常簡單，因為您只需創建一個入口點（通常是index.ts ）文件並從那里導出您想要的所有內容。 此文件需要與項目中的package.json文件位於同一文件夾中。

Angular 庫有點不同，因為需要編譯 Angular 模塊才能正確導出。 如果您只是將模塊導入您的項目而不編譯，您將收到一條錯誤消息： cannot read property 'ɵmod' 。 至少在撰寫本文時會發生這種情況。

所以我們需要編譯這個庫然后鏈接它：

• 打開兩個終端窗口

• 在第一個終端中，轉到 Angular 庫的根文件夾並運行ng build --watch

• 檢查編譯模塊的輸出文件夾，通常類似於dist/[library name]

• 更改您的 Angular 項目的package.json以指向輸出文件夾，例如"my-angular-library": "file:../my-angular-library/dist/my-angular-library"

• 在同一文件夾中運行npm install

• 添加到 Angular 項目的tsconfig.json路徑，例如：

  compilerOptions: { "paths": { "my-angular-library": ["./node_modules/my-angular-library"] } }

否則你會得到類似Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library

• 在第二個終端中，轉到 Angular 項目的根文件夾並運行ng serve 。 確保僅在安裝本地依賴項后才serve項目serve 。

您現在應該能夠使用通過您的庫模塊導出的組件、服務等。

TL; 博士

• 對於圖書館ng build --watch

• 使庫依賴指向輸出文件夾，例如"my-angular-library": "file:../my-angular-library/dist/my-angular-library"

• npm i

• 添加到 Angular 項目的tsconfig.json路徑，例如：

  compilerOptions: { "paths": { "my-angular-library": ["./node_modules/my-angular-library"] } }

• ng serve