Angular Library Module Import Error

I created an angular library using ng generate library. All the file were generated correctly. However when I try to import the library module inside my app module I get the red squiggly error if I import the module from the library name. The project will build and run properly but I would like to fix the annoying error. The error only goes away if I import the module from the exact path.

 

Error:
Class JetpackModule is not an Angular module:
Inspection Info: Reports any symbols that are declared, imported or exported by an Angular module that are not modules, components, directives or pipes or can’t be used in the context of the property.

 

 

Another side effect of this error is the component tag squiggly.

Error:

Component or directive matching jp-jetpack element is out of the current Angular module's scope.

Inspection Info: Reports tags, which are defined by components or directives out of current scope. 

 

 

20 comments
Comment actions Permalink

try un-excluding the dist directory (from the folder right-click menu, choose Mark directory as/Not Excluded) - does the issue persist?

1
Comment actions Permalink

Yeah, I also have this issue and I excluded the dist dir.

0
Comment actions Permalink

It should be not neccessary to mark not excluded when a library is referenced in the tsconfig.json.

I think this should be automatically recognized by the ide and force indexed.

0
Comment actions Permalink

I fixed it, check if there's no extra tsconfig.app.json nested somewhere. I had one that overrid the others, which caused the paths not to work.

0
Comment actions Permalink

I am also facing this issue in angular 9. And i am following the comments from top.

But the last comment by Lodewijkwensveen is not understood.

What exactly that we are going to do in tsconfig.app.json file.

Can you please elaborate on this?

0
Comment actions Permalink

Hi,

I have the same issue with angular 9.

Can someone elaborate how to fix the issue? In general it successfully pass the build, but exceptions in IDE very annoying.

 

 

 

1
Comment actions Permalink

I also have the issue with Angular 9.  I have excluded dist/<library-name>, ts.config has the path, and the app builds fine, but the app module shows a Class is not a Module error in Intellij

0
Comment actions Permalink

I am experiencing this as well.  Also with Angular 9. 

 

Those that commented previously, i suggest you upvote the original comment to get more attention on this issue.

0
Comment actions Permalink

>i suggest you upvote the original comment to get more attention on this issue.

It must be a different issue, specific to Angular 9 that has changed the way library metadata is stored. So, rather than upvoting the old comment, I'd suggest starting a new thread for Angular 9 libraries

 

0
Comment actions Permalink

Are you certain it's Angular 9 specific?  The behavior is exactly the same as described in the OP.  And i don't see anywhere that the original issue was ever resolved. 

0
Comment actions Permalink

I figured it out.  And it wasn't an Angular 9 specific issue.  @Lodewijkwensveen was partially correct.  In the app structure that the cli created for a brand new app (before adding the library), it created a tsconfig.json and a tsconfig.app.json, in the root.  It creates another tsconfig.lib.json within the project folder for each library.  The idea is that that app.json will specify settings for just the app, and it extends (not overrides) the global tsconfig.json.  Similarly each lib.json will define the specific settings for each library and extend the global tsconfig.json. Apparently having the tsconfig.json and tsconfig.app.json both in the root, is confusing IntelliJ.  I moved the tsconfig.app.json down one directory into the "src" folder, and it fixed the issues. I feel like this is an IntelliJ/WebStorm issue, since the default cli app generation is creating them at the same level, and the compilation still runs just fine despite IntelliJ's false error reporting.

0
Comment actions Permalink

It works for me with default Angular 9 setup; if a certain file is included in several tsconfig.*.json files located in the same dir, WebStorm normally prefers the more specific one

>The behavior is exactly the same as described in the OP. 

the error is the same, but the reasons can be different. For Angular 9, enabling angular.enableIvyMetadataSupport Registry key per instructions in https://blog.jetbrains.com/webstorm/2020/02/using-angular-9-in-webstorm usually helps

0
Comment actions Permalink

Right. So it takes the more specific one, but the more specific one extends the global one.  So it should still work just fine, and it does for compilation purposes.  It's just the IDE that's misreporting an error.  I'm just trying to help you fix your product, by being thorough in my reply and description.  I still do not at all believe this is an Angular 9 issue, since it's more typescript config related.  And i'm curious what you mean by "it works for me with default Angular 9 setup"... did you create a new app.  Then create a new library, and then create a component in the library that you're using in the app?  The vague statement of "it works for me" isn't particularly helpful, and i question its accuracy.  Because i also created everything using default setup, and very thoroughly described my findings. 

0
Comment actions Permalink

> So it takes the more specific one, but the more specific one extends the global one.  So it should still work just fine

and it works just fine for me. 

>did you create a new app. Then create a new library, and then create a component in the library that you're using in the app? 

Sure:)

1
Comment actions Permalink

and with the project you have provided:

 

Just try enabling angular.enableIvyMetadataSupport Registry key

0
Comment actions Permalink

Thanks for following up, and for your patience.  That registry entry does appear to make this issue go away.  I'm a bit confused, then, why moving the tsconfig.app.json down into the src directory made it go away as well, if it was related to ivy metadata.  Why would the location of the tsconfig affect that in that way?   In any event, i hope this option is enabled by default in the next release.  It's a chore to have to ask our entire development community to enable that flag, just to work on our library project (and add it to our dev setup documentation, etc).

0
Comment actions Permalink

>In any event, i hope this option is enabled by default in the next release. 

it is:)

1
Comment actions Permalink

I have a similar problem, the only difference is I follow a monorepo approach and I install my package from npm. So I don't have anything that points to the `dist` folder, but IDE still doesn't recognize the correct import and highlight tags as unknown.

 

When I Cmd+click on import name WebStorm goes to the library source files, not the `node_modules`. I tried to exclude the library source folder but it didn't help.

 

My project is on Angular 8

0
Comment actions Permalink

Fetis26 what do your import paths look like in your module files?  Are you referencing the modules you're importing using a relative path (e.g. '../../yada/yada') or via the public api defined for your library?  Even though you have the package.json referencing the npm package, if you're referencing the modules locally when importing, it would behave like you describe.

0
Comment actions Permalink

Michael, I found the solution.

For me, it was an incorrect package produced by ng-packagr
Here are the problem description and solution for it. Once I change from index.ts to idx.ts and build fresh package it works fine me

1

Please sign in to leave a comment.