组件库中的 Angular 7 包依赖项

Question

我在 Angular 7 中创建了一个组件库，它将被移植到其他应用程序，并且这些应用程序将能够使用这些组件。

我遇到了一个问题，其中角度库安装在组件库中，但没有与组件库捆绑在一起以供在另一个应用程序中使用，并且我最终遇到了这样的错误......

Module not found: Error: Can't resolve '@angular/material' in
 'C:\Source\MappingServices\GIT\repos\SomeFolderStructure\node_mo
dules\@myComp\components\fesm5'


ERROR in ./node_modules/@myComp/components/fesm5/components.js

我如何捆绑这样的库，以便它们与组件库一起使用，无需额外安装？

更新 Package.json 文件

{
"name": "@myComp/components",
"version": "0.0.1",
"whitelistedNonPeerDependencies": [
"agm","material", "ol"
],
"dependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"@agm/core": "^1.0.0-beta.5",
"ol": "^5.3.1"
},
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"@agm/core": "^1.0.0-beta.5",
"ol": "^5.3.1"
},
"publishConfig": {
"registry": "http://someTFSdirectory"
}
}

Answer 1

我猜你正在使用 Angular CLI 来生成你的库，所以你的库文件夹中应该有 apackage.json和 a 。ng-package.json

在内部，package.json您必须列出所有依赖项，以便 NPM 可以解决它们。您有三个选择：

dependencies：然后当其他人使用您的库时，NPM 会自动安装它们。此处列出的依赖项也需要在ng-package.json( "whitelistedNonPeerDependencies")内列入白名单

peerDependencies：然后你的库的用户必须安装依赖项（将其添加到他自己的package.json中）

bundledDependencies：然后在构建它时，依赖项将与您的库捆绑在一起。不推荐这样做！

查看您的package-json，可以发现- 部分@angular/material中缺少 - 依赖项dependencies。这就是为什么在导入它时会出现错误：NPM 不知道它必须安装它，所以它没有安装它，所以在运行时没有@angular/material.