webpack-angular：捆绑包包括库的整个node_modules

Question

我在文件夹C:/libraries/someLib中有一个本地ng库
我在C:/app

下有一个应用程序

1. 在应用程序中，我已经使用file:在依赖项下安装了someLib。
2. someLib具有angular@core作为peerDependency
3. 应用具有angular@core作为依赖项。

但是该捆绑包包含node_modules下的整个libraries。
我想念什么？

图片的整个左侧不应该存在：

{
  "name": "someLib",
  "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^8.1.2",
     "@angular/core": "^8.1.2"
  }

-

"dependencies": {
    "someLib": "file:../../libraries/dist/someLib",
    "@angular/core": "^8.1.2"
}

Answer 1

第一步，需要检查您如何包装图书馆。 我有一个示例github存储库，其中我已在angular lib中使用ngx-own-carousel并在应用程序中使用了。（https://github.com/sanketmaru/ng-lib-sank）

您还可以使用此https://blog.angularindepth.com/the-angular-library-series-publishing-ce24bb673275教程来验证步骤。

您的库代码不应附带第三方库，并且每个使用库的应用程序都必须单独安装。

如果这没有帮助，您可以将代码发布到示例存储库中，我可以签出。

Answer 2

本地包会发生什么，就是打字稿编译器会遵循npm创建的链接，并搜索相对于库路径的库导入。

1. Typescript编译器读取包含../library/src/some.ts的文件import @angular/core。
2. 它相对于@angular本身搜索library，因此../library/node_modules/@angular被用作导入路径。

解决方案是在paths的App项目tsconfig.json中提供，它告诉编译器无论文件位于何处，都应在特定的文件夹中解析特定的导入。

{
"compilerOptions": {      
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
        "@angular/*": ["../node_modules/@angular/*"],
        "rxjs": ["../node_modules/rxjs"]
    }
},

在这种情况下，来自任何路径的任何库都将始终向应用程序的@angular请求node_modules，并且@angular的一个副本将被捆绑在vendor.js中。

这在angular的文档中也有说明，但是最初我没有得到他们想要的。 https://github.com/angular/angular-cli/wiki/stories-linked-library#use-typesscript-path-mapping-for-peer-dependencies