导入自定义 Angular 库时，Angular 12 和 Webpack 5“找不到导出的节点名称”

Question

我目前正在将一个大型 Angular 应用程序迁移到 Webpack 5 并开始收到此错误：

Compiling MyLib : main as umd
[webpack-cli] Error: Failed to find exported name of node (MonthViewComponent = /** @class */ (function (_super) {
        __extends(MonthViewComponent, _super);
        function MonthViewComponent(config) {
            var _this = _super.call(this) || this;
            _this.config = config;
            _this.openDayView = new i0.EventEmitter();
            return _this;
        }
  ...
  ..
  .

基本上，我在库本身中使用但不在public-api.ts中导出的任何组件或指令都会出现错误。 如果我导出其中一个内部组件，Webpack 不会再抱怨这个，而是下一个内部组件，而且其中有很多。 这曾经工作得很好。

我已经在 Stackoverflow 和 Github 中阅读过关于这个确切错误的类似问题，但它们都没有提供适当的解决方案，或者这些解决方案在我的情况下不起作用。

MyLib 安装在本地：

"dependencies": {
  "mylib": "file:/Users/brunofenzl/Projects/MyLib/dist/components",
  ...
}

我可以使用npm list mylib确认它已正确安装

app@1.162.0-rc.0 /Users/brunofenzl/Projects/app
└── mylib@17.0.1-beta.0 -> ./../MyLib/dist/components

目前使用

• @角/* 12.2.13
• @ngtools/webpack：12.2.13
• 网络包：5.72
• webpack-cli：4.92

知道是什么原因造成的吗？ 任何帮助都非常感谢！

Answer 1

所以问题是tsc没有为这个库找到相应的类型。 我通过将库名称添加到我的 tsconfig.json 文件中的typeRoots属性来修复它。 这样，编译器在库目录中找到了适当的类型。

"typeRoots": [
  "typings",
  "node_modules/@types/",
  "libraryname",
],