Establish a route nickname for files outside the project directory

I'm currently tackling a project that is divided into multiple angular projects. Within these projects, there are some services that are shared. Is there a way for me to incorporate these services into my project without encountering errors?

/root
  /project-1
    /angular.json
    /tsconfig.json
  /project-2
    /angular.json
    /tsconfig.json
  /utilities
    /src
      /auth.service.ts
      /s3.service.ts
      /lambda.service.ts

Within the root folder of the angular projects tsconfig.json, I have the following configuration (project-1, project-2):

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@utilities/*": [
        "../utilities/src/*"
      ]
    }
  }
}

Whenever I initiate npm start in project-1, I encounter the following error(s):

Error: ../utilities/node_modules/buffer-equal-constant-time/index.js
Module not found: Error: Can't resolve 'buffer' in 'C:\projects\utilities\node_modules\buffer-equal-constant-time'

// The same error message repeats for different modules...

Here's the content of my utilities/package.json:

{
  "dependencies": {
    "@angular/core": "^11.0.5",
    "@aws-sdk/client-cognito-identity": "^3.0.0",
    "@aws-sdk/client-lambda": "^3.0.0",
    "@aws-sdk/credential-provider-cognito-identity": "^3.0.0",
    "jsonwebtoken": "^8.5.1",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.0"
  },
}
javascriptangulartypescript

Answer №1

I have discovered a method to achieve this task. First, create a symbolic link in the utilities folder using npm link. Next, in the project-1 folder, establish a connection to the project using npm link utilities.

Furthermore, I needed to specify paths and includes in the tsconfig.json file for proper referencing:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@utilities/*": [
        "node_modules/utilities/src/*"
      ]
    }
  },
  "include": [
    "node_modules/utilities/src/**/*.ts"
  ]
}

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

Using AngularJS to auto-populate additional fields after selecting an option from the typeahead autocomplete feature

Just starting with AngularJS and finally figured out how to implement Auto-complete in Angularjs. Now, when a user selects a value from the auto-complete, I want other fields to be populated based on that selection. For example, upon loading the screen, d ...

javascriptjqueryangularjs

Tips on enabling click function in an ionic infowindow

After creating a div in my HTML file and referencing it in my TS file using document.getElementByID, I utilized its inner HTML as the content for an infowindow. However, despite my efforts, I am unable to get clicks working. Adding event listeners to any e ...

typescriptgoogle-mapsionic3

Creating a custom loading spinner featuring your logo

Hello, I am looking to create a custom loading spinner using CSS, JS or any other method with my logo. I have the logo in PNG, GIF, and SVG formats and would like to use it for long site loads, image loads, or any other loading processes within my Vue3 pro ...

javascriptcssvue.js

Learn how to generate a table directly from code instead of relying on a .json file

I need help modifying this code snippet that currently reads JSON data from a file. I have generated the JSON data from my database and would like to update the code to read it directly instead of from a file. You can refer to how the JSON is being accesse ...

javascriptjsontwitter-bootstrappagination

import jQuery into a JavaScript file

I'm currently working on a Chrome extension that relies on background.js to perform basic tasks. I need to include jquery.js in my background.js file so that I can utilize its ajax function, but I'm unsure of how to achieve this. Is it even possi ...

javascriptjqueryajaxgoogle-chromeinclude

What is the best way to horizontally align three animated progress bars alongside images?

Check out this jsfiddle that shows a vertical alignment of the progress bars. How can I modify it to align them horizontally and centered? https://jsfiddle.net/bLe0jLar/ .wrapper { width: 100px; height: 100px; } .wrapper > #bar, #bar2, #bar3 { ...

javascripthtmlcssflexbox

Problem with disabling dates on jQuery datepicker

After spending several days trying to solve this issue, I've decided to seek help. The problem at hand is disabling dates in my bootstrap datepicker using the following HTML code: <head> <!-- Required meta tags --> <meta charset="utf-8 ...

javascriptphpjquerybootstrap-4bootstrap-datepicker

Selection pseudo selectors for tooltips are a great way to provide additional

Can someone explain how tooltips change on Medium.com when you double click a word or sentence to reveal options like share and edit? https://i.stack.imgur.com/0EVmH.png ...

javascripthtmlcss

Using Jquery Mobile to make an AJAX POST request with XML

Is it possible to use this code for XML parsing? I have successfully parsed using JSON, but there is no response from the web service. This is the status of the webservice: http/1.1 405 method not allowed 113ms $j.ajax({ type: "GET", async: false, ...

javascriptajaxjqueryjquery-mobile

Upon updating from Angular5 to Angular7, the slice pipe seems to be stuck in an endless loop

Recently, I upgraded my project from angular 5 to angular 7. However, after completing the upgrade, I noticed that the slice pipe was not functioning correctly. It seemed to be causing infinite loops in the angular core files and even resulted in my browse ...

angularangular5angular7angular-pipeng-upgrade

Verify if the user is currently inputting text within a specific range of characters within

I am dealing with a specific issue involving a textarea. By default, this textarea contains a string of any type, but a user is only able to type inside opening and closing brackets. For example, "Leave[]" allows typing within the brackets but not outsid ...

javascriptreactjsstringrecursion

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...

javascripthtmlcss

Functionality Issue: Submit Button Not Working on Designed Form Select

Through dedication and hard work, I managed to create a customized form with images that display correctly in Firefox, Chrome, and Internet Explorer's compatibility mode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

javascriptcssformsonchange

Unable to locate the name 'X' despite importing the name directly above

I'm a little confused about the situation at hand. The name is clearly mentioned right above. https://i.sstatic.net/D0CEV.png Displayed below is the content of storage-backend.interface.ts: export declare interface StorageBackend extends Storage { ...

typescriptangular

Encountering the error message "Error: 'preserveValueImports' is an unknown compiler option" while setting up a SvelteKit project

https://i.stack.imgur.com/fnidk.png Every time I set up a new sveltekit project using TypeScript, I keep encountering the error "Unknown compiler option 'preserveValueImports'.ts" in the tsconfig.json file. The error shows up above the line wher ...

node.jstypescriptnpmsveltesveltekit

Actions for HTML form submission to API through proxy link

Currently, the form is functioning properly with this setup <form method="POST" action='http://localhost:3000/newRecord'> However, my goal is to simplify the action attribute to just be action='/newRecord'. In React, I achieve ...

javascripthtmlnode.jsapiexpress

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

This feature allows users to select a package category from a dropdown menu. For example, selecting "Unifi" will display only Unifi packages, while selecting "Streamyx" will show only Streamyx packages. However, if I first select Unifi and then change to S ...

javascriptphphtml

Accessing public static files in Express by using the routes folder

I'm currently facing an issue with accessing a static file named 'home.html' located in the public directory of my app's architecture: public home.html routes index.js views myapp.js In myapp.js: var express = require('ex ...

javascriptnode.jsexpress

Reading a Json file with keys in puppeteer BDD: A Guide

Greetings, I am new to the world of puppeteer. I have successfully created my basic framework and now I am trying to figure out how to read data from .json files. I attempted to use the readFile method in my helper class, but unfortunately, it resulted in ...

javascriptjsonautomationpuppeteerbdd

The Google Drive API in Node.js is notifying the deletion of files

I encountered an issue with the Google Drive API in my application. Even after deleting files from Google Drive, the listfiles function still returns those deleted files. Is there a solution to prevent this from happening? Below is the function of my API: ...

javascriptnode.jsrestexpressgoogle-drive-api