PhpStorm can't resolve @ionic/angular

Question

I've got an Ionic v4 project that is running fine, but PhpStorm cannot find my references to @ionic.

It looks like the code is actually in the /dist directory, so if I change the reference to:

import { NavController } from '@ionic/angular/dist'

PhpStorm doesn't complain and I get code completion features for @ionic/angular.

However, when running ng serve the project won't compile and I get errors in the console:

ERROR in ./src/app/pages/home/home.component.ts
Module not found: Error: Can't resolve '@ionic/angular/dist'

How can I fix this?

Why does project compile when not specifying /dist?

Edit:

In PhpStorm, the entire node_modules directory is excluded, but not specifically the @ionic/angular. Note, references to other modules are working fine.

Edit 2: Here's how the folder coloring shows up:

@ionic/angular doesn't work
@ionic-native/core works
@angular/core works

What PhpStorm version do you use? Please check that node_modules/@ionic/angular/dist folder is not marked excluded — lena
@lena thanks for the response. My version is a bit old, 2016.2.2. Also, I just posted a screenshot of my directories. The entire node_modules folder is excluded. should this be a problem? Other dependencies work fine. — BizzyBob
your version is very old indeed. The entire node_modules folder is excluded by design - it's done for better performance. But direct dependencies listed in package.json should still be indexed. Please check what color is used for node_modules/@ionic/angular/dist folder in the Project tool window — lena
@lena, I just added a screenshot showing how some of the folder coloring shows up. I'll look at package.json files to see if I notice anything. Thanks. — BizzyBob
actually, I'd suggest upgrading your PHPstorm version; 2016.2.2 doesn't support ionic 4 — lena

BizzyBob BizzyBob · Accepted Answer · 2019-03-29T05:28:19

I thought I'd share the workaround that I ended up using.

I just added an index.d.ts file in the node_modules/@ionic/angular/ directory, with the following contents:

export * from './dist';

Of course it isn't ideal to modify the contents of your dependencies, but this simple fix keeps my IDE from driving me crazy... :-)

PhpStorm can't resolve @ionic/angular

1 Answers