Angular: dependency injection not happening properly if we place .js or .ts at the end of import statement

Question

A typical import statement goes like this:

import {HelpService} from '../../help.service'

If I autowire HelpService in the constructor, I get an existing instance of HelpService. However, if I import it like this:

import {HelpService} from '../../help.service.js'

Now, I receive a brand new instance of the service instead of an existing one. Why is this happening?

Answer 1

This is actually a really cool feature of Typescript, detailed here.

It essentially alleviates the need for a developer to specify the type of file, because Typescript compiles down to Javascript, and the fact that a developer can reference a module in many ways (with .ts, .tsx, .js, etc)