Angular类不是Angular模块 [英] Angular class is not an Angular module

问题描述

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

When I build my Angular library, publish it to npm, and use it as a dependency in another project, whenever I try to import on of my module classes into my app.module.ts, and get this error Class TekButtonModule is not an Angular module. I have followed steps from multiple different sites on how to create, build, and publish angular libraries, and I can't figure out why it won't recognize the class as a valid module class.

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

In my app.module.ts, this is how I am importing the module:

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

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

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

My library project follows the standard directory structure outlined by Angular. I did not change anything with the build, or path settings when I setup the library project. My built library project has a bundles, esm5, esm2015, fesm5, fesm2015, lib (where my custom modules, and components are), as well as a package.json, public-api.d.ts (exports everything in the lib directory), README.md, tek-angular-uimodules.d.ts (exports the public api), and a tek-angular-uimodules.metadata.json file.

是否需要一些额外的配置，这些配置在默认情况下并未设置以使模块正常工作?

Is there some extra configuration that it needed that isn't setup by default to get modules to work correctly?

这是我的按钮模块类:

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:

Here are some of the files that are generated when I build the project: 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 {
}

如果我从esm5目录中手动将生成的 javascript 模块文件导入到我的app.module.ts文件中，则它可以正常工作.但是，当它应该与WebStorm像其他任何软件包一样为我自动导入的标准模块导入一起使用时，我必须手动执行此操作.

If I import the generated javascript module file from the esm5 directory manually in my app.module.ts file, then it works just fine. But I have to manually do that, when it should just work with the standard module import that WebStorm auto imports for me like any other package.

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

This is the generated module js file under the esm5 directory:

/**
 * @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

感谢您的帮助.我可以提供更多代码，并在需要时提供屏幕截图.

Any help is appreciated. I can provide more code, and screenshots if needed.

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

This is the error I get when trying to import my module:

推荐答案

所以我弄清楚是什么导致了我的特定问题.这是两件事.第二点是造成我问题的直接原因，第一点是使调试变得更加混乱.

So I figured out what was causing my specific issue. It was two things. Point two is the direct reason for my issue, point one was making much more confusing to debug.

1. 为了测试构建的程序包，我先运行ng build，然后运行cd到dist目录中的构建项目中，然后运行npm pack.然后，我将把构建的程序包作为文件依赖项安装在一个完全独立的项目中，以确保我正确执行了所有操作.我发现(或者我假设)即使在进行本地文件依赖项安装时，仍存在一种缓存机制.该缓存似乎与从npm pack生成的tgz文件的文件名有关.这种缓存导致不断重新安装第一个版本，无论我对内置库进行了多少更改.对我而言，解决方法是每次将tgz文件重命名为不同的名称.您还应该更改库的版本号，这也应该起作用.
2. 我的文件结构如下:

1. In order to test my built package, I would run ng build, and then cd into the built project in the dist directory, and run npm pack. I would then install my built package as a file dependency in an entirely separate project to ensure I did everything correctly. What I found out was (or I'm assuming) that there was a caching mechanism going on even when doing local file dependency installations. This caching seemed to be tied to the file name of the tgz file that is generated from npm pack. This caching was causing the very first version to be constantly reinstalled not matter how many changes I made to the built library. The fix, for me, was to simply rename the tgz file to something different each time. You should also change the library version number, and that should also work.
2. My file structure looked like this:

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文件如下所示:

The public-api.ts file directly in src looked like this:

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

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

The public-api.ts, and the index.ts file under src\lib\button looked like this:

// 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'.

I had assumed that by adding the index.ts files to each directory, the export line in the root public-api.ts would find the index file, and export the files accordingly, but somewhere along the line, this implicit resolution does not work, and, instead, an explicit export is needed. The fix was to change export * from './lib/button' to export * from './lib/button/index.ts' or export * from './lib/button/public-api.ts'.

第二点是导致我出现问题的直接原因，第一点在进行调试时使它变得非常混乱.

Point two was the direct reason for my issue, point one just made it really confusing when trying to debug.

这篇关于Angular类不是Angular模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！