feature(import resolving): ability to import (ts, sass etc.) with path alias

[ValeryVS]

Closes #1465 #2254

Example imports

before

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

@import '../../../../../styles/variables'

after

import { SharedModule } from '@app/shared';

@import '~@app/styles/variables'

Why not just use tsconfig.json?

1.
Because tsconfig.'s paths and webpack's alias syntax is different.
You can use

"@app/*": [
  "app/*"
]

for child directories or

"@app": [
  "app"
]

for app directory itself in tsconfig, but you need

alias: {
  "@app": "/path_to_project/src/app"
}

in webpack's resolve configuration.

2.
Because these aliases also affect sass imports.

[ghost]

Another PR solving this issue :) Hope this one will be approved and merged! Good stuff.

[clydin]

This works but is fairly fragile. The tsconfig.json needs to be aligned with angular-cli.json and the user can only use a restricted set of the rich path mapping support found in typescript. It also directly exposes a webpack setting.

As an alternate solution (for typescript), the new loader could be extended to fully support typescript's paths option by using typescript's module resolution and rewriting relevant imports. This is actually a more complete solution then ATL's plugin; as it would allow the loader to mimic the behavior of tsc (in terms of module resolution) and not pollute webpack's global module resolution. The sass-loader uses a similar concept to apply the sass import semantics.

As to stylesheets, exposure of the underlying preprocessor include path settings could be a solution.

[filipesilva]

Superseded by #2470.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}