Bad absolute paths in TS auto imports due to new baseUrl

[cyrilletuzi]

- [X] bug report

Versions.

cli 1.0.0 (since rc.2)
typescript 2.2.2 (which is installed by default by the cli)

Repro steps.

typescript 2.2 introduced quickfixes for auto importing missing classes (in VS Code, a class not imported will be underlined in red, you can click on it, then on the bulb, and it would add the import).

with angular-cli rc.1, it would generate relative imports (the default behavior) :

import { SomeService } from './some.service';

since angular-cli rc.2, as a "baseUrl": "src" has been introduced in the root tsconfig.json, the auto imports are now generated with absolute paths :

import { SomeService } from 'app/feature/some.service';

And, unless I'm wrong, it's bad practice (in particular for refactoring).

@intellix says in #5353 baseUrl was introduced because :

When you're in VSC and write code like: import { environment } from 'environments/environment', it's flagged as being incorrect because the IDE doesn't know about tsconfig.app.json

But the CLI doesn't generate that, it generates this in main.ts :
import { environment } from './environments/environment';

which is the convention and which works perfectly fine, without baseUrl.

So except I'm missing something, this change should be reversed (I can do the PR if it's OK).

[intellix]

import { environment } from './environments/environment'; is fine from main.ts because it's easy to relatively import that. When you're inside a component that's going to look like:

import { environment } from '../../environments/environment';

and that's bad practise because you're tying yourself to the file system

[cyrilletuzi]

To me, the relative import seems totally normal if the file is considered local to the project.

If it's considered as a global ressource and imported in a absolute way, should not it be registered somewhere like Angular modules (like from '@angular/core') ?

[filipesilva]

We've actually had a fair amount of requests for this in the past. As codebases grow bigger, relative imports get more and more inconvenient.

I'll leave the issue open for discussion though.

[cyrilletuzi]

Can you explain why relative imports are inconvenient ? Relative imports is the convention I've always seen in TypeScript until now, and if project global directories (like "/app") are renamed, relative imports will still work, while all absolute imports won't.

[filipesilva]

In that specific example if you rename app some imports will still need to change (like the ones in main.ts). And the reverse is also true: if you move other directories around, both relative and absolute paths will have to change.

Here are some issues in the past where the topic was brought up and discussed: #865, #1465, #2747.

[Nehmiabm]

I see that there are multiple discussions related to this issue so I just want to get confirmation. Is absolute paths possible in angular cli just by changing the tsconfig.app.json? I have tried that but still the error 'Module not found: Error: Recursion in resolving' shows up. Since my project files and feature modules are increasing, relative paths are not an option anymore. I would like to be able to use the 'baseUrl' and 'paths' configuration in tsconfig but it turns out this only works for the typescript intellisense.

[filipesilva]

@Nehmiabm should work, we test for it in https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/build/ts-paths.ts