Allow imports with .js extension

[cyrilletuzi]

Versions.

@ngtools/webpack 1.2.9

Repro steps.

Since TS 2.0, it's possible to :
import { Something } from './something.js';

Module identifiers allow for .js extension

Before TypeScript 2.0, a module identifier was always assumed to be extension-less; for instance, given an import as import d from "./moduleA.js", the compiler looked up the definition of "moduleA.js" in ./moduleA.js.ts or ./moduleA.js.d.ts. This made it hard to use bundling/loading tools like SystemJS that expect URI's in their module identifier.

With TypeScript 2.0, the compiler will look up definition of "moduleA.js" in ./moduleA.ts or ./moduleA.d.ts.

But using this possibility with @ngtools/webpack results in error :
Module not found: Error: Can't resolve './something.js'

It's important to be compatible with ES6 modules, which require the .js extension, as <script type="module"></script> is now in test in all browsers, and as for now TS doesn't provide an option to add the .js extension in transpiled files (see microsoft/TypeScript#13422).

It's possible when using ngc directly, and also in rollup/rollup-plugin-typescript so I assume it's possible with @ngtools/webpack too.

[Brocco]

I was able to get this to work locally without any changes to the CLI itself.

In your generated project's tsconfig.json under compilerOptions you will need to add "allowJs": true. This will allow tsc to resolve the references to .js files.

VS Code provided the related warning to discover this flag:

[cyrilletuzi]

Do we agree the original file is tester.ts ?

It's not about including .js files, it's about loading .ts files (as Angular is in TypeScript) but accordingly to the ES modules loading spec.

[Brocco]

I see what you're saying now, I am looking through this now.

[hansl]

Unfortunately, I'm going to close this as Working As Intended right now.

The ESM spec is not finalized yet, and webpack does not support it. We found no problem in the CLI code, but we end up passing require() calls pointing to those .js files to webpack, and webpack itself fails to resolve them.

We will continue investigate this as ESM is finalized and webpack support is added. We may release a minor update to support it at that time. Cheers.

[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.}