CODEWITHSUNDEEP
angularintellij-ideaangular-library
ciekawy
ciekawy

Reputation: 2337

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.

Upvotes: 2

Views: 5686

Answers (3)

shteeven
shteeven

Reputation: 532

For those running into this issue using Angular 10+, the problem I had was that I was importing a module that I had not used before (in my case, OverlayModule), and Angular had skipped the modules in the Ivy compiling stage, eg. the part with Compiling @angular/cdk/overlay : es2015 as esm2015. The solution for me was to re-run ng serve. Intellij was then able to see the import as an Angular module.

I did run an npm install in between the ng serves, but I don't think this step is necessary, as the Angular CLI is the one doing the compiling, and I hadn't changed any dependencies since the last install.

Upvotes: 1

WSD
WSD

Reputation: 3597

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.

  1. Access the IntelliJ's Registry (Cmd/Ctrl-Shift-A and type Registry in the search bar)
  2. Look for angular.enableIvyMetadataSupport and activate it.
  3. 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/

Upvotes: 4

ciekawy
ciekawy

Reputation: 2337

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.

Upvotes: 8

Related Questions