What causes a discrepancy between a local npm package and the repository even when they both appear to be the same version?

After updating Angular from 8.2.4 to 9.1.6 and Typescript from 3.4 to 3.8.3 using

ng update @angular/cli @angular/core

I encountered issues with some module imports that are now breaking. Downgrading to Typescript 3.7 works, but I require 3.8 for a specific package.

The main module import error I'm currently dealing with is:

Module not found: Error: Can't resolve 'zlib' in '<project>/pangeav4/node_modules/request'

An 'npm ls request' reveals that request is included in the dependencies of Angular 9.1.6.

├─┬ @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19384989d95dc909f96849d9083b1c1dfc8c1c0dfc7">[email protected]</a>
│ └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd7dec8c8fb88958a8a958a">[email protected]</a>
│   └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="156770646070666155273b2d2d3b27">[email protected]</a> 
├─┬ @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7976735a23342b342c">[email protected]</a>
│ └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22574c4b54475051434e0f434c434e5b564b415162120c160c1012">[email protected]</a>
│   └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="423027333727313602706c7a7a6c70">[email protected]</a>  deduped

Upon inspection of my local node_module/@angular_devkit/build-angular/package.json (v 0.901.6), I noticed that "less" is listed as a dependency.

However, in the package.json file on the github repository for @angular_devkit/build-angular (v 0.901.6), less is not part of the dependencies at all..

How could it be that there's a difference between my local copy and the version on github when they are supposed to be the same?

I attempted deleting package-lock and node_modules and then reinstalling them.

I created a new angular project set to v8 due to the global cli configuration. I believed the issue might stem from a discrepancy between the global and local cli versions (although the ng update process continues and mentions that a temporary build is being used for installation). I updated the global cli to 9, created a new project without the issue, and once again added the dependencies from the existing project causing the problem to resurface. However, removing those dependencies from the package.json, deleting node modules and the lock file, and reinstalling did not resolve the issue in the new project.

Is there another file besides package-lock.json that could be retaining the installation command for the problematic package?

Angular Version Information:

Angular CLI: 9.1.6
Node: 10.18.0
OS: darwin x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.901.6
@angular-devkit/build-optimizer   0.901.6
@angular-devkit/build-webpack     0.901.6
@angular-devkit/core              9.1.6
@angular-devkit/schematics        9.1.6
@angular/cdk                      9.2.4
@angular/cli                      9.1.6
@angular/fire                     5.4.2
@angular/material                 9.2.4
@ngtools/webpack                  9.1.6
@schematics/angular               9.1.6
@schematics/update                0.901.6
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.43.0
angulartypescript

Answer №1

It appears that you may have manually installed TypeScript and caused some issues with your dependency tree. My suggestion would be to undo your changes and try upgrading using the ng update command. For reference, my project on version 9.1 currently uses "typescript": "3.7.5"

Running ng update will provide a summary of the updates available, and you can then proceed to upgrade each component individually. Typically, you'll need to start by running:

ng update @angular/cli @angular/core
. Avoid specifying any versions unless necessary, as it will automatically fetch the latest ones.

Another helpful troubleshooting step is to follow the upgrade guidelines in their official documentation:

https://update.angular.io/

Angular CLI: 9.1.4
Node: 10.16.2
OS: darwin x64

Angular: 9.1.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.1.4
@angular/cdk                      9.2.2
@angular/cli                      9.1.4
@angular/material                 9.2.2
@ngtools/webpack                  9.0.7
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

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 there a way to specify the login response details when making an Angular API request?

I am currently using Angular to connect to my backend login service. However, I am facing an issue with setting the popup message when the username or password is incorrect. I want to display the detailed message from the API on my login page when any erro ...

javascriptnode.jsangular

Unable to build an optional Node.js dependency using the Angular compiler

Within my npm library, there exists a code snippet that appears as follows: let _Buffer: typeof Buffer; let _require: NodeRequire; let _readFile: (path: string, callback: (err: (NodeJS.ErrnoException | null), data: Buffer) => void) => void; try { ...

javascriptnode.jsangulartypescript

Troubleshooting a dynamically loaded Angular 2 module in Chrome and VS Code

Currently, I am utilizing WebPack in conjunction with Angular 2/4 and incorporating modules that are lazy loaded. Due to this setup, the components and modules are not included in the primary .js file; instead, their code is distributed across files genera ...

angularwebpacklazy-loading

Material Modules are causing issues with AOT compilation

I'm encountering multiple errors that all share a similar pattern: ERROR in ./node_modules/@angular/material/button/typings/index.ngfactory.js Module build failed: Error: Invalid name: "@angular/material/button" at ensureValidName (C:\path&b ...

angularangular-aot

What are the best practices for implementing ColdFusion Session Management in a Single Page Application?

I'm running an Angular 4 SPA on a server with ColdFusion 11. The application makes AJAX calls to .CFC files on the server for various functions. My goal is the following: When a user visits my Angular 4 app at myapp.mydomain.com, they will be redire ...

angularsession-cookiescoldfusion-11session-management

Is there a way to access URL parameters using a router in Angular 7?

I am facing a challenge with the Angular 7 router in understanding how to utilize the "token" get parameter from different parts of the URL. Below is the code snippet where I have defined multiple routes: const myRoutes: Routes = [ { path: 'register ...

angularangular-ui-routerangular7

Dealing with the "error" parameter in JSON in Angular and Ionic

I am currently working with TypeScript and Angular 5.0. I have defined the structure of my backend response in the following interface: export interface JSONResponse { error?: { code: number, message: string }; data?: {}; } The method in my ...

jsonangulartypescriptionic-frameworkionic3

Can someone provide an explanation of the Typescript peerDependencies in Angular, specifically comparing versions tslib 1.* and 2.3.*?

I am in the process of starting a new angular project, but I'm facing difficulties in importing the localStorage feature. I referred to an existing project that utilized localStorage in the following way: import { Injectable } from '@angular/core ...

javascriptangulartypescript

When evaluating objects or arrays of objects to determine modifications

How can we detect changes in table data when users add input to cells? For example, if a user clicks on a cell and adds an input, the function should return TRUE to indicate that there are changes. If the user just clicks on the cell without making any ch ...

javascriptarraysangulartypescriptobject

Variations in comparing tuple types in TypeScript

Exploring the TypeScript Challenge, there is a particular problem known as IsNever. The task at hand is to create a type called IsNever that takes input of type T. If the resolved type equates to never, the output should be true; otherwise, it should be fa ...

typescripttypescript-typings

Angular project service file experiencing issues with TypeScript string interpolation functionality

Here is the code snippet for a service in an Angular project: @Injectable() export class FetchDataService { fetch(link){ console.log('This is a ${link}'); } } In my component, I am invoking this method with a string parameter. Upon che ...

angulartypescriptstring-interpolation

When triggering my custom Exception in Angular 2, Angular automatically encapsulates it within viewWrappedDebugError

Developing a substantial Angular 2 application, I've crafted my own Exception to handle errors efficiently. However, it appears that Angular is trying to encapsulate my error within some viewWrappedDebugError. This is the structure of my custom Excep ...

angular

The transition from Angular 8 universal to the 9 Universal Version encountered a setback: the function require.resolve is not recognized

https://i.sstatic.net/IeLyV.png After delving into angular-errors, I stumbled upon the following error: [error] TypeError: require.resolve is not a function at SchematicImpl.<anonymous> (E:\B2C-NG-9\b2c\node_modules\@ngu ...

angularangular-universal

Implementing an Angular HttpInterceptor to improve caching efficiency for simultaneous requests by utilizing a shared observable

I am looking to implement caching for HTTP parallel requests by sharing the observable and also storing the response in a Map object. Check out the online demo caching-interceptor.service.ts import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest ...

javascriptangulartypescriptrxjs

setting up angular 4 application on an IIS server

When running ng build --prod --base-href=/my folder/subfolder/, I also made sure to copy the dist folder into the specified subfolder. After setting the physical path in IIS, I tried to browse the site but only encountered a blank screen with no error mes ...

angulariis

Do we require two-way binding to effectively exchange data between components in this situation?

I'm currently facing some challenges in updating data in a child component when new data is added from the parent component. Here's a snippet of my template: <ion-content> <app-feed-comments [comments]="comments" [userId]=& ...

angular

When using the react-query library, the useQuery hook may not always return a defined value, leading

Experimenting with reactQuery in a demo app showcased in this repository. The app interacts with a mock API found here. Encountering an issue using the useQuery hook to call the following function in the product API file: export const getAllProducts = asy ...

reactjstypescriptaxiosreact-query

Comprehending Angular 5's Importing External Classes

I have developed a class structure for managing Schedules. I then brought in this class to my primary program. My issue arises from the fact that this class utilizes the HttpClient, which I was instructed to set up within the constructor. As a result, when ...

angularclasstypescript

Guide to implementing ion-toggle for notifications with Ionic 2 and Angular 2

Currently, I am using a toggle icon to set the notification as active or inactive. The response is obtained from a GET call. In the GET call, the notification value is either 0 or 1, but in my TypeScript file, I am using noteValue as boolean, which means w ...

angulartypescriptionic2

The input 'Query' cannot be matched with the type '[(options?: QueryLazyOptions<Exact<{ where?:"

Using codegen, I've created custom GraphQL hooks and types. query loadUsers($where: UserFilter) { users(where: $where) { nodes { id email firstName lastName phoneNumber } totalCount } } export functio ...

javascriptreactjstypescriptgraphqlcode-generation