Experiencing an issue with Angular 14 when trying to install apollo-angular as

For the past two days, I've been attempting to set up apollo on an Angular application. Unfortunately, I keep encountering the following error:

The package <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8b9a85868685c78b848d9f868b98">[email protected]</a> will be installed and executed.
Would you like to proceed? Yes
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="2e485c41405a4b404a6e1e001e001e">[email protected]</a>
npm ERR! Found: @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cac6dbcce9989d8799879f">[email protected]</a>
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^14.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^12.0.0 || ^13.0.0" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3e2f30333330723e31382a333e2d1f6c716f716e">[email protected]</a>
npm ERR! node_modules/apollo-angular
npm ERR!   apollo-angular@"3.0.1" 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\xxx\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\xxx\AppData\Local\npm-cache\_logs\2022-07-18T14_07_12_565Z-debug-0.log
× Packages installation failed, see above.

Even after adding --force or --legacy-peer-deps to the end of the installation command, the issue remains unresolved.

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      ...

packages.json:

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    ...
javascriptangulartypescriptnestjs

Answer №1

Error Encounter:

npm ERR! Unable to find required dependency:
npm ERR! peer @angular/core@"^12.0.0 || ^13.0.0" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8decfde2e1e1e2a0ece3eaf8e1ecffcdbea3bda3bc">[email protected]</a>
npm ERR! node_modules/apollo-angular
npm ERR!   apollo-angular@"3.0.1" from the main project folder

Seems like 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1372637c7f7f7c3e727d74667f726153203d233d22">[email protected]</a>
does not have support for angular 14. There is an ongoing issue regarding angular 14 support by apollo-angular. You can opt to use --legacy-peer-deps as a flag during installation (and handle other potential issues), or hold off until the problem is addressed and revert back to angular 13 temporarily.

Answer №2

Encountering a similar issue, I stumbled upon a helpful message here posted by Destreyf presenting a solution that resolved my problem:

Although not perfect, the workaround involved adding an "overrides" property in my package.json file which enabled successful installation of apollo-angular with Angular 14.

{
  ...
  "dependencies": ...,
  "devDependencies": ...,
  "overrides": {
    "apollo-angular": {
      "@angular/core": "$@angular/core"
    },
  }
}

Please note that npm version 8.3 or higher is necessary for this method to function appropriately. It essentially alters angular-apollo's @angular/core to match the version specified in the dependencies field.

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

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

I'm currently working on a straightforward tRPC server setup: // server.ts import { initTRPC } from "@trpc/server"; import { z } from "zod"; const t = initTRPC.create(); export const appRouter = t.router({ greeting: t.procedu ...

javascripttypescriptreact-nativeexpotrpc.io

The onmouseout event seems to be malfunctioning, whereas onmouseover is functioning properly

Forgive me if you're viewing this post twice, I believe I could have clarified things better. Essentially, I am designing a page that contains numerous elements. When the mouse hovers over an element, a "status" box should overlay on top of it. This ...

javascripthtmljqueryonmouseoveronmouseout

Slick Slider fails to load on web browsers

Hi everyone, I have a snippet of HTML code that I need help with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> </head> <body> ...

javascriptjqueryhtmlsliderslick.js

Encountering a 503 Error in Loading .js Files from Index.html in a .NET 7.0 Angular Application

I recently came into possession of an Angular project that I am trying to set up in IIS, but I am encountering some unusual behavior. Since I am relatively new to Angular, I ask for your patience as I navigate through this issue. Upon loading the website, ...

javascriptc#htmlangular

By default, the ejs-datetimepicker in @syncfusion/ej2-angular-calendars will have an empty input field

I incorporated a datetime picker from @syncfusion/ej2-angular-calendars into my project. However, I noticed that the datetime picker displays the current date and time by default in its input field. Instead, I would like the input field to be empty when ...

angulardatetimepickersyncfusion

Creating a vault in AWS S3 Glacier within a CDK app using TypeScript: A step-by-step guide

Can a CDK app be used to create an AWS S3 Glacier vault using TypeScript? The developer guide does not seem to mention TypeScript as an option: https://docs.aws.amazon.com/amazonglacier/latest/dev/creating-vaults.html We can set up Intelligent Tiering for ...

typescriptamazon-web-servicesamazon-s3aws-cdkamazon-glacier

Struggling to effectively work with ArrayForm when trying to include additional form fields

I'm attempting to add a playlist in Mat-dialog that contains songs in a list using (formArray) as shown here: https://i.stack.imgur.com/diWnm.png However, I am unsure of the mistake I might be making This is how my dialogue appears: https://i.stac ...

arraysangulardialog

Implementing validation and displaying fields with v-model in vue.js

Looking at this code snippet: <button type="button @click="editing=true">Edit</button> <form v-show="editing" @submit="onSubmit"> <textarea v-model="text"></textarea> </form> <div> Current value: {{text}} </ ...

javascriptformsvalidationvue.jsv-model

Angular form field not connected to data source

Here is a form I'm working with: <form #appForm> <div...> <select id="transversal" name="transversal" [ngModel]="app.transversal" type="select" required #transversal="ngModel"> < ...

angulartypescript

You are unable to compile a module in Visual Studio Code unless you provide the --module flag

I am facing an issue with my TypeScript code file that appears to be a common error, but I'm struggling to resolve it. This problem is new to me as I am still getting acquainted with Visual Studio Code. Cannot compile modules unless the '--modul ...

typescriptvisual-studio-code

Issue with the svg animation not properly "executing"

Hello everyone! This is my debut post, and usually I can find solutions by browsing the community. However, this time I am in need of some assistance. I have crafted an "SVG" file that includes animations depicting the different cycles of a day over a 24-h ...

javascriptsvgsvg-animate

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

javascripthtmldataviewphaser-framework

Navigate to a refreshed version of the page with varying parameters using React Navigation

Currently, I am utilizing React Navigation for navigating between different pages within my app. One of the pages is the Profile page which displays a user info card along with their posts. Within this Profile component, I have integrated the Post componen ...

javascriptreactjsreact-nativereact-navigation

Is the array empty once the functions have been executed?

app.post('/api/edit-profile', regularFunctions, async function (req, res) { let email = req.body.email let password_current = req.body.password_current connection.query('SELECT * FROM accounts WHERE id = ?', req.body.id, asy ...

javascriptnode.jsexpress

Is there a method available to incorporate a scroller into an nvd3 chart?

I am encountering an issue with my nvd3 chart. When I have a large amount of data that exceeds the width of the chart container, there is no scroll bar present and I'm struggling to figure out how to add one. I attempted to include overflow:scroll wi ...

javascriptangularjsd3.jsnvd3.js

What is the right way to import a module in TypeScript?

There is a module that I have declared like so: declare module conflicts { export interface Item {} export interface Item2 {} export interface Item3 {} } I attempted to import this module in a component using the following code: import * from ...

typescripttypescript2.0

Checkbox column within GridView allows users to select multiple items at once. To ensure only one item is selected at a

Currently, I am facing a challenge with dynamically binding a typed list to a GridView control within an asp.net page that is wrapped in an asp:UpdatePanel for Ajax functionality. One of the main requirements is that only one checkbox in the first column c ...

asp.netjavascriptasp.net-ajax

How can you disable the onClick function in React when the web browser width is smaller than the specified limit?

When using a mobile device, my onClick function serves two purposes: opening/closing the menu and changing the status of my Hamburger menu. However, both functionalities are active even when the navigation is set up for desktop screens. I want to disable t ...

javascriptreactjsstate

Numerous levels of nested closures working alongside synchronous JavaScript code

After receiving an explanatory answer to my previous inquiry, I realize that my initial question lacked sufficient context to address my current situation effectively. Let me present a specific route within my Express application: var eventbriteService = ...

javascriptnode.jsclosuressynchronous

Output object data to table by clicking on it - requires two clicks for the data to be

I have a situation where I want the user to click a button in order to print an object obtained from a web service into a table. The issue is that currently, I have to click the button twice for it to work properly. Here's some more detail: The button ...

javascriptreactjsmaterial-ui