Angular Library Module Import Error

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

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

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.

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.

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?

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.

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

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.

>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

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. 

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.

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

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. 

> 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:)

and with the project you have provided:

Just try enabling angular.enableIvyMetadataSupport Registry key

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).

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

it is:)

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

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.

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