Basically, I have a situation where there is a module called baz.ts and a web-worker script named worker.ts placed side by side in the same directory. However, despite being in close proximity to each other, the worker script fails to load when referenced using the relative path from the same file (loading the js file for the worker). The modules are compiled to the AMD syntax.
The folder structure looks like this:
MyApp
|-- tests
| `-- test-a
| |-- test.html
| `-- test.ts
`-- lib
|-- foo.ts
`-- foo
|--
|-- bar.ts <-- 'bar/worker' loaded here
`-- bar
|-- baz.ts
`-- worker.ts
foo.ts, bar.ts, baz.ts are all modules. foo.ts is imported in tests/test-a/test.ts which is utilized by the adjacent test.html (where the code execution takes place). The dependency tree can be easily deciphered from the structure: foo.ts imports bar.ts, which then imports baz.ts and utilizes a worker from worker.ts -- specifically, from the compiled .js output:
bar.ts
import {Baz} from "./bar/baz";
export class Bar {
constructor() {
var worker = new Worker("./bar/worker.js"); // same path as the above import
// ...
}
}
Notice how both baz.ts and worker.ts reside within the same directory in relation to bar.ts (the corresponding .js files are generated accordingly), yet the worker script doesn't load successfully. It attempts to load from the url tests/foo/bar/worker.js.
What steps should be taken to ensure that I can refer to the worker script with the same relative path as when importing the adjoining module?