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下添加路径，但尚未成功。

关于我在这里缺少什么的想法？我已经尝试了几个有关角度github问题的建议，但没有解决我的问题。

提前致谢

Answer 1

包文件夹中的

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

不要使用npm链接向项目中添加库，请使用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 文件。以下是在本地链接文件的一般方法： 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/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 项目。

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

TL;DR

图书馆ng build --watch
使库依赖指向输出文件夹，例如"my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
为您的 Angular 项目的 tsconfig.json 添加路径，例如：

编译器选项：{ “路径”：{ “我的角度库”：[“./node_modules/my-angular-library”] } }
ng serve

将本地库链接到Angular 5项目

4 个答案: