[Proposal] Adding TS2 custom "paths []" to projects to enable easier imports #1306

New Issue

fergalmoran · 2025-08-09T17:19:38Z

fergalmoran commented

2025-08-09 17:19:38 +00:00

Originally created by @MarkPieszak on 10/19/2016

Just an idea, I wanted to see how everyone felt about it. @SteveSandersonMS

Instead of "directory" relative situations like:

import { NavBarComponent } from '../../components/nav-bar.component';
import { SomeOtherService } from '../../shared/some-other.service';

I always recommend people use TS2's new feature that allow directory "from" Paths[] instead. This allows you to rearrange files easily without losing their dependencies.

import { NavBarComponent } from 'myapp-components';
import { SomeOtherService } from 'myapp-services';

Tsconfig would look like this:

paths : {
    "myapp-components" : [ "./components" ],
    "myapp-services"   : [ "./services" ]
}

This is assuming you have an index.ts barrel at the root of each directory you're making Paths from. This allows you to access everything directly from just the path.

 // example barrel index.ts in /components
 export * from './nav-bar/nav-bar.component';
 export * from './home/home.component';
 // etc

Note: For all of this to work, the projects will also need Webpack2 upgrades, as well as TsConfigPathsPlugin from awesome-typescript-loader. But it's not much to setup within each webpack.config file. I haven't had any problems setting this up in other projects, but we might need to look into aspnet-webpack to see if it's able to understand TsConfigPathsPlugin etc.

*Originally created by @MarkPieszak on 10/19/2016* Just an idea, I wanted to see how everyone felt about it. @SteveSandersonMS Instead of "directory" relative situations like: ``` import { NavBarComponent } from '../../components/nav-bar.component'; import { SomeOtherService } from '../../shared/some-other.service'; ``` I always recommend people use TS2's new feature that allow directory "from" Paths[] instead. This allows you to rearrange files easily without losing their dependencies. ``` import { NavBarComponent } from 'myapp-components'; import { SomeOtherService } from 'myapp-services'; ``` **Tsconfig** would look like this: ``` paths : { "myapp-components" : [ "./components" ], "myapp-services" : [ "./services" ] } ``` This is assuming you have an `index.ts` _barrel_ at the root of each directory you're making Paths from. This allows you to access everything directly from just the path. ``` // example barrel index.ts in /components export * from './nav-bar/nav-bar.component'; export * from './home/home.component'; // etc ``` > Note: For all of this to work, the projects will also need Webpack2 upgrades, as well as _TsConfigPathsPlugin_ from awesome-typescript-loader. But it's not much to setup within each webpack.config file. I haven't had any problems setting this up in other projects, but we might need to look into aspnet-webpack to see if it's able to understand TsConfigPathsPlugin etc.

fergalmoran closed this issue

2025-08-09 17:19:38 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1306