question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bad absolute paths in TS auto imports due to new baseUrl

See original GitHub issue
- [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).

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:14 (11 by maintainers)

github_iconTop GitHub Comments

10reactions
seangwrightcommented, Aug 21, 2017

Is there currently a solution for using absolute paths? In version 1.3.1 of the cli the "baseUrl": "src" doesn’t work for using absolute paths like import { ThingComponent } from 'app/thing/thing.component', whereas it did work in previous verion(s).

Absolute paths are really nice for refactoring when moving components or services around because the path to a module is the same no matter where in the app it is being used.

I can’t tell from this discussion or from the related issues and PRs whether or not there is a way to accomplish this still.

If there isn’t and it’s not going to be a support feature that’s ok, I’d just like to know.

Update–

If you set the root tsconfig.json "baseUrl": "src", and the tsconfig.app.json "baseUrl": ".", then both dev and AoT builds work.

6reactions
bwalendzcommented, Jul 18, 2017

For anyone wanting to get rid of unwieldy long relative paths my solution was to add alias paths in root tsconfig.json

"compilerOptions": {
	"baseUrl": "src",
	"paths": {
		  // prefix with app- to prevent infinite recursion
		  "app-services/*": ["app/services/*"],
		  "app-models/*": ["app/models/*"]
	}
}

then the imports would look like:

import { UserService } from 'app-services/user.service'; import { User } from 'app-models/user';

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to get tsc to Resolve Absolute Paths when Importing ...
The answer comes from @DenisPshenov's comment in one of the answers. It's buried, so I'll provide it here... Tell Node where the base...
Read more >
allow relative imports for files under path mappings - YouTrack
My tsconfig.json doesn't specify baseUrl . As it stands, WebStorm's auto-import produces imports that cause TypeScript compiler errors.
Read more >
Using absolute (alias) imports in Javascript and VSCode
Learn how to import javascript or typescript modules with absolute paths in webpack & VSCode. Developers love productivity hacks.
Read more >
How I simplified my import paths in TypeScript
After transpiling this to JS, it doesn't work just by calling node dist/index.js , where dist is the output folder. So the baseUrl...
Read more >
Making Life Easier with Absolute Imports - React in Javascript ...
WebStorm assumes absolute paths are in node_modules (as per the Node.js rules), so we must tell it that we're being fancy and using...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found