Utilizing Typescript's compilerOptions.outDir for efficient compilation with external non-TS modules

I am encountering an issue with non-ts modules (text assets) not being transferred to the outDir as specified in tsconfig.json (or I might not be performing the task correctly).

Here is a simple example to reproduce the issue:

// /src/main.ts
import text from 'text.dat'
console.log( text )

// /src/a.d.ts
declare module 'text.dat' {
    const value: string;
    export default value
}

// /tsconfig.json
{
  "compilerOptions": {
    "target": "es5",                      
    "module": "system",                   
...
    "outFile": "./public/bundle.js",      
    "outDir": "./public",                  
...

// /public/a.html
...
    <script type="text/javascript" src="bundle.js"></script>
    <script>
        SystemJS.import('main');
    </script>
...

When the transpiled javascript attempts to load my text module as http://localhost:8082/text.dat, it results in a HTTP 404 error because the original file is located in the /src folder and is not being copied over to /public.

What am I overlooking?

For what it's worth, the complete source for reproducing this issue can be found at https://github.com/duzenko/typescript-non-ts-module-bundle

Answer №1

Unfortunately, the typescript compiler does not support this feature. You can check out the Typescript Github Issue here for more information.

If you are using yarn or NPM, I would suggest creating a script that moves those files to the correct location after a successful compilation. For example, if you have a file in the src directory called src/foo/bar.biz, you can run tsc to output to the ./build directory and then manually run

cp src/foo/bar.biz build/foo/bar.biz
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing Prisma error handling in Express

Dealing with error handling using ExpressJS and Prisma has been a challenge for me. Anytime a Prisma Exception occurs, it causes my entire Node application to crash, requiring a restart. Despite looking at the Prisma Docs and doing some research online, I ...

Incorporating a parameter into a <div> only when the parameter holds a value

Being new to web development, I have a rather basic query. If the datainfo prop variable is not empty, I'd like to include a data attribute in the div tag. <div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : ""}> C ...

Navigating between components in different modules using Angular 5

I have a home component within the homeModule and a contactUs component within the contactModule. When I click cancel on the contactUs component, it should redirect me to the Home component. Here are the routes: import {NgModule} from '@angular/cor ...

What is the best approach for conducting unit tests on model interfaces with TypeScript?

export interface Person { fullName: string; } What is the best way to create unit tests for the above interface and ensure that Karma includes it in the code coverage report? I attempted to assert properties by creating an object, but it seems that K ...

Include a fresh attribute in the Interface

How can I include a boolean property isPhotoSelected: boolean = false; in an API interface that I cannot modify? The current interface looks like this: export interface LibraryItem { id: string; photoURL: string; thumbnailURL: string; fi ...

Why is it necessary to redefine the interface and its class in Typescript after initially defining the interface with implements?

interface Filter { rowAddRow: (treeData:Tree[],id:string,filterType:FilterType) =>Tree[] } class FilterAction implements Filter { // I must redeclare here to ensure the correct type for id rowAddRow(treeData:Tree[], id, filterType):Tree[] { ...

Encountering issues with `Partial<this['someProperty']>` usage in TypeScript

Provided class A { props: { bool?: boolean, test: string } = { test: 'a' }; setProps(newPropertiesr: Partial<this['props']>) { } a() { this.setProps({ bool: fals ...

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

Troubleshooting the malfunction of the Angular 2 Tour of Heroes project following the separation of the app

Recently, I encountered a challenge while following a tutorial on learning Angular 2. Everything was going smoothly until I reached the point where I had to divide appcomponent into heroescomponent & appcomponent. Is there anyone else who has faced th ...

When a 404 error is thrown in the route handlers of a Next.js app, it fails to display the corresponding 404 page

I am encountering an issue with my route handler in Next.js: export async function GET(_: Request, { params: { statusId } }: Params) { const tweetResponse = await queryClient< Tweet & Pick<User, "name" | "userImage" | &q ...

The error message "external.js: $ is not defined" indicates that

Recently, I integrated an external JavaScript file into my Angular 14 project. This JS file contains the event $('.class').click(). However, every time I launch the application on localhost, a message pops up in the browser stating that $ is not ...

What is the best method to remove a value from a JSON object in a CSV file?

I received a JSON response like this: xxx: ["fsd,das"] I am looking for a way to remove the value "fsd" from the JSON object. The issue is that the response inside the JSON is not actually an array, but rather a CSV format. How can I go about deleting it ...

What is the reason for the index type being defined twice?

Here is an example from the official TypeScript documentation: class Animal { name: string; } class Dog extends Animal { breed: string; } // Error: indexing with a 'string' will sometimes get you a Dog! interface NotOkay { [x: numbe ...

The type of the object is classified as 'unknown' (2571) while utilizing the map() function with an array containing objects

After researching this error extensively on Google and reading multiple posts, I am still unable to find a solution. I am trying to fetch data from an external API call that has the following signature: const properties: { [x: string]: unknown;} | { [x: s ...

The issue with the React Hook for window resize not updating remains unresolved

I have a React Hook designed to update the window size on resize, but it's not functioning correctly. Can someone please help explain why this is happening and provide guidance on how to utilize this hook in another component to create a Boolean value ...

Is it necessary to pass "app" to module.exports before configuration in Express.js?

For my Node.js/Express project, I am looking to include other files in my server setup. To do this, I am using the following syntax: module.exports = function (app) { //some code } When configuring my main server file with "app.use," I want to know if it ...

Expressions without a call signature cannot be invoked

When using an adapter in the given example, I encountered a type error specifically on the last line of the getGloryOfAnimal method. Despite having clearly defined types, I am puzzled by this issue. interface ICheetah { pace: string; } interface ILio ...

What is the best way to maintain the order of variadic types for conditionally inferred conditional types?

Here is the type definition that I am working with: type Inner<Type> = Type extends Wrapper<infer U>[] ? U[] : never; Additionally, I have a function with the following signature: function myFunc<From extends Wrapper[], To>( values: ...

Troubleshooting Next.js 14 JWT Session Error in Conjunction with Next Auth - addressing a type

Recently, I delved into working with Next.js 14 and Next Auth 5 beta. However, every time I attempt to log in, I encounter the following error: [auth][error][JWTSessionError] [auth][cause]: TypeError: Cannot read properties of undefined (reading 'user ...

What is causing TypeScript to compile and remove local variables in my Angular base controller?

I am trying to develop a base controller in Typescript/Angular for accessing form data, but I'm encountering an issue where the form member seems to be getting removed during compilation and is not present in the generated JavaScript code. Could you ...