CODEWITHSUNDEEP
angulartypescriptwebstorm
Ben Winding
Ben Winding

Reputation: 11787

Angular2 - WebStorm import my modules by index.ts

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.

Upvotes: 1

Views: 772

Answers (1)

Ben Winding
Ben Winding

Reputation: 11787

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

enter image description here

Upvotes: 0

Related Questions