Angular 类不是 Angular 模块

Question

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

在我的 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 自动为我导入的标准模块导入，就像任何其他包一样。

这是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

public-api.ts和 src\lib\button 下的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 }

Answer 3

不知道这是否会帮助任何人，但对我来说，这是由NgModule导入路径自动完成@angular/core/src/metadata/*引起的，而不是@angular/core 。