Angular class 不是 Angular 模块

Question

当我构建我的 Angular 库时，将它发布到 npm，并将它用作另一个项目中的依赖项，每当我尝试将我的模块 classes 导入到我的 app.module.ts，并得到这个错误 Class TekButtonModule is not an Angular module。我遵循了多个不同站点关于如何创建、构建和发布 angular 库的步骤，但我不明白为什么它不会将 class 识别为有效模块 class.

在我的 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（导出 public api ), 和一个 tek-angular-uimodules.metadata.json 文件。

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

这是我的按钮模块class:

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

所以我找出了导致我的特定问题的原因。这是两件事。第二点是我遇到问题的直接原因，第一点让调试变得更加混乱。

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

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

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

我刚刚将我的库更新为 Angular9。除了奇怪的 "Class my-module is not an Angular module" 错误外，一切似乎都很好。

对我有用的是 tsconfig.lib.ts 文件：

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

Angular class 不是 Angular 模块

Angular class is not an Angular module

javascript

angular

typescript

npm

angular-module