Exploring the potential of sharing a library folder in a monorepo with Nest.js and Angular.js

I am currently facing an issue while trying to share models and functions between two separate typescript projects - nest.js and angular.js. To initiate this process, I have set up boilerplate nest.js and angular.js projects in folders named api and ui respectively. Additionally, I have created a folder called lib which contains a single typescript file. Interestingly, Angular has no trouble importing typescript files from parent folders. However, nest.js encounters an error that reads as follows:

➜  api git:(master) npm run start

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19786970592937293728">[email protected]</a> start
> nest start

Error: Cannot find module '/home/amir/workspace/nest-angular-monorepo/api/dist/main'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47
npm ERR! Lifecycle script `start` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0b1a032a5a445a54533c494e4853">[email protected]</a> 
npm ERR!   at location: /home/amir/workspace/nest-angular-monorepo/api 
➜  api git:(master)

Repository

typescriptnpmnestjs

Answer №1

Below is a custom diff that you can use by copying it into a file named patch.diff and then applying it with git apply patch.diff:

diff --git a/api/package.json b/api/package.json
index cc378ed..6e1db4e 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "api",
+  "name": "@root/api",
   "version": "0.0.1",
   "description": "",
   "author": "",
@@ -24,7 +24,8 @@
     "@nestjs/core": "^9.0.0",
     "@nestjs/platform-express": "^9.0.0",
     "reflect-metadata": "^0.1.13",
-    "rxjs": "^7.2.0"
+    "rxjs": "^7.2.0",
+    "@root/shared": "*"
   },
   "devDependencies": {
     "@nestjs/cli": "^9.0.0",
...

https://i.sstatic.net/d4oKM.png

Feel free to rename the package names however you prefer. In this example, I've used @root/ui, @root/shared, and @root/api.

Edit:

If you navigate under node_modules/@root/, you'll notice that npm only creates symbolic links for your packages.

https://i.sstatic.net/XDs7b.png

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

Is it possible to transfer the build files from one environment to another in Angular without the need to run npm run build again

I have experience working in over three different environments with Angular. I am wondering if there is a way to reuse built files from one environment in the others without having to rebuild each time. If this is possible, I would appreciate guidance on ...

angularnpm

Angular 8 does not allow for the assignment of type '{}' to a parameter

I have a unique approach for managing errors: private handleErrors<T>(operation = 'operation', result?: T) { return (error: any): Observable<T> => { console.error(error); this.record(`${operation} failed: ${error.m ...

javascriptangulartypescriptangular8

When using ms-rest-azure to retrieve an authentication token, how can I designate the specific resource?

I'm currently in the process of authenticating to KeyVault: import * as msRestAzure from 'ms-rest-azure'; msRestAzure.loginWithServicePrincipalSecret(clientID, clientKey, domainID); Can someone guide me on how to designate the resource as ...

node.jsazurenpmazure-keyvaultazure-cli

What is the process for manually creating a .npmrc file in Windows?

When attempting to run npm install with a connection behind a proxy, it is necessary to configure the proxy settings for npm in the .npmrc file. However, I am unable to locate this file in the C:/users/username/ directory on Windows. How can I manually c ...

windowsnpm

skeleton-typescript-webpack encounters issues when attempting to run npm start or npm run build on a Windows 7 system

I am using Windows 7 64bit with Node v6.5.0 and NPM 3.10.3. After running npm install in the skeleton-typescript-webpack directory, all packages installed successfully. However, I encounter errors when trying to run webpack-related commands. Running npm r ...

npmwebpackaureliawebpack-dev-server

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

Using useRef with setInterval/clearInterval in React with TypeScript

In my code, I am implementing a useRef object to store a NodeJS.Timeout component, which is the return type of setInterval(). However, when I attempt to use clearInterval later on, I encounter an error (shown below) on both instances of intervalRef.current ...

reactjstypescriptuse-ref

How to locate the position of an element within a multi-dimensional array using TypeScript

My data structure is an array that looks like this: const myArray: number[][] = [[1,2,3],[4,5,6]] I am trying to find the index of a specific element within this multidimensional array. Typically with a 1D array, I would use [1,2,3].indexOf(1) which would ...

javascripttypescript

Error with SwitchMap on ActivatedRoute.paramMap

When I try to run the ngOnInit method of my component, I encountered an error with the following line of code. this.products$ = this.route.paramMap.switchMap((params: ParamMap) => this.getProductsForType(params.get('type'))); The error mes ...

javascriptangulartypescriptrxjs

Securing Credit Card Numbers with Masked Input in Ionic 3

After testing out 3-4 npm modules, I encountered issues with each one when trying to mask my ion-input for Credit Card numbers into groups of 4. Every module had its own errors that prevented me from achieving the desired masking result. I am looking for ...

javascriptangularnpmionic3

Discovering the meaning of del and locating its version

Recently, I added some code to my package.json file that I found online. I'm pretty sure I have gulp.js installed already, but now my package.json looks like this: { "name": "ProjectNameHere", "version": "Major.Minor.Patch", "dependencies": { ...

npmgulp

Guide to customizing the value appearance in tooltip axispointer chart (angular)

Check out the code snippet here: https://stackblitz.com/edit/angular-ngx-echarts-zn8tzx?file=src/app/app.component.ts view image description I am looking to format and add the text "UPLOAD" and "DOWNLOAD" below the date and time. For instance: 2020-02- ...

javascriptangulartypescript

Contrasting bracket notation property access with Pick utility in TypeScript

I have a layout similar to this export type CameraProps = Omit<React.HTMLProps<HTMLVideoElement>, "ref"> & { audio?: boolean; audioConstraints?: MediaStreamConstraints["audio"]; mirrored?: boolean; screenshotFormat?: "i ...

javascriptreactjstypescriptnext.jsinterface

Resolve the conflict with the upstream dependency when installing NPM packages

I'm encountering an issue while attempting to npm install vue-mapbox mapbox-gl - I keep getting a dependency tree error. Just to provide some context, I am utilizing Nuxt.js SSR with Vuetify and have not installed anything related to Mapbox before ru ...

javascriptnode.jsnpmdependenciesmapbox

Definition of Angular 2 File

I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I enco ...

javascriptangulartypescriptd3.js

Extending the Model class in TypeScript with Sequelize

Currently, I am tackling a legacy project with the goal of transitioning it to Typescript. The project contains models that are structured as shown below: import Sequelize from "sequelize"; class MyModel extends Sequelize.Model { public static init(seq ...

typescriptsequelize.js

Creating dynamic class fields when ngOnInit() is called in Angular

I am trying to dynamically create variables in a class to store values and use them in ngModel and other places. I understand that I can assign values to variables in the ngOnInit() function like this: export class Component implements OnInit{ name: st ...

javascriptangulartypescriptangular5ngoninit

Tips for setting default values for named parameters in JavaScript

In my TypeScript method, I am using named parameters like this public foo({x, y, z , m , n} : {x:string, y: number, z: number, m?:string, n?:number}) { } The parameters m and n will be provided from another object like const defaults = { m : 'M&apo ...

javascripttypescriptnamed-parameters

What is the best method for handling utf-8 decoding errors in node.js?

After exploring Node (tested: v0.8.23, current git: v0.11.3-pre), I have found that it ignores any decoding errors in its Buffer handling. Instead of throwing an exception for non-UTF-8 characters, it silently replaces them with '\ufffd' (th ...

node.jsutf-8error-handlingnpmutf8-decode

Guide on incorporating node module for Babel through Webpack

When I execute the command npm run build I am encountering an ES6 related syntax error from Uglify, indicating that Babel may not be handling the node module (sec-to-min) properly. This is my .babelrc file: { "presets": ["es2015", "stage-0"], "plu ...

npmwebpackecmascript-6babeljsuglifyjs