将本地库链接到 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';

我尝试在

compilerOptions

文件的

tsconfig.json

下添加路径，但没有成功。

关于我在这里缺少什么有什么想法吗？我已经尝试了在 Angular github 问题上找到的几个建议，但没有一个能解决我的问题。

提前致谢

Answer 1

包文件夹中的 npm 链接将在全局文件夹 {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 链接

您的意思是您正在克隆存储库的文件夹中执行

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

  例如：

  编译器选项：{ “路径”：{ “我的角度库”：[“./node_modules/我的角度库”] } }

否则你会得到类似

Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library

的错误

• 在第二个终端中，转到 Angular 项目的根文件夹并运行

  ng serve

  。确保仅在安装了本地依赖项后才

  serve

  该项目。

您现在应该能够使用通过库模块导出的组件、服务等。

TL；博士

• 图书馆

  ng build --watch

• 使库依赖项指向输出文件夹，例如

  "my-angular-library": "file:../my-angular-library/dist/my-angular-library"

• npm i

• 添加 Angular 项目的路径

  tsconfig.json

  例如：

  编译器选项：{ “路径”：{ “我的角度库”：[“./node_modules/我的角度库”] } }

• ng serve

Answer 5

我通过几个步骤实现了这一目标：

第 1 步。 在您的库中运行此命令，以便在您对其进行更改后立即编译库。

C:\UI\LIBRARY> ng build --watch

第 2 步。 在 dist 内运行此命令以激活链接库。

   C:\UI\LIBRARY\dist\lib> npm link

第 3 步。 转到项目目录并按照以下步骤操作。

a. 在

tsConfig.json

中转到编译器选项并导入以下行。

"paths": {
  "@angular/*": ["./node_modules/@angular/*"]
}

b. 现在在项目目录中运行此命令。

npm link libraryName

最后运行

ng serve -o

并在库中进行更改并在此处查看更改。