Angular auto-imports use deep imports (src directory)

This problem applies to both the latest versions (downloaded and installed today) of both WebStorm and PhpStorm, on freshly created projects using the Angular-CLI project types.

When using autoimport, the import path is not the correct surface API import, instead using deep imports.

As an example, WebStorm will auto-import

import {Router} from "@angular/router/src/router";

rather than the correct

import {Router} from "@angular/router";

The correct version is, however, recognized (what I mean is, if manually changed, the IDE does not complain about it).

Is there a way to fix this so that the imports are correct?

 

Thanks in advance!

10 comments
Comment actions Permalink

Can't recreate - as soon as I type `Router`, it gets auto-imported as

import {Router} from '@angular/router'

What do your code style TypeScript settings for imports look like? Please attach a screenshot of Settings | Editor | Code Style | TypeScript | Imports page

0
Comment actions Permalink

Hi, thank you for your answer. I attach the screenshot.

Also, I experimented changing these setting. Any combination of the second and third options gives the same results.

For further reference, my Node version is 8.8.1 and Angular CLI is version 1.6.5.

 

 

0
Comment actions Permalink

works for me using exactly same settings + default angular project created with cli 1.6.6

Please provide a project that shows up the issue (including .idea folder) + your settings (File | Export settings)

0
Comment actions Permalink

This project was created and exported from a fresh install of WebStorm 2017.3.4, all up to date.

I have uploaded the settings jar and the project (minus the node dependencies directory) to Google Drive. Here are the download links:

https://drive.google.com/open?id=1-c0GZh6iOsSklIGQPTclJZKKh_xf4tX6

https://drive.google.com/open?id=1HYnfbE5jDTHsIRTII2IWHSmjxZfgFfZx

Thank you for your patience!

0
Comment actions Permalink

Thanks:)

Unfortunately the behavuior is still the same even when using your settings and project - `Router` is auto-imported from '@angular/router' on hitting Alt+Enter... Do you have any custom plugins installed? Can you provide your idea.log and screencast of the issue (recorded when using the test project you have provided)?

 

0
Comment actions Permalink

also, do you have any symlinks in your project path?

0
Comment actions Permalink

Actually yes, I do have symlinks in the project path.

I just tried on a different, non-symlinked path and that seems to solve the problem.

I will just move my project directory to a different path for now. Thanks for your help!

1
Comment actions Permalink

we have some issues related to using symlinked paths in typescript project - https://youtrack.jetbrains.com/issue/WEB-30318, https://youtrack.jetbrains.com/issue/WEB-30410, https://youtrack.jetbrains.com/issue/WEB-30575

In general, Jetbrains IDEs don't play well with symlinks, they cause various issues - for example, symlinked files/folders are recognized as 2 entries and aren't 'merged', cyclic links can cause performance issues when indexing (+ symlinked folders are not properly excluded), fsnotifier tool we use to synchronize the IDE virtual file system with external changes doesn't support them (https://youtrack.jetbrains.com/issue/IDEA-65174). So I'd suggest to avoid using soft links if possible

1
Comment actions Permalink

I'll keep that in mind. Thank you again and have a great day!

0
Comment actions Permalink

Solution worked for me too. Maybe the IDE should warn about symlinks when opening the project? 

0

Please sign in to leave a comment.