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

Question

I'm currently migrating a big Angular application to Webpack 5 and started getting this error:

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;
        }
  ...
  ..
  .

Basically, the error appears for any component or directive I use in the library itself but do not export in public-api.ts . If I export one of these internal components though, Webpack doesn't complain anymore about this one but the next internal component, and there are many of them. This used to work fine.

I've read similar questions about this exact error in Stackoverflow and Github but none of them offered a proper solution or those solutions didn't work in my case.

MyLib is installed locally:

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

I can confirm it is properly installed with npm list mylib

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

Currently using

• @angular/* 12.2.13
• @ngtools/webpack: 12.2.13
• webpack: 5.72
• webpack-cli: 4.92

Any idea what could be causing this? Any help is more than appreciated!

Answer 1

So the issue was that tsc wasn't finding the corresponding types for this library. I fixed it by adding the library name to the typeRoots property in my tsconfig.json file. This way the compiler found the appropriate typings in the library directory.

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