How can I designate node modules from a directory located outside the project's root folder?

In my project, I have multiple lambdas that utilize a lambda layer. The structure of the project is organized as follows:

lambdas/
  create/
    index.ts
  delete/
    index.ts
  layer/
    nodejs/
      node_modules

I want to ensure that each TypeScript file compiles using the directory path: layer/nodejs/node_modules.

I attempted to achieve this by using the following configurations in my tsconfig file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*" : ["../utility_layer_1/nodejs"]
    }
  }
}

and also tried:

{
  "compilerOptions": {
    "baseUrl": "../utility_layer_1/nodejs",
    "paths": {
      "*" : ["."]
    }
  }
}

However, despite setting the base paths, it seems that I am unable to make it function as intended.

I initially believed that utilizing base paths would allow me to read from a different directory, but it seems this is not working as expected.

Answer №1

The paths feature is utilized to transform non-relative imports into relative ones. This allows you to import your utility layers as demonstrated below:

import { Something } from 'layer1'

by configuring your tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "layer1": ["../utility_layer_1/nodejs"]
    }
  }
}

However, if you wish to compile all files in your utility folders, make sure to include them using the include property in your tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "layer1": ["../utility_layer_1/nodejs"]
    }
  },
  "include": [
    "../utility_layer_1/*.ts",
    "../utility_layer_1/nodejs/*.ts"
  ]
}

To automatically compile changes upon saving, you can simply execute tsc -w in your main directory. I trust this clarifies your query.

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

Having trouble locating the name 'it' in Jest TypeScript

After setting up Jest in React + TypeScript, I encountered an error when trying to run a test using the command npm test. The error message displayed was: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try ` ...

Version 5 of angularfie2 is encountering an issue where the type 'Observable<{}[]>' cannot be assigned to the type 'Observable<any[]>'

Encountering an error while using angularfire2 version 5: The error reads: "Type 'Observable<{}[]>' is not assignable to type Observable < any [] >." Code snippet: exercisesList$: Observable <any[]>; ionViewDidLoad() { ...

A guide on incorporating and utilizing PhotoSwipe in Aurelia / Typescript applications

I've been attempting to integrate PhotoSwipe into my Aurelia project, but I'm struggling to get it working. Within my aurelio.json file under bundles, I've included: { "name": "photoswipe", "path": "../node_modules/photoswipe/dist/ ...

Looking for a more efficient approach to writing React styles for color?

Desire I am interested in customizing colors within Material UI components. Moreover, I aim to develop a React Component that allows for dynamic color switching through Props. Challenge The current approach using withStyles results in redundant and lengt ...

Using functional components in Redux without the need for React

I have a functioning component that does not use React, but utilizes Redux as shown below: export const isAuthenticated = () => ({user}) => { console.log("user : ", user); return true; }; const mapStateToProps = (state) => { ...

Tips for transitioning from Angular to Angular 2: Overcoming key challenges

Our current Angular project is highly developed, but with the emergence of Angular 2 and its advanced features and improved performance, we are considering migrating our existing work. However, we are concerned about the potential challenges that may ari ...

Incorporate a personalized button within the actions column of ng2-smart-table for Angular 2 development

Within the context of an ng2-smart-table component in Angular 2, I am attempting to include a new button within the actions column that, when clicked, will navigate to another page. Despite my efforts to implement this new button alongside the existing add ...

The type 'number' cannot be assigned to the type 'Element'

Currently, I am developing a custom hook called useArray in React with TypeScript. This hook handles array methods such as push, update, remove, etc. It works perfectly fine in JavaScript, but encounters errors in TypeScript. Below is the snippet of code f ...

"Utilize Tuple in TypeScript to achieve high performance programming

I've been delving into TypeScript, focusing on the tuple type. As per information from the documentation, here is the definition of a tuple: A tuple type is another form of Array type that precisely knows its element count and types at specific posi ...

Error in TypeScript React: 'Display' property is not compatible with index signature

My design page in React with TypeScript template is using Material UI, with custom styles implemented using the sx prop of Material UI. To customize the styling, I have created a separate object for the properties related to the sx props: const myStyles = ...

Running the `npm start` command in Angular tends to be quite time-consuming

When I use Visual Studio Code to run Angular projects, my laptop seems to take a longer time when running the server through npm start compared to others. Could this delay be related to my PC specifications, or is there something I can do to improve it? ...

What is the best way to send multiple values from node.js to typescript?

My Node.js post API currently returns a token, but I want it to include the user's email, id, etc: app.post('/auth', function (req, response) { const body = req.body; console.log(req.body); let query = `select * from users wher ...

What is the solution for breaking a querySnapshot in Firestore?

Is there a way to exit a querysnapshot loop prematurely? I attempted using a for loop, but I keep encountering the following error message. How can this error be resolved or is there an alternative method to break out of a snapshot loop? code return ...

Angular dynamically filling in a table with incomplete object data

I am currently working on a scientific project that involves displaying large amounts of data in tables. The experiments I'm working with have timestamps that follow this format: interface TimeData { time: string; data: {SD: string, SEM: string ...

Typescript: Error encountered. Invalid input: Non-string value provided to `ts.resolveTypeReferenceDirective`

A while back, I developed an npm command line application that was working perfectly fine. However, after a recent update due to changes in TypeScript versions over time, I encountered an error when trying to run the package. The error message I received w ...

What is the procedure for cancelling a file upload in the FileUpload component of PrimeNG?

1. Issue Overview Looking to terminate file upload in PrimeNG's FileUpload component when certain filename patterns are detected. Using Angular 6.0.7 and PrimeNG 6.0.2. 2. Initial Strategy 2.1. HTML Code <p-fileUpload #fileUploader name="file" ...

A comprehensive guide on using HttpClient in Angular

After following the tutorial on the angular site (https://angular.io/guide/http), I'm facing difficulties in achieving my desired outcome due to an error that seems unclear to me. I've stored my text file in the assets folder and created a config ...

In what way can TS uniquely handle each element of an array as the key of an object?

I am struggling with an object that I need to have keys representing every item in the array, each linked to a value of any. Can anyone provide guidance on how to achieve this? Unfortunately, I couldn't find a solution. Here is an example for refere ...

Does Angular 8 development mode implement tree-shaking?

I am curious to know if tree-shaking occurs during Angular 8 development mode. When running the following command: ng build I understand that tree-shaking happens when I use the command below: ng build --optimization=true|false ...

Show the monetary value in the appropriate currency format, including fractions if the currency supports them

Here is the code snippet I am using to display the amount: <td>{{transaction.amount}} {{transaction.currency}}</td> Currently, the output looks like: 56030 USD I would like the output to be formatted like this: <td [ngSwitch]="transacti ...