Angular 类不是 Angular 模块

Question

当我构建我的 Angular 库，将其发布到 npm，并将其用作另一个项目中的依赖项时，每当我尝试将我的模块类导入我的 app.module.ts 时，都会收到此错误 Class TekButtonModule is not an Angular module。我已经按照多个不同站点的步骤来了解如何创建、构建和发布 Angular 库，但我无法弄清楚为什么它不会将该类识别为有效的模块类。

在我的 app.module.ts 中，这是我导入模块的方式：

import { TekButtonModule } from "tek-angular-uimodules";

@NgModule({
    imports: [
        TekButtonModule
    ]
})
export class AppModule { }

我的库项目遵循 Angular 概述的标准目录结构。设置库项目时，我没有对构建或路径设置进行任何更改。我构建的库项目有一个bundles、esm5、esm2015、fesm5、fesm2015、lib（我的自定义模块和组件所在的位置），以及一个package.json、@987654333 @（导出 lib 目录中的所有内容）、README.md、tek-angular-uimodules.d.ts（导出公共 api）和 tek-angular-uimodules.metadata.json 文件。

是否需要一些额外的配置，默认情况下未设置才能使模块正常工作？

这是我的按钮模块类：

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { TekButton } from "./button";

@NgModule({
  declarations: [
    TekButton
  ],
  exports: [
    TekButton
  ],
  imports: [
    CommonModule
  ]
})
export class TekButtonModule {}

以下是我构建项目时生成的一些文件： tek-angular-uimodules.d.ts:

/**
 * Generated bundle index. Do not edit.
 */
export * from './public-api';

public-api.ts

export * from "./lib/button";
export * from "./lib/button-group";
export * from "./lib/nav-bar";

./lib/button/button-module.d.ts

export declare class TekButtonModule {
}

如果我在 app.module.ts 文件中手动从 esm5 目录导入生成的 javascript 模块文件，那么它就可以正常工作。但是我必须手动执行此操作，因为它应该只与 WebStorm 自动为我导入的标准模块导入一起工作，就像任何其他包一样。

这是esm5目录下生成的模块js文件：

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { TekButton } from "./button";
var TekButtonModule = /** @class */ (function () {
    function TekButtonModule() {
    }
    TekButtonModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [
                        TekButton
                    ],
                    exports: [
                        TekButton
                    ],
                    imports: [
                        CommonModule
                    ]
                },] }
    ];
    return TekButtonModule;
}());
export { TekButtonModule };
//# sourceMappingURL=data:application/json;base64

感谢任何帮助。如果需要，我可以提供更多代码和屏幕截图。

这是我在尝试导入我的模块时遇到的错误：

Answer 1

所以我找出了导致我的具体问题的原因。这是两件事。第二点是我的问题的直接原因，第一点使调试更加混乱。

1. 为了测试我构建的包，我会运行ng build，然后cd进入dist目录中的构建项目，然后运行npm pack。然后，我会将构建的包作为文件依赖项安装在一个完全独立的项目中，以确保我正确地完成了所有操作。我发现（或者我假设）即使在进行本地文件依赖项安装时也存在缓存机制。此缓存似乎与从npm pack 生成的tgz 文件的文件名相关联。无论我对构建的库进行了多少更改，这种缓存都会导致第一个版本不断重新安装。对我来说，解决方法是每次将tgz 文件重命名为不同的名称。您还应该更改库版本号，这也应该有效。
2. 我的文件结构如下所示：

src
- public-api.ts
- lib
-- button
--- index.ts
--- public-api.ts
--- button.component.ts
--- button.module.ts
-- another-module
-- yet-another-module

直接在 src 中的 public-api.ts 文件看起来像这样：

export * from './lib/button'
// Other exports

src\lib\button 下的public-api.ts 和index.ts 文件如下所示：

// public-api.ts
export * from './button.component.ts'
export * from './button.module.ts'

// index.ts
export * from './public-api.ts'

我曾假设通过将index.ts 文件添加到每个目录，根public-api.ts 中的导出行会找到索引文件，并相应地导出文件，但是在某处，这种隐式解析不会工作，相反，需要显式导出。解决方法是将export * from './lib/button' 更改为export * from './lib/button/index.ts' 或export * from './lib/button/public-api.ts'。

第二点是我的问题的直接原因，第一点只是让我在尝试调试时感到非常困惑。

Answer 2

所以我用不同的解决方案遇到了同样的问题，所以我想我会在这里分享。

我刚刚将我的库更新到 Angular 9。除了奇怪的“类 my-module 不是 Angular 模块”错误之外，一切似乎都很好。

对我有用的是将 tsconfig.lib.ts 文件设置为：

...
"angularCompilerOptions": {
  ...,
  "enableIvy": false
}