How can I compel npm to resolve dependencies flatly?

I am working on a project where multiple frontends share a common library.

The module dependencies for these projects are managed using npm.

In the package.json file of each project, I specify:

  "dependencies": {
    "mylib": "file:../<...path...>/mylib",
    ...other dependencies...
  },

I utilize "mylib" for two main purposes :

  • sharing certain classes;
  • sharing common dependencies (mostly Angular).

Previously, with npm version 3.3.12, after running npm install, the Angular dependencies of mylib were directly under the node_modules directory of my top level projects.

For example:

node_modules
    @angular
        core
        common
        ...
    mylib

However, in the current npm version 5.4.2, the structure has changed to:

node_modules
    mylib
        node_modules
            @angular
                core
                common

This change is causing issues in my build process, requiring additional TypeScript configuration such as:

"baseUrl": "",
"paths": {
    "@angular/common": ["node_modules/mylib/node_modules/@angular/common/"],
    "@angular/core": ["node_modules/mylib/node_modules/@angular/core/"],
    ...
    }

This becomes cumbersome when configuring for AOT, rollup, etc...

I attempted to simplify this by using npm dedupe. However, due to the numerous dependencies, it takes over 10 minutes for just one project:

npm dedupe
...
...
removed 824 packages and moved 1020 packages in 623.196s

Is there an efficient standard way to achieve the previous flattening of dependencies without the time-consuming process of npm dedupe?

Answer №1

If you're looking for a different approach than using npm, consider making the switch to yarn. This should automatically deduplicate modules. To get started, delete your current node_modules folder and run yarn install.

You can also opt for a flat installation with yarn install --flat, but in most cases, a standard installation should suffice.

Make sure to include the yarn.lock file in version control so that all checkouts will have the same module versions unless they decide to use yarn upgrade.

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

Exploring the possibilities of Ionic 2 with Web Audio API

I am encountering issues while using the Web Audio API with Ionic 2. Despite my efforts, I keep running into errors. It seems that the problem lies within the TypeScript compiler. I attempted to resolve it by adding "es2015.promise", but to no avail. The e ...

Error in Angular 2: Uncaught Promise TypeError - Unable to access property 'title' of undefined

Whenever I attempt to include a text input field with dual binding in my App, the following error pops up: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined TypeError: Cannot read property 'title&ap ...

Guide on making a Mapped Type in TypeScript using dynamic generic parameters

I am working with an object that contains one or more PreparedStatement. I am looking to create a general type definition for this object. Is there a way to achieve this in code? type PreparedRequest<Input, Result> = { input: Input; result: Resul ...

"Perform an upsert operation with TypeORM to create a new entry if it

Is there a built-in feature in TypeORM to handle this scenario efficiently? let contraption = await thingRepository.findOne({ name : "Contraption" }); if(!contraption) // Create if not exist { let newThing = new Thing(); newThing.name = "Contrapt ...

What is the process for integrating a tensorflow.js model into a React-based web application?

I've been working on a React web application in Typescript that involves loading a tensorflow.js model and then applying it each time the component updates. While I successfully implemented this in a small demo app without React, I am facing some chal ...

Conceal a division based on its numerical position

I'm having trouble figuring out how to hide multiple divs based on an index that I receive. The code snippet below hides only the first div with the id "medicalCard", but there could be more than one div with this id. document.getElementById("medical ...

Verify if the client's list of users or the User ID possesses a certain role name

How can I determine if a user in client.users() has a particular role assigned by their rolename? I don't want to use msg.member.roles.find(), rather looking for a solution that involves using client.users() or including the user id. if (client.users ...

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

Tips for effectively managing components during navigation within dynamically loaded components

Our interface includes 3 main navigations for tab views: tab1, tab2, and tab3. Additionally, there is a navigation from the side menu. Each tab dynamically loads components, allowing seamless navigation between different parts of the application. When sw ...

How can I correctly handle quotes and slashes while executing a Jest test with --collectCoverageFrom in Powershell using npm scripts?

As a React developer, I am accustomed to executing commands like the one shown below in Bash on a Linux system. However, I now need to adapt it for a Windows environment using Powershell: npm test ExampleComponent --collectCoverageFrom='["**/Examp ...

I followed the step to download Angular using NPM Install

When attempting to work on a repository that uses Angular without having it installed on my machine, I ran npm i. However, Angular was not automatically installed. So, I had to separately install the Angular CLI before running ng serve --open ...

Tips for customizing fonts in react-pdf

I am having difficulty in changing fonts within react-pdf. // Register Font Font.register({ family: "Roboto", src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf" }); The default f ...

Patience is key as you wait for the observable to finish

My methods have dependencies where one method needs to complete before the next can be called. process1(data: string) : Observable<string> { this.dataservice.process(data).subscribe( (response) => { return response. ...

React Native Component Error: Cannot read property '_this' of undefined

I am currently developing a face recognition application using React Native 0.63. I'm running my project using react-native run-android. However, I encountered an issue with Component Exception where it shows 'undefined is not an object (evaluati ...

What are the steps for creating a standalone build in nextJS?

Currently, I am undertaking a project in which nextJS was chosen as the client-side tool. However, I am interested in deploying the client as static code on another platform. Upon generating a build, a folder with all the proprietary server elements of ne ...

Do I need a package.json file in order to install npm packages?

I have an empty folder with only one file, test.js. I attempted to install some modules, but when I run commands like npm install express, I receive an error indicating that there is no package.json file in the directory. $ npm install express > [em ...

Operating on a MacOS platform, the combination of Visual Studio 2019 with the Typescript and Sass

Currently, I'm facing a challenge with compiling my TypeScript to Javascript and Scss to css in Visual Studio 2019 (MVC .Net Core). Every compiler I've tried seems to be failing. Is there anyone out there who knows the process for accomplishing t ...

Is there a way to automatically close a p-dropdown when a p-dialog is closed?

One issue I have encountered with my angular component, which includes ngprime p-dialog, is that the p-dropdown within the dialog does not close properly when the user accidentally clicks on closing the dialog. This results in the dropdown options remainin ...

Angular 2 fails to apply active class colors to tabs in a modal popup

https://i.sstatic.net/T8lIu.pnghttps://i.sstatic.net/O21ZO.pngIn my modal popup, I have multiple tabs in the modal body. The issue I am facing is that when the modal is invoked, the active tab color is not being applied. The modal itself is built using ngx ...

An obstacle encountered when implementing feature module services in a controller for a Nest JS microservice

Recently, I developed a feature module named "user" which includes a controller, model, and services to interact with my postgres database. Despite setting up everything correctly, I encountered an error when trying to call userService from the feature mod ...