Save visuals in the typescript distribution folder

Is there a way to properly include images in a Typescript project?

I attempted to include the files or directory in tsconfig.json, but it didn't seem to work as expected.

  "include": [
    "src/resources/**/*.png", // <- 
    "src/**/*.json",
    "**/*.ts",
    "src/**/*"
  ]

Despite my efforts, the images in the dist folder are not showing up.

Here is the image showing the desired location for the images directory

I have tried including files individually in tsconfig.json, and even creating a .ts file instead of using the images directory, but none of these methods have been successful.

Answer №1

The problem was resolved by incorporating the copyfiles dependency using npm

npm i -D copyfiles

Additionally, include this script in the package.json file

  "scripts": {
  "build": "tsc -p .",
  "start": "npm run build -- -w",
  "copy": "copyfiles *.png -u 2 src/resources/*.png dist/resources/", // <- this one
  "build-n-copy": "tsc -p . && copyfiles *.png -u 2 src/resources/*.png dist/resources/",
  "test": "echo \"Error: no test specified\" && exit 1"
},

For further information on the package, refer to the documentation

You have the option to use either yarn build followed by yarn copy, or simply execute the single script yarn build-n-copy

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

Establishing the development environment

As a recent Computer Science graduate, I am currently employed at a startup where I have been assigned the task of integrating new features into purchased software. The software was obtained from AWS and my initial attempts to work on it have been challeng ...

Create a loop that cycles through 256*256*256 colors in a gradual and continuous manner, ensuring that similar shades do not repeat in subsequent iterations of the loop

Instead of using the above loop to generate all possible colors, I need a loop that creates a gradient effect where colors change gradually without repeating. In this loop, all the shades of one color will be together before moving on to the next color, un ...

Filtering an array dynamically in Typescript depending on the entered value

My task involves filtering arrays of objects based on input field values. Data data: [{ taskname: 'Test1', taskId: '1', status: 'Submitted' }, { taskname: 'Test2', taskId: '2', status: 'Re ...

Experiencing Issues with npm-install in Angular 8 - How to Troubleshoot the

My App is encountering issues with running npm-install after transferring it to a different computer. Below is the content of my package.json file: { "name": "lunaticgodsinfo", "version": "0.0.0", "scripts ...

Unable to execute 'npm run dev' command on Windows operating system

Running Laravel Version: 5.4.21 Using PHP Version: 7.1.1 node v4.4.5 npm v4.5.0 Encountering issues with npm commands on Windows 7. Whenever the command npm run dev is executed, an error message appears: > @ dev E:\xampp\htdocs\larav ...

Is it advisable to utilize Node/NPM in a distinct container for a dockerized PHP application?

In the process of dockerizing my PHP application, I have successfully set up separate nginx, mysql, and php containers. Despite this, I am unsure about where node/npm fits into this setup. My frontend has npm packages and gulp tasks for building. Would it ...

Error code E401 is being encountered with npm, indicating either an incorrect password has been provided or the

My Node version is 10.15.0 and my NPM version is currently at 6.8.4. After updating npm to 14.16.0 and node to 7.6.2, I encountered the following error - npm ERR! code E401 npm ERR! Incorrect or missing password. npm ERR! If you were trying to log in, ...

Typescript subtraction operation may result in Undefined

I am a beginner in the world of TypeScript and I'm currently struggling with running this code snippet: class TestClass { public t: number = 10; constructor() { this.t = this.t - 1; console.log(this.t); } } var obj = new TestClass(); ...

Trouble with executing simple code in a new project (binding, input, ng model) across different browsers

I am encountering an issue with this code snippet. It's a simple one - I want to display the input text in my view, but nothing is showing up. The code runs fine in an online simulator, but when I try it in my browser, it doesn't work at all. I&a ...

Absolute imports in create-react-app do not function properly when using yarn v2 workspaces alongside typescript

I am currently utilizing yarn v2 workspaces, and within my workspaces, I have a frontend project built using create-react-app / react-scripts. My goal is to enable absolute imports in the frontend application so that I can simply do things like import Butt ...

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...

The 'state' property is not found on the 'FetchPeriod' type

Currently, I am embarking on a journey to grasp ReactJS by following a tutorial provided at this Tutorial. Being a novice in the programming language, I find myself at a loss as to what steps to take next. One roadblock I encountered was when attempting ...

Eliminating redundant JSON records upon fetching fresh data

I have a list containing duplicate entries: var myList = [ { "id": 1, name:"John Doe", age:30 }, { "id": 2, name:"Jane Smith", age:25 }, { "id": 3, name:"John Doe", age:30 }, { &qu ...

A guide to seamlessly merging Chart.js with Angular 7 using data sourced from a database

Utilizing Chart.js to display information sourced from this Chart.js documentation Access the screenshot of the code ...

Encountering problems with create-react-app even after initializing it

*npm ERROR! code ELIFECYCLE npm ERROR! errno 1 npm ERROR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2959b869a8790b2c2dcc3dcc2">[email protected]</a> start: `react-scripts start` npm ERROR! Exit status 1 ...

Unexpected behavior with Node js event listener

I am currently working on emitting and listening to specific events on different typescript classes. The first event is being listened to properly on the other class, but when I try to emit another event after a timeout of 10 seconds, it seems like the lis ...

Having trouble initializing a React app: npm gets stuck at "discovering 0 security issues"

When creating my react app using the command "create-react-app app-name", I noticed that npm reported "found 0 vulnerabilities". Despite this, my directory was successfully created with 2 files: package.json and package-lock.json, as well as a folder nam ...

TypeORM issue - UnsupportedDataTypeError

Here is the entity file I'm working with, user.ts: @Entity('users') export class User { @PrimaryGeneratedColumn() id: number | undefined; @Column({ type: 'string', name: 'username', nullable: true }) username: s ...

Encountering CircularJSON Error While Creating Angular CLI 7 Project

Recently updated Angular CLI to version 7.1.1 and encountered an issue when trying to create a new project using ng new project-name. The error message displayed is: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

"Challenges faced while trying to run npm on a virtual machine provisioned with vag

Currently, I am in the process of setting up a virtual machine for a web development project I am working on. To give some context, I am using Vagrant to provision the Virtual Machine with VirtualBox as the provider. The host OS is Windows 10 (Build 14393. ...