Issues arise as a result of conflicts between the dependencies of @ionic/angular, Angular 13, typescript,

Current Environment Details:

ionic info

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.8.5
   @angular-devkit/build-angular : 13.0.2
   @angular-devkit/schematics    : 13.0.2
   @angular/cli                  : 13.0.2
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.1
   @capacitor/android : 3.3.1
   @capacitor/core    : 3.3.1
   @capacitor/ios     : 3.3.1

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System Information:

   NodeJS : v17.0.1 (/usr/local/Cellar/node/17.0.1/bin/node)
   npm    : 8.1.3
   OS     : macOS Monterey

Note: Angular 13 requires Typescript version equal to or greater than 4.4.2.

@ionic/angular current version is 5.8.5, utilizing @ionic/core version 5.8.5

@ionic/core has a dependency on ionicons version 5.5.3 which does NOT align with the required Typescript >= 4.4.x

To resolve this issue, ionicons has released versions 6 that are compatible with Typescript >= 4.4.x

The challenge lies in @ionic/core requiring the outdated ionicons version (5.5.3). How can we update this configuration so that @ionic/core within @ionic/angular utilizes the latest ionicons dependency (6.0.0) ?

angulartypescriptionic-frameworknpmionicons

Answer №1

If you're looking to enforce package resolutions, you could give npm-force-resolutions a try. Check it out here

Simply include the following in your package.json file:

"scripts": {
   "preinstall": "npm-force-resolutions",
    ...
},
"resolutions": {
   "ionicons": "6.0.0"
}

Answer №2

The most recent ionic update now supports Angular 12.x.x versions. I suggest trying to revert back to Angular 12.x.x in order to resolve any issues (this advice comes from my project dependency).

Here is the output of running 'npm outdated': https://i.sstatic.net/Jrm81.png And here is the output of 'ionic info': https://i.sstatic.net/MCdJj.png

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 it possible for two-way binding to function in index.html within Angular 4?

Does two-way binding function in index.html? I have some links and metadata in index.html. How can we define head parameters in a component? <head> <meta name="og:title" content={{titleValue}}> <meta name="og:url" content={{urlValue}}> & ...

javascriptangularmeta-tags

When the pathway is void, it becomes impossible to redirect to the designated component

I recently developed a code that is supposed to redirect to a specific component when the application starts. const routes: Routes = [ {path: 'home', component: HomeComponent}, {path: 'content', loadChildren: 'app/componen ...

angular

Steps for creating a TypeScript project with React Native

Hey there, I'm just starting out with react-native and I want to work on a project using VS Code. I'm familiar with initializing a project using the command "react-native init ProjectName", but it seems to generate files with a .js extension inst ...

typescriptreact-nativetsx

The continuity of service value across parent and child components is not guaranteed

My goal is to update a value in a service from one component and retrieve it in another. The structure of my components is as follows: parent => child => grandchild When I modify the service value in the first child component, the parent receives t ...

angulartypescriptangular-services

What is the best way to track if a checkbox has been selected or not?

Working on a sports list for a mobile app using Ionic. There is a view where the user can select which sports they want to see on the list. <input type="checkbox" ng-model="sport.checked" ng-init="sport.checked=true"> After selecting ...

angularjsionic-framework

Enhancing keyboard accessibility with the spacebar for radio buttons and check boxes in Angular 2

I am currently working on a form in Angular 2 that includes radio buttons and checkboxes. When tabbing through the fields, they are highlighted properly. However, I am facing an issue with the radio buttons - I want them to be selected when I hit the space ...

angularaccessibilityangular-material2

What is the best way to define the type of an object when the Key is already known?

If I have the code snippet below, how can I properly define the data object type based on the known value of data.type? In this scenario, I aim to assign a specific type to data when its type property is either "sms" or "email" const payload = '{&quo ...

typescript

Angular: The property '**' is not found on the type 'Object'

Not too long ago, I embarked on a new Angular project where my setup involves Angular (the front-end) communicating with a node.js server (the back-end), which in turn might make requests to an api server or a mongo database when necessary. The tricky par ...

javascriptnode.jsjsonangular

Encountering an 'undefined' error while trying to execute nuxt.js in a Bitbucket pipeline

Looking to create static pages using nuxt.js with bitbucket-pipelines. Encountering a peculiar error during the nuxt generate step. The error message reads Nuxt Fatal Error: undefined Included below are my nuxt.config.js, bitbucket-pipeline.yml, package. ...

npmcontinuous-integrationbitbucketnuxt.jsbitbucket-pipelines

Using an AWS API Gateway, an HTTP client sends a request to access resources

I have a frontend application built with Angular and TypeScript where I need to make an HTTP request to an AWS API Gateway. The challenge is converting the existing JavaScript code into TypeScript and successfully sending the HTTP request. The AWS API gat ...

javascriptangulartypescriptamazon-web-serviceshttp

Having trouble centering an icon in a cell within AG Grid?

I am struggling with aligning my checkmarks within the cells of my AG Grid. Currently, they are all left aligned but I need them to be centered. Adjusting the alignment for text is not an issue, but I can't seem to center the material icons. It appear ...

cssangularag-grid

What are some ways to enhance the design of Material Input Text boxes and make them more compact?

I have been developing an Angular application using Material UI v7, but I am finding that the input controls are not as compact as I would like them to be. I have attempted to customize them without success. Can someone provide guidance on how to achieve m ...

angularmaterial-ui

Issue encountered during npm installation command

Recently diving into nodejs and experimenting with the Visual Studio Code editor. Encountering difficulties in installing packages, with an error message indicating a possible issue related to the proxy. Despite attempting various solutions found online ( ...

node.jsnpm

Angular CLI - Unable to open new project in browser

When I tried to launch a brand new project using Angular CLI by issuing the command NPM start, the application failed to open in the browser. Here is the error logged: 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files&b ...

angularnpm

Issue: Unable to locate module '/node_modulesprogressbar/package.json'

Currently, I am facing an issue with the generation of a progress bar using Browserify and progressbar.js. When I try to var ProgressBar = require('node_modules/progressbar');, an error pops up saying Error: Cannot find module '/node_modules ...

javascriptnode.jsnpmprogress-barbrowserify

TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example. To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in th ...

javascriptangulartypescripttensorflowtensorflow.js

Error: TypeError encountered during UI Runtime JSON conversion of Circular Data Structure

I'm facing an issue while attempting to parse and stringify certain JSON data. The error occurs on this specific line of code: this.copyOfColumns = JSON.parse(JSON.stringify(Object.assign([], this.columns))); Below is the complete @Input (using Ang ...

jsonangulartypescript

Tips for modifying the data type of a property when it is retrieved from a function

Currently, I have a function called useGetAuthorizationWrapper() that returns data in the format of { data: unknown }. However, I actually need this data to be returned as an array. Due to the unknown type of the data, when I try to use data.length, I enc ...

reactjstypescript

Share your ES6 node module without including the transpiled ES5 version, as it is specifically designed for the most up-to-date browsers

Our team plans to release a node module written in ES6, specifically designed for the latest browsers. The ES6 features we utilize, such as async/await and import/export, are fully compatible with our target browser versions. Therefore, we see no need to p ...

npmecmascript-6gulpbabeljsbrowserify

React Router is used to render routes that do not match the specified path

I am utilizing TypeScript in React Router. I have defined two routes: / and /pages/id. class MyComponent extends React.Component { render() { return <BrowserRouter> <div> <Route exact path='/' ch ...

reactjstypescriptreact-routerreact-router-domreact-router-v4