Can't import modules with Typescript

Question

I'm having a really hard time trying to import the module A:

export module A {
    export class A_Class {
    }
}

into my module B:

import { A } from "./a";

let a = new A.A_Class();

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "compileOnSave": true,
  "files": [
    "a.ts",
    "b.ts",
  ]
}

My cshtml has this script section:

<script type="module" src="~/Scripts/app/b.js"></script>

And the chrome browser gives me the error:

http://localhost:64518/Scripts/app/a net::ERR_ABORTED 404 (Not Found)

For line 1 on b.js :

import { A } from "./a";

I'm completely out of ideas and have tried many combinations of es6 , commonjs , etc, with the errors on import varying just a little bit.

I'm using Typescript 3.0 .

Answer 1

Try changing this:

import { A } from "./a";

To this:

import { A } from "./a.js";

The file "a" doesn't actually exist, so Chrome is unable to find it. a.js though, should exist.

If you're running this behind a server or if you're using a module loader like SystemJS, you might be able to have requests without a file extension add .js to the request if a file isn't found, otherwise you'll need to put in the extension manually in your imports.