Angular 类不是 Angular 模块

Question

当我建立我的角度库，将其发布到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, public-api.d.ts（导出 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 自动为我导入的标准模块导入一起使用时。

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

/**
 * @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. 然后，我会将我构建的包作为文件依赖项安装在一个完全独立的项目中，以确保我正确地完成了所有操作。我发现（或者我假设）即使在执行本地文件依赖项安装时也有缓存机制。这种缓存似乎与tgz从npm pack. 无论我对构建的库进行了多少更改，这种缓存都会导致不断重新安装第一个版本。对我来说，修复方法是tgz每次将文件重命名为不同的名称。您还应该更改库版本号，这也应该有效。
2. 我的文件结构如下所示：

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

public-api.ts直接在 src 中的文件如下所示：

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

的public-api.ts，而index.ts在src \ LIB \键的文件是这样的：

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

我曾假设通过将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。除了奇怪的“Class my-module is not an Angular module”错误之外，一切似乎都很好。

对我有用的是使用以下命令启动 tsconfig.lib.ts 文件：

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