Local npm dependency not being loaded from the node_modules directory

My name is Prasad and I have created an npm module called 'sampleApp' which has a dependency on another npm module called 'mycommon'.

I packaged the "mycommon" module into a tar ball using the npm pack command, then installed it in "sampleApp" by running "npm install ../../mycommon-1.0.0.tar.gz". I confirmed that the node_modules folder for sampleApp now includes the mycommon directory and its subdirectories properly.

However, when I launch the sampleApp, I encounter an issue where "mycommon/mycomponent/comp.js" fails to load. All of my other angular2 imports are loading correctly from the node_modules directory, but the locally installed dependency "mycommon" is attempting to load from file-cache according to the browser network log.

If anyone has any suggestions or pointers to help resolve this issue, I would greatly appreciate it.

Thank you, Prasad

Answer №1

The issue arose when .ts files were compiled into a separate outDir=dist directory. After bundling the module using npm pack, it included the dist folder and its contents/directories at the root of my module.

To resolve this, I created a components.js / components.d.ts file in the root directory of the module, re-exporting the APIs from the dist folder. This way, the consuming application could import the APIs from the exported file "mycommand/components".

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

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

I'm still getting the hang of typescript, and I've come across a situation where a function inside a Class constructor is calling another function, but when trying to access this within sayHelloAgain(), it returns the window object instead. With ...

The parameter type (key: string, id: string, pagination: number) in the argument does not match the expected type of Boolean for the parameter

I'm facing an issue while trying to implement the following documentation: https://swr.vercel.app/ using my own setup: import React, { useEffect } from 'react' import PatientsTable from 'components/patients/PatientsTable' import ...

What is the best way to create a T-shaped hitbox for an umbrella?

I've recently dived into learning Phaser 3.60, but I've hit a roadblock. I'm struggling to set up the hitbox for my raindrop and umbrella interaction. What I'd love to achieve is having raindrops fall from the top down and when they tou ...

Exploring the power of TypeScript strictNullChecks with array manipulation

My understanding of Typescript's behavior with the compiler option strictNullChecks enabled is not yet complete. It appears that in some cases, Typescript (version 2.4.1) recognizes an item in a string[] as a string, while other times it does not: in ...

The error message "The function XXX.isSupported is not defined" is displayed

Integrating a JavaScript library into Typescript When I use this function in JavaScript, it works perfectly: _clickHandler() { TouchID.isSupported() .then(authenticate) .catch(error => { AlertIOS.alert('TouchID not supported'); }); ...

How can we verify the requirements in action guard or middleware?

When developing large applications, I often find myself wishing for more control over the dispatch of actions. While I know that it's possible to check conditions in my components and cancel the dispatch-action call if necessary, this process can bec ...

The error message "Duplicate identifier readonly" occurs in TypeScript when there are multiple declarations of a property named Constants.read

I have implemented the following code in utils -> Constants.ts for my Angular project. Constants.ts export class Constants { static readonly LOCAL_STORAGE = 'LOCAL_STORAGE'; static readonly SESSION_STORAGE = 'SESSION_STORAG ...

Guide to preloading dynamically loaded modules in Nativescript

It seems like the title should be clear enough. Nativescript now has support for AOT and lazy loading, but I am having trouble getting preloading to work on top of the code example available at https://github.com/nativescript/nativescript-sdk-examples-ng. ...

Looking to retrieve the selected item from the list using console.log

Brief explanation: I am trying to retrieve the clicked item from a list using console.log(i.match). Please refer to my **home.html** code snippet below for how the list is dynamically generated. home.html <ion-card> <ion-card-content *ngFor="l ...

Pass attribute names dynamically to a component in Angular 2 using a variable

Is there a way to pass data into a component while also storing the attribute name in a variable? For example: <app-note-form-sticky [foreign_key_column]="foreign_key_value"></app-note-form-sticky> In this case, "foreign_key_column" is the va ...

Tips for managing update logic in the server side with sveltekit

Currently, I am using Sveltekit and I am facing a dilemma regarding updating input data. The actual update process is straightforward, but there is an issue that arises when trying to send an update API request immediately, as it requires an accessToken to ...

Setting up an auto-complete dropdown with PrimeNG and Angular

Struggling with the auto-complete feature, where the dropdown loads initially but fails to filter values as I type. Here's a snippet from service.ts: getUserLocations(UserID: string, allList:string ) { return this._http.get(environment.BASE ...

The command "webpack --watch && http-server ./dist -p 8080 --cors -o" seems to be experiencing some issues and is not

"server:dev": "webpack --watch && http-server ./dist -p 8080 --cors -o -d false" Every time I try to use the npm run server:dev command, I encounter an issue. The script starts watching with webpack but fails to launch the http-server. However, wh ...

Dealing with Errors in Angular 5 using Observables: Why Observable.throw isn't working

Can someone assist with resolving this issue? Error message: core.js:1542 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function Software versions: Angular CLI: 6.0.8 / rxjs 6.2.1 import { Injectable } from '@angular/ ...

Tips for configuring the node_modules/lib path in an AngularJS project

I have been trying to see if the image is working properly. Is there a way to utilize global libraries for node_module? The installation seems to be in the correct place - c:\user\AppData\Roaming\npm\node_modules However, I a ...

What is the best way to determine the type of a key within an array of objects

Suppose I have the following code snippet: type PageInfo = { title: string key: string } const PAGES: PageInfo[] = [ { key: 'trip_itinerary', title: "Trip Itinerary", }, { key: 'trip_det ...

Transform a promise-based function into an observable stream

I'm looking for advice on how to convert a piece of code that uses and returns a promise into an observable. Here is the original code snippet: export const uploadMultipleFilesToAzure = ( uploadData: Omit<UploadMultipleToAzure, 'id'> ...

I keep encountering an unhandled error while attempting to start the node server

Hi there! I'm diving into the world of node.js and I've run into a problem that has me stumped. I went ahead and installed all the necessary dependencies, but when I try to kickstart the server with the command "node server", I encounter the foll ...

Electron does not have the capability to utilize Google's Speech to Text engine

I am trying to connect my microphone with the Google Speech to Text engine. I came across this page and copied the code into my renderer.ts file, uncommented the lines with const, but when I run it, I encounter an error at line 7 (const client = new speech ...

Unable to start React project because of issues with react-scripts

I encountered an issue while trying to initiate a React project using npm start. The error message displayed is as follows: $ npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a3aca9a5aeb480f0eef1eef0">[email& ...