CODEWITHSUNDEEP
javascriptangularjsangularangular-cli
user1354934
user1354934

Reputation: 8841

using angular 2 CLI, how can I use absolute paths so I don't have to use import { .. } from '../../../shared/thing'

I created my project using angular 2 CLI. However I am wondering how I can stop using the crazy imports like

import { SomeSharedComponent } from '../../../shared/some-shared-component';

I am using what the angular cli generated for me. So, is it possible to use something like

import { SomeComponent } from 'app/shared/components/some-component'

Thanks

Upvotes: 2

Views: 1276

Answers (2)

Nicolas Henneaux
Nicolas Henneaux

Reputation: 12215

I had the same problem and resolve it by using a symbolic link referencing the shared folder. You should also add it to system-config.js.

import { SomeSharedComponent  } from './shared/';

with the following declaration in system-config.js.

const barrels: string[] = [
   (...)

    // App specific barrels.
    'app',
    'app/shared',
    /** @cli-barrel */
];

I would be interested by a cleaner solution.

Edit:

You should also include an index.ts in the shared folder with the following content.

export * from './some-shared-component';

Then you can use the import statement without the name of the component. 

import SomeSharedComponent from ''../../../shared/'

However, it still requires the relative path part.

I have made a Plunker to clarify the usage from the Angular2 hero tutorial. See in particular the following files.

app/relative/hero-relative.component.ts
app/shared/my-shared.component.ts
app/hero-search.component.ts

You should have a look at this issue about the Angular2 style guide. This question could also be interesting.

I think for a complete solution (without relative path) we will have to wait until webpack module manager is adopted by Angular CLI as stated in the GitHub issue. A webpack preview is already available.

Upvotes: 1

Brocco
Brocco

Reputation: 64893

The best approach is to use TypeScript v2.0 or newer (still in beta). The reason is that it gives you the ability to use path mappings.

This would allow you to define a path map named app-shared and then use that to point to the desired shared component: app-shared/some-shared-component

Upvotes: 2

Related Questions