Class is not an Angular module - only in IntelliJ/Webstorm when importing locally build Angular library

问题

I am trying to use Angular module implemented in a library (project) which exists in a separate Angular application. In IntelliJ I am getting an error Class MyModule is not an Angular module and all the library seems to not be recognized in IntelliJ while I can successfully run ng build for this project. Whats even more weird is that I have actually two Angular libraries existing in the other Angular app and I can use modules from the other library without issues.

I've visited other similarly looking problems related to class is not an Angular module yet they does not seem to be related.

回答1:

Here is an answer I found after a few hours of wrapping my head around. How I use the problematic library in the main project is:

npm link in the build folder of the lib
npm link @my-org/my-new-lib in the app I see issues.

along with ng build @my-org/my-new-lib --watch for the lib this allows me to work on both project at the same time seeing instantly results in the target app.

The issue is apparently due to a bug in IntelliJ - https://youtrack.jetbrains.com/issue/WEB-38354?_ga=2.263408847.258701770.1571260138-1443411092.1565629801 - it is causing dependencies with dist in the path to be automatically exculded to even though the library is correctly linked into the target app's node_modules IntelliJ is excluding it thus the library is in fact not usable in the IDE.

The workaround (similar to the one suggested in the jetbrains ticket) is to go in the IDE in the target app to the symlinked node_modules/@my-org/my-new-lib - right click on it and choose Mark Directory as -> Not Excluded

Hope this may save some time to someone as it was really confusing and non obvious to overcome.

回答2:

I was facing a similar issue on an Angular 9+ project. If that's your case, there's an IntelliJ option that you should enable to make this work. Basically, it enables support for Ivy metadata in d.ts which is the cause of the problem.

Access the IntelliJ's Registry (Cmd/Ctrl-Shift-A and type Registry in the search bar)
Look for angular.enableIvyMetadataSupport and activate it.
Restart the IDE

Then you can use the Library hassle-free

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 { }

If anyone wants to know more details please read here https://blog.jetbrains.com/webstorm/2020/02/using-angular-9-in-webstorm/

来源：https://stackoverflow.com/questions/58437137/class-is-not-an-angular-module-only-in-intellij-webstorm-when-importing-locall

标签

angular

intellij-idea

angular-library