After updating my Angular and my Angular project version to Angular 7, I encountered an issue when trying to run it:
The package "@angular/compiler-cli" has an incompatible peer dependency with "typescript" (requires ">=3.1.1 <3.2", but would install "3.2.2").
Incompatible peer dependencies found. Please refer to the error above.
How can I fix this? Is it possible to install a version of angular/compiler-cli that supports typescript 3.2.2?
I encountered the same issue and found the following steps helpful in resolving it:
In the package.json file, under devDependencies, add the line "typescript": "^3.1.6"
Execute either ng update @angular/cli or ng update --all
After running ng serve, you may encounter an error stating:
ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.2 was found instead.To resolve this, install the specific version of TypeScript (3.1.6) using npm:
npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f185888194829283988185b1c2dfc0dfc7">[email protected]</a> --save-dev --save-exactyarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12666b62776171607b626652213c233c24">[email protected]</a> --save-devUpon rerunning ng serve, everything should function properly and the Angular CLI will be updated accordingly.
While troubleshooting an issue, I stumbled upon a solution that involved running
ng update
This command provided me with the list of packages that needed to be updated:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cli 7.0.6 -> 7.1.3 ng update @angular/cli
@angular/core 7.0.4 -> 7.1.3 ng update @angular/core
Following the recommendations, I proceeded to run:
ng update @angular/cli @angular/core
It's also important to ensure that typescript is installed using npm install typescript to match the requested version.
After running ng update again, it confirmed that everything was up to date.
The issue is straightforward: the typescript dependency listed in your package.json specifies version 3.2.2, but this version is incompatible with the compiler-cli 7.x package from Angular that you're attempting to install. To resolve this, make sure that the versions are compatible and restrict the typescript version in your package.json to those specified in the error message.
It is highly recommended to utilize @angular/cli when performing an angular update.
ng update # shows all necessary updates
ng update --all # caution: use at your own risk ;-)
By doing this, the package versions will be aligned with the ones supported by angular, which may not necessarily be the most recent ones available.
Here's a step-by-step analysis:
You currently have @angular/complier-cli which requires typescript < 3.2.0. However, you also need to include typescript in your packages.json.
When you run ng update --all, it tries to update the typescript module to version 3.2.2. But since this conflicts with what @angular/compiler-cli expects, you receive a warning.
To resolve this issue, you need to hold the typescript version at 3.1.1 for now by specifying "typescript": "3.1.1" in your packages.json file.
I have adjusted the size of my mat dialog, but the content is still stuck at the original size. To illustrate, here are some images: https://i.stack.imgur.com/2lLV2.jpg After researching, I found that it can be resized using CSS. I attempted the followin ...
Is there a way to detect real-time changes in the fields of a FormGroup? My component structure consists of a simple parent-child setup: Parent Component View <my-child [myForm]="myForm"></my-child> Child Component Controller @Input() myFor ...
While reviewing the Angular 2 Quickstart, I came across a peculiar discovery. The angular files contained these lines at the top: import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app.component'; T ...
Topic: Angular Material 2 implementation of md-table UI using cdk-table Problem: Unable to trigger connect method after a user-initiated HTTP call receives a response Approach: Create a hot observable from a behavior subject in a service. The parent c ...
Trying to launch my application but unsure which file is causing the issue. Can someone point me in the right direction? Here is a snippet of my app.module.ts file: import { Module } from '@nestjs/common'; import { ConfigModule } from '@nes ...
I need help with pushing elements into an array and decrementing the count of it without duplicates in angular. Any assistance would be greatly appreciated ...
I'm currently working on a TypeScript (TS), React project where I have organized all my React components. To make things easier, I decided to create an NPM package out of this project and use it in various separate React projects. However, I've e ...
I'm facing an issue where I can't access the id of a document even though it's visible when printing the object this.ressobj. However, when I try to use ressobj.id_doc in the card, the id of the document is not visible. this.ResColeccion ...
After developing an Angular 7 App with a Laravel backend, I encountered an error while trying to build and deploy it for production. src/app/services/user.service.ts(10,32): error TS2339: Property 'apiUrl' does not exist on type '{ product ...
I have two Angular applications using Angular 16 and module federation - one for the MFE app and the other for the shell app. Everything works fine on localhost, but when I deployed the apps to different domains: for the MFE and for the shell app, I enco ...
As a newcomer to programming, I decided to create my own Resolver class and integrate it into my feature module. However, I encountered the following error message: core.js:4352 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(CivilSt ...
I'm currently trying to use console.log in order to determine the height of a div based on the size of a table inside it. This information is crucial for me to be able to ascertain whether or not a scrollbar will be present, especially within a dialog ...
I am attempting to retrieve the header response using a custom Axios HTTP service wrapper. axiosClass.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios"; class Http { private instance: AxiosInstance | null = n ...
I am currently working on the Angular tour of heroes tutorial. However, I am facing an issue when trying to display the list of heroes as it appears like this: https://i.sstatic.net/AGnzJ.png It is strange because even though the CSS/HTML/TS code from the ...
I am curious to know if tree-shaking occurs during Angular 8 development mode. When running the following command: ng build I understand that tree-shaking happens when I use the command below: ng build --optimization=true|false ...
Having a TypeScript project with a test suite that runs smoothly using npm test in the project directory from the console. Is there a feature within Eclipse that can facilitate running these tests directly within the IDE, similar to how Java tests are ex ...
There has been a consensus to avoid using NavController in Ionic 4 and instead utilize Angular's router. For those not utilizing lazy loading, routes are set up like this: { path: '', component: WalkthroughComponent }, { path: 'login& ...
Currently working on developing an Ionic application and troubleshooting the use of the camera native plugin. The script functions flawlessly in a fresh project, but encounters issues within the current project environment. Initially suspected a problem w ...
I have successfully set up a stripe checkout session where I am passing the products from the request's body in the line_items property. Each product in the product_data includes metadata with the product's id. try { const cart: ICart[] = ...
I'm currently working with Angular 8 and trying to implement a function that accepts parameters in Angular templates using PipeTransform. I encountered an issue where the variable becomes undefined outside of the subscribe method when calling a servic ...