Issue encountered while initializing a fresh project with Angular CLI version 13.1.0

I encountered an issue while trying to create a new project with Angular CLI v13.1.0

\ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42273a232f322e276f23323202726c726c72">[email protected]</a>
npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d19141d081e0e1f041d192d594358435e">[email protected]</a>
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~4.5.2" from the root project
npm ERR!   peer typescript@">=4.4.3 <4.6" from @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8caddc1c4cc85c9c6cfddc4c9dae8999b86998698">[email protected]</a>
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@">=4.4.2 <4.5" from @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2e22203d2421283f602e21240d7c7e637d637e">[email protected]</a>
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"~13.0.0" from the root project
npm ERR!   peer @angular/compiler-cli@"^13.0.0 || ^13.1.0-next" from @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfc8d4d1d990dcd3dac8d1dccffd8c8e938c938d">[email protected]</a>
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2021-12-10T12_46_21_814Z-debug.log
× Package install failed, see above.
The Schematic workflow failed. See above.

My current setup includes Node JS version 16.13.1 and npm version 8.1.2

After attempting to clear npm cache using --force and reinstalling Node JS, the issue persists.

angulartypescriptnpmangular-clinpm-install

Answer №1

This is how I tackled the issue:

  1. I initiated the project using ng new, which successfully created the project but encountered an error during dependency installation.

  2. I then manually updated the package.json file, changing all angular package versions from 13.0.0 to 13.1.0, followed by running npm i.

Subsequently, all packages were installed without any issues and I was able to execute ng serve command smoothly.

Answer №2

The current problem seems to stem from a version issue in TypeScript, as mentioned in this tracking thread: https://github.com/angular/angular-cli/issues/22333. To resolve it temporarily, consider downgrading or running npm i --force until the issue is resolved.

Answer №3

Follow this route

C:\Users\user\AppData\Local

Remove the specified folder.

npm-cache

Next, conduct a test.

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 for me to implement a "view more posts" button on

I need help figuring out how to hide the "Show More" button when there are no posts. I have created a showLoad function and an isLoad state variable, but I'm unsure of how to implement this. The button display logic is dependent on the isLoad state. ...

reactjstypescriptnext.js

Move an outside element onto an event in FullCalendar using Angular

Is it possible to drag an external element (such as a <div>) onto an event already on the calendar without creating a new event? I would like to modify the existing event by applying custom rendering or changing its appearance. Currently, I can succ ...

angulardrag-and-dropfullcalendar

How to prevent value overwriting when adding dynamic fields in Angular 7?

In my current project using Angular, I am tasked with setting up configuration using 4 specific fields: Department Name (select option) Service Name (select option) Status (text input) Level (text input). I need to be able to add multiple sets of these ...

angulartypescriptangular7

Angular MatDialog failing to display the gray overlay background

I am currently working with Angular 6 and have successfully integrated the theme into my project. The code snippet below shows how I open the dialog. constructor(private dialogo: MatDialog) { } ngOnInit() { this.dialogo.open(Carrega ...

angularangular-material

What is the best way to incorporate an AJAX GET request into an HTML element?

Currently, I am attempting to execute a JavaScript code that will convert all <a></a> elements found within another element <b></b> (the specific name in the HTML) into links that trigger an HTTP get request. However, the code I hav ...

javascripthtmltypescript

Tips on efficiently reusing shared components within recursive union types in TypeScript

Summary Here's a simple working example in the TypeScript playground: type SimpleExpression = number | string | AddOperator<SimpleExpression> | PrintOperator<SimpleExpression>; type ExtendedExpression = number | string | AddOperator<E ...

typescripttypescript-generics

The checkbox state does not update dynamically in Angular 8 when the value of the form control is changed

I recently created a simple application that consists of a single checkbox and a button. The aim is to start a timer upon clicking the button, where every second the checkbox's state should toggle between checked and unchecked. To ensure the formCont ...

angularangular7angular8

Opt for utilizing a global npm package over repeatedly installing it

Is there a way to utilize the globally installed package without needing to reinstall it every time we run npm i? Here's the scenario I have: I've set up a docker image with a specific package already installed (installation command in the Docker ...

javascriptdockernpm

Improving type checking by extracting constant string values from a union type

I am exploring different types of employees: interface Employee { employeeType: string } interface Manager extends Employee { employeeType: 'MANAGER' // .. etc } interface Developer extends Employee { employeeType: 'DEVELOPER&apos ...

typescripttypechecking

I'm having trouble executing newman on Jenkins in my AWS EC2 Linux Jenkins server as it is showing the error "[newman :command not found

Running a Jenkins shell script is causing an error: [Collection_run] $ /bin/sh -xe /tmp/jenkins7542658729538318661.sh + newman -version /tmp/jenkins7542658729538318661.sh: line 2: newman: command not found Build step ‘Execute shell’ marked build as fa ...

node.jsjenkinsnpmamazon-ec2

Extracting Object Properties from Arrays in TypeScript

Code Snippet: interface Human { name: string; age: number; } interface Pet { name: string; type: string; } If I have an array of Human, how can I get an array of Pet's type. For instance: Is there a built-in way to achieve this in typescr ...

typescript

NPM is having trouble installing packages and seems to be stuck in the process

I seem to be experiencing an issue when trying to install modules with NPM. Every time I run the command, it gets stuck at this stage: npm install express npm http GET https://registry.npmjs.org/express This behavior occurs no matter what module I try to ...

node.jsnpm

None of the NPM commands are working due to an error stating: "TypeError: Class extends value undefined is not a constructor

For years, I've had no issues using n to install node. Recently, on my Big Sur mac, I decided to update from v14.17.6 to v16 without any problems. Now when I check the version with node -v, it shows "16.13.1." However, after the update, every npm com ...

node.jsmacosnpm

What is the best way to implement multiple pipe filters in Angular?

I am looking to filter a list of objects based on certain criteria such as status, activity, position, and category. To achieve this, I have decided to create separate pipes for each criteria: StatusPipe, ActivityPipe, PositionPipe, and CategoryPipe. I a ...

angularangular8

Generating a new object using an existing one in Typescript

I received a service response containing the following object: let contentArray = { "errorMessages":[ ], "output":[ { "id":1, "excecuteDate":"2022-02-04T13:34:20" ...

javascriptangulartypescript

Changing the value of an object in Angular can be achieved by utilizing the two

I have a service with the following methods: getLastStatus(id): Observable<string> { let url_detail = this.apiurl + `/${id}`; return this.http.get<any>(url_detail, this.httpOptions).pipe( map(data => { ...

javascriptarraysangularobjectrxjs

Exploring TypeScript Compiler Options for ensuring code compliance beyond the confines of strict mode

Our goal is to set up TypeScript Compiler (TSC) with a command line option that can identify errors when developers declare class fields using implicit type expressions instead of explicit ones as illustrated below. class Appliance { //Desired coding ...

typescriptcompiler-errors

Ways to extract the body/message of a request from an HttpErrorResponse in Angular using the ErrorHandler

Imagine I make a request to the server using the post method in order to create a new user. In case the server responds with an error, my goal is to retrieve the form data that was submitted along with that request from the ErrorHandler. This information i ...

angularerror-handlingangular-errorhandler

Sorting List Algorithm

Looking to create an algorithm in Node.js that abides by specific rules. It takes a series of numbers as input and the maximum consecutive number before taking a break. The logic is as follows: The rules : Only one competition per day Competitions are hel ...

node.jstypescriptalgorithmsortingmath

Unlocking Not Exported Type Definitions in TypeScript

Take a look at this TypeScript code snippet: lib.ts interface Person { name: string; age: number; } export default class PersonFactory { getPerson(): Person { return { name: "Alice", age: 30, } } } ...

typescripttypescript-typings