Angular2 - WebStorm 通过 index.ts 导入我的模块

Question

Scenario

I'm currently working on an Angular2 app which is growing in complexity. To manage this, we're dividing the app into Angular modules.

Problem

When I use a TypeScript class from one module in another Angular module, WebStorm automatically references the complete file location. I get this every time I press the Tab key

// main.component.ts
import {class1} from "../otherModule/folder/class1";
import {class2} from "../otherModule/folder/class2";

Here's the directory structure, each folder contains an index barrel which references the folders within it.

mainModule/
-main.component.ts
-main.module.ts

otherModule/
-folder/
--index.ts
--class1.ts
--class2.ts
-index.ts
-other.module.ts

Ideal solution

Ideally I would like to have WebStorm automatically only reference the module name when I press the Tab key. So that I can change the location of the class within the module without worrying about dependent references.

import {class1, class2} from "../otherModule";

This functionality seems to be possible, as it works with the Angular core features and other npm modules.

import {Component, OnInit, OnDestroy} from "@angular/core";

Any help pointing me in the right direction is much appreciated.

Answer 1

From answer http://stackoverflow.com/a/40637423/1057218

You need to open File | Settings | Editor | Code Style | Typescript (Imports tab) settings and enable the option [Use directory import]

Note: requires WebStorm 2017.2 or higher