An issue occurred while trying to run Ionic serve: [ng] Oops! The Angular Compiler is in need of TypeScript version greater than or equal to 4.4.2 and less than 4.5.0, but it seems that version 4

Issue with running the ionic serve command

[ng] Error: The Angular Compiler requires TypeScript >=4.4.2 and <4.5.0 but 4.5.2 was found instead.

Attempted to downgrade typescript using:

npm install typescript@">=4.4.2 <4.5.0" --save-dev --save-exact

After running npm i, the ionic serve command hangs at generating browser application bundle.

Angular version details:

enter image description here

Angular CLI: 13.0.4
Node: 16.10.0
Package Manager: npm 8.1.4
OS: win32 x64

Angular: 13.0.3
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.4
@angular-devkit/build-angular   13.0.4
@angular-devkit/core            13.0.4
@angular-devkit/schematics      13.0.4
@angular/cli                    13.0.4
@schematics/angular             13.0.4
rxjs                            6.5.5
typescript                      4.5.2

Need assistance with this issue, please!

Answer №1

I encountered a similar issue, but I found a different solution that worked for me. While this answer was helpful, it was geared towards Angular version 12. In my case, for version 13 of Angular, I implemented the following in my project:

npm install -D <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ce8e5ecf9efffeef5ece8dca8b2a8">[email protected]</a>

Answer №2

Here's a suggestion for you:

  • substitute typescript 4.5.2 with typescript 4.4.4
  • update packages.json file
  • execute npm i once more

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

Using parameters in routes in Angular 4

all I have created a new auxiliary website. Users will be directed to this site from the main site using a reference link like: I have set up the AppRoutingModule as follows: import { NgModule } from '@angular/core'; import { RouterMod ...

PNPM does not automatically update to the latest minor or patch versions when using the caret (^) symbol during installation

When using PNPM, it appears to only install the version specified in package.json and does not automatically install the latest minor version available. For example, in my package.json file I have this dependency: "@tanstack/react-query": " ...

Transferring all instructions to a subordinate element within the component

I have developed a set of custom directives specifically for <input> elements. Additionally, I have created a custom component called <app-decorated-input>. Within my application, there are numerous instances of both <app-decorated-input> ...

Tips for creating a personalized asynchronous Express handler that seamlessly receives specific typed parameters

In my quest to create a unique Express endpoint wrapper, I aim to wrap async functions and handle errors effectively. The current implementation is basic but functional: import type {Request, RequestHandler, Response} from 'express'; type Handle ...

Issue with exceljs in Node.js causing file formulas to break when writing to a file

My excel (xlsx) file has various columns with formulas, such as: =J8+F9-H9 Specifically, I have three columns set up like this: F: number H: number J: =sum of previous row's F and H cell values. I want to import external data and store it in this ...

Encountering the familiar Type Error every time I try to use npm

Whenever I attempt to run npm commands like npm init, I consistently encounter the same error message. /usr/local/lib/node_modules/npm/lib/utils/unsupported.js:3 var supported = require('../../package.json').engines.node ...

Learn how to bring a component into another component within Angular

I have developed a component named CopySchedulefromSiteComponent and now I am looking to import it into another component called SiteScheduleComponent. However, I am unsure of the correct way to do this. The CopySchedulefromSiteComponent contains one fiel ...

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

How to handle an already initialised array in Angular?

I came across an interesting demo on exporting data to Excel using Angular 12. The demo can be found at the following link: This particular example utilizes an array within the component TypeScript file. import { Component } from '@angular/core' ...

Translate JSON to TypeScript class. If the property is an object and not present in the JSON, the class should contain an empty object

I am having trouble finding an appropriate title for the issue I am currently facing. Therefore, I will provide a detailed explanation of the problem. I have a class named Model.ts export class Model{ a:ObjA; b:ObjB; c:ObjC; d:string; ...

Google Maps API Version 3 now allows for custom overlays to be hidden when they overlap

I have implemented multiple custom overlays on a map for various cities and I am trying to manage the overlapping ones by hiding or collapsing them. My goal is to display and expand overlays with the highest population whenever there is available space. M ...

What could be the reason for the absence of the back button?

Having trouble understanding why the back button isn't showing up when I navigate to an <ion-view> app root state template: <ion-side-menus> <ion-side-menu side="left"> <div class="list"> <!-- ... --> & ...

NestJS endpoint throwing a 500 error after submitting a post request

Struggling with sending post requests in NestJS as they are returning an error message: ERROR: An error occurred in POST /api/fraud-rules in 8ms... { "isError": true, "status": 500, "name": "InternalError", & ...

Which release of "ngx-bootstrap" is compatible with "Angular 17"?

Here's the scoop I attempted to download ngx-bootstarp but couldn't find a suitable version. I searched online, but there was no information available. Checking the list on the Angular Bootstrap official website, I noticed that version 17.0.0 ha ...

To elevate your Vue.js development in 2021, enhance your project by installing sass-loader and node-s

Having trouble setting up SASS for Vue.js. Here's the setup: Node.js - Version 15.7.0 Vue.js - @vue/cli Version 4.5.11 Encountering this error in the console when running the command: npm install -D sass-loader node-sass npm ERR! code ERESOLVE npm ERR ...

Angular2 is experiencing issues with child routing not functioning properly unless useAsDefault is set to true

I am encountering an issue with my Angular 2 routing program. When I remove useAsDefault: true, the routing stops working and I receive the following error message: EXCEPTION: Link "["Pen"]" does not resolve to a terminal instruction. in [['Pen&a ...

Angular 12: TypeScript Issue TS2339 - Unable to Locate Property on Type

Whenever I use the code below, I encounter error TS2339: Property 'timestamp' does not exist on type 'LogRepair[]' In the component's HTML file, I am attempting to loop through an array of properties defined in the LogRepair typ ...

Angular application encountering a 401 unauthorized error when attempting to connect to TFS API

Having trouble with an API get request in my initial Angular project. I'm attempting to retrieve all projects from a server using the correct URL (which works in Postman and my browser), as well as a token generated from my TFS account. Despite this, ...

Error encountered in Angular 6 Application running on .Net Core within a Docker Container due to Npm issue

After developing an Angular 6 .Net Core 2.1 application that should be operational in a Linux Docker container, I encountered an issue when attempting to run it using docker compose. Strangely, the application works perfectly fine when launched with npm st ...

Preserve line breaks within HTML text

Utilizing the powerful combination of Angular 5 and Firebase, I have successfully implemented a feature to store and retrieve movie review information. However, an interesting issue arises when it comes to line breaks in the reviews. While creating and edi ...