类不是 Angular 模块 - 仅在 IntelliJ/Webstorm 中导入本地构建 Angular 库时答案

【问题标题】：Class is not an Angular module - only in IntelliJ/Webstorm when importing locally build Angular library类不是 Angular 模块 - 仅在 IntelliJ/Webstorm 中导入本地构建 Angular 库时
【发布时间】：2021-03-31 02:47:53
【问题描述】：

我正在尝试使用在单独的 Angular 应用程序中存在的库（项目）中实现的 Angular 模块。在 IntelliJ 中，我收到错误 Class MyModule is not an Angular module 并且 IntelliJ 中似乎无法识别所有库，而我可以成功地为该项目运行 ng build。更奇怪的是，我实际上在另一个 Angular 应用程序中存在两个 Angular 库，我可以毫无问题地使用另一个库中的模块。

我访问过其他与class is not an Angular module 相关的类似问题，但它们似乎并不相关。

【问题讨论】：

标签： angular intellij-idea angular-library

【解决方案1】：

这是我在转了几个小时后找到的答案。我如何在主项目中使用有问题的库是：

npm link 在 lib 的 build 文件夹中
npm link @my-org/my-new-lib 在应用中我发现问题。

与 lib 的 ng build @my-org/my-new-lib --watch 一起，这使我可以同时处理两个项目，并在目标应用程序中立即看到结果。

这个问题显然是由于 IntelliJ 中的一个错误 - https://youtrack.jetbrains.com/issue/WEB-38354?_ga=2.263408847.258701770.1571260138-1443411092.1565629801 - 它导致路径中与 dist 的依赖关系被自动排除，即使该库已正确链接到目标应用程序的 node_modules IntelliJ 是排除它，因此该库实际上在 IDE 中不可用。

解决方法（类似于 jetbrains 票证中建议的解决方法）是在目标应用程序的 IDE 中进入符号链接的 node_modules/@my-org/my-new-lib - 右键单击它并选择 Mark Directory as - > 不排除

希望这可以为某人节省一些时间，因为它确实令人困惑且难以克服。

【讨论】：

【解决方案2】：

我在 Angular 9+ 项目中遇到了类似的问题。如果这是您的情况，您应该启用一个 IntelliJ 选项以使其工作。基本上，它支持 d.ts 中的 Ivy 元数据，这是导致问题的原因。

访问 IntelliJ 的注册表（Cmd/Ctrl-Shift-A 并在搜索栏中键入 Registry）
寻找angular.enableIvyMetadataSupport 并激活它。
重新启动 IDE

那么您就可以无忧无虑地使用图书馆了

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AttachmentModule } from "attachment"; // <- This is the Library

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AttachmentModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果有人想了解更多详情，请阅读这里https://blog.jetbrains.com/webstorm/2020/02/using-angular-9-in-webstorm/

【讨论】：

对此进行快速更新以节省用户的点击次数：此键不存在，因为 WebStorm 2020.1 和 Ivy 支持默认启用。
将 Angular 11 更新到 13 为我介绍了这个问题。这解决了它。谢谢！

【解决方案3】：

对于那些使用 Angular 10+ 遇到这个问题的人，我遇到的问题是我正在导入一个我以前没有使用过的模块（在我的例子中是 OverlayModule），并且 Angular 在 Ivy 编译阶段跳过了这些模块，例如。 Compiling @angular/cdk/overlay : es2015 as esm2015 的部分。我的解决方案是重新运行ng serve。 Intellij 然后能够将导入视为 Angular 模块。

我确实在 ng 服务之间运行了 npm install，但我认为这一步不是必需的，因为 Angular CLI 是进行编译的，并且自上次安装以来我没有更改任何依赖项。

【讨论】：