Having trouble getting my Angular project up and running - facing issues with dependency tree resolution (ERESOLVE)

Currently, I am in the process of following an Angular tutorial and I wanted to run a project created by the instructor. To achieve this, I referred to the steps outlined in the 'how-to-use' file:

How to use

Begin by running "npm install" within the project folder to install all necessary dependencies.

Ensure that you are using the latest version of CLI (refer to the upgrade guide below).

To view the application in action, execute "ng serve" (try "npm start" if "ng serve" encounters any issues).

You are welcome to compare it with your own project code to identify any potential errors.

Upgrade Guide for CLI

Execute the commands provided below - utilize "sudo" only on Mac/Linux systems.

sudo npm uninstall -g angular-cli @angular/cli
npm cache clean --force
sudo npm install -g @angular/cli

The process of upgrading the CLI went smoothly; however, when attempting to execute the "npm install" command, I encountered the following errors:

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="f4998dd9929d868780d9958484b4c4dac4dac4">[email protected]</a>
(... error log continues ...)

Furthermore, here is my package.json:

{
  "name": "my-first-app",
  "version": "0.0.0",
  (... package details included ...)
}

and my Angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  (... Angular configuration details included ...)
}

Answer №1

I encountered a similar problem while trying to follow the "Tutorial: Your First App"

https://angular.io/tutorial/first-app/

To fix it, I executed the npm command with the '--force' flag ... just like the error message recommended.

npm install --force

Answer №2

The issue you're encountering is related to your dependencies. One of the packages you're using requires a jasmine-core version that is equal to or higher than 3.8, but your package.json file is currently installing version 3.6. To resolve this problem, all you need to do is update the version in your package.json as shown below. Once you make this change, simply run npm install followed by npm start.

{
  "name": "my-first-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.5",
    "@angular/common": "^11.0.5",
    "@angular/compiler": "^11.0.5",
    "@angular/core": "^11.0.5",
    "@angular/forms": "^11.0.5",
    "@angular/platform-browser": "^11.0.5",
    "@angular/platform-browser-dynamic": "^11.0.5",
    "@angular/router": "^11.0.5",
    "bootstrap": "3.3.7",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.0.0",
    "tslib": "^2.0.3",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.4",
    "@angular/cli": "^11.0.4",
    "@angular/compiler-cli": "^11.0.5",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.9",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.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

Creating a Cordova application from the ground up, evaluating the options of using ngCordova, Ionic framework, and

With the goal of creating a multiplatform Cordova app for Android, iOS, and Windows, I have been exploring different approaches. My plan is to build an application with 4 or 5 features focused on service consumption (listing, adding, and editing items) wh ...

Unlocking The Mystery of Disappearing Inputs on Ionic 5

How can I prevent Ionic 6 (Angular) from hiding inputs when the keyboard shows? Whenever I focus on an input, the keyboard covers it. Is there a way to automatically scroll so the keyboard is positioned below the selected input? View Image of Input/Keyboa ...

Validator for ngModel in Angular 2 conveniently located within the component

Trying to simplify the process of implementing a custom validator logic for ngModel, I have a pre-defined model (interface) that already stores all necessary data. Why go through the trouble of creating an identical schema with FormControls when the requir ...

The element 'nz-list-item-meta-title' in NG-ZORRO is unrecognized

After installing NG-ZORRO for my project, I decided to start by incorporating their list component. However, I encountered errors with elements such as: 'nz-list-item-meta-title' and 'nz-list-item-action' not being recognized. I have e ...

Different component instance captures the EventEmitter from a component inside ng-template

After developing a component with an event, let's refer to it as (onAction). This component is utilized in two different places within the same parent component or page, both of which are individual components themselves. The only variation between th ...

react-csv allows for downloading a file with no specified file type attached

Currently, I am utilizing the react-csv library in my project on a Windows machine. Everything is functioning correctly except for one issue - when the data is downloaded to a file, it does not include an extension. The data is present when opening the fil ...

Angular 6 throws an error stating: "The property 'push' cannot be read of null."

The Cart model is defined as follows: //declaring a cart model for products to add export class Cart{ id:string; name:string; quantity:number; picture:string; } Below is the code for my app.service.ts: import { Injectable, Inject } fro ...

Exploring the power of developing AngularJS applications using Typescript and the app

I am currently working on a basic application that utilizes Typescript and AngularJS. In my app, I have used app.js to register my controller and some route parameters: /// <reference path="../scripts/typings/angularjs/angular.d.ts" /> /// <refer ...

Is Vanilla JS or React the Superior Choice for Building NPM Packages?

As a newbie with a few ideas for npm packages, I could use some guidance. I've noticed that tutorials on YouTube often focus on writing packages in vanilla JavaScript, while some GitHub repositories show packages created with React. My objective is t ...

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

I encountered an issue when attempting to return the Index page. The data is successfully sent from the client to the server, but upon trying to display the Index page, an error occurs. Could someone review my code and identify where the mistake lies? acc ...

Tips for making a oneOf field nullable using TypeScript and AJV

A field named platform exists in my code, and it can hold either a string or an array of strings (string[]). The field can also be nullable or undefined if not passed as input. TypeScript Interface export interface IEntityLeaderboardQuery { rank: stri ...

Writing Data to Google Cloud Firestore Map using NextJS and Typescript with nested objects

I could use some assistance. I'm developing an application using NextJS (React), TypeScript, and Google Cloud Firestore. Everything seems to be working fine so far. However, I'm facing an issue with storing the address and phone number in a neste ...

Adding elements to an array using Angular observables

I have been using this code snippet to store task names in my array barChartLabels. public lineChartLabels: Label[] = []; this.tasks.pipe(map(x => x.map(x => x.id))).toPromise().then(id => this.lineChartLabels.push(id)) The code is functionally ...

Issue encountered when trying to bring in a component from a different module

I am attempting to import the 'OpenDialogContentComponent' component from Module A into Module B, however I am encountering this error: 'Cannot determine the module for class OpenDialogContentComponent in C:/Users/jitdagar/Desktop/TDP/pwt-u ...

A custom Typescript type for immutable values within an object

I am struggling with finding the right data type for my function, where I need to work with static types. I have experimented with Type, interface, class, Record, and others, but none seem to fit perfectly. GEOLOCATIONS is a constant record that maps cou ...

Having trouble installing dependencies for node 8 on Ubuntu 16.4

Having trouble installing my project, which runs smoothly on node 6, due to a dependency issue with node 8. The problematic dependency is not only deprecated but also trying to write in restricted areas without proper permissions. ubuntu@ip-xxxxxxx:~/shar ...

Mastering the Art of Utilizing Generic Typing to Access Objects

I am trying to find a way to access an object by class using generic typing. The issue I am encountering is that I am getting an error when trying to check if the locators contain an input field. type '{ form1: { item2: { checkbox: string; input: st ...

Navigational menu routing with AngularJS2 using router link paths

Currently, I am working on developing a navigation menu using angularJS2. Here is the snippet from my app.component.ts: import {provide, Component} from 'angular2/core'; import {APP_BASE_HREF, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HashLocati ...

Isolating a service from a component based on conditions in Angular 5

Within my root module, I have a service that is shared among all components. One of these components is named ComponentX module providers: [ BiesbroeckHttpService ], component constructor(private biesbroeckHttpService: BiesbroeckHttpService){} Som ...

Switch up the Angular base URL using ngx-translate

I successfully integrated ngx-translate into my Angular project. Now, I want to dynamically change the base href based on the language selected from the header menu. Currently, the URL appears as: "localhost:4200". However, upon launching the project, it ...