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

虽然您可以在一个 Angular 项目下创建多个项目（例如，一个 Angular 应用程序和一个 Angular 库）以简化此过程，但我更喜欢将这两个分开，因为我喜欢一个 git 存储库来呈现一个模块。

首先，您需要将模块链接到项目的package.json 文件。以下是一般在本地链接文件的方法： Local dependency in 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;DR

• 图书馆ng build --watch

• 使库依赖项指向输出文件夹，例如"my-angular-library": "file:../my-angular-library/dist/my-angular-library"

• npm i

• 将路径添加到您的 Angular 项目的 tsconfig.json 例如：

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

• ng serve

Answer 2

当你说：

所以我现在正在做的是我去图书馆目录和 然后是 npm 链接

您的意思是您在克隆存储库的文件夹中执行npm link？因为如果是这样，那可能是您的问题，因为那是源目录，而不是实际作为包发布的内容。您必须构建库，将目录更改为包的分发文件夹，然后运行npm link。然后，当您运行该库的构建时，任何具有该链接的 Angular 应用程序都会自动在其 node_modules 中拥有您构建的最新版本。

此外，在使用链接库的 Angular 应用程序中，您需要确保在 angular.json 中将 preserveSymlinks 设置为 true。

Answer 3

你必须安装它而不仅仅是链接它，所以使用这一行加上标志 --save 以确保它将保存在你的 package.json 中

npm install [package_name] --save

您可以从源网站或从 https://www.npmjs.com/package/angular2

Answer 4

包文件夹中的 npm 链接将在全局文件夹 {prefix}/lib/node_modules/ 中创建一个符号链接，链接到执行 npm 链接命令的包

不要使用 npm 链接向您的项目添加库，使用 npm install ：

npm install angular-oauth2-oidc --save