Having trouble locating the type definition file for '@types' while working with Ionic 4 and Angular 7

Recently, I made the transition in my ionic 4 project to utilize angular 7. While everything seems to be functioning correctly in debug mode, I encountered an issue when attempting to compile for production using the command 'ionic cordova build android --prod'. The output I received was as follows:

ionic-app-scripts build --prod --target cordova --platform android [20:24:15] ionic-app-scripts 3.2.4 ... [20:24:44] typescript error Cannot find type definition file for '@types'.

[20:24:44] ionic-app-script task: "build" [20:24:44] Error: Failed to transpile TypeScript Error: Failed to transpile TypeScript at errorCheckProgram (/Users/jesusotero/Projects/Bambuco/confiar/mardeconfianza/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:119:39) at Object. (/Users/jesusotero/Projects/Bambuco/confiar/mardeconfianza/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:89:21) at step (/Users/jesusotero/Projects/Bambuco/confiar/mardeconfianza/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23) at Object.next (/Users/jesusotero/Projects/Bambuco/confiar/mardeconfianza/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53) at fulfilled (/Users/jesusotero/Projects/Bambuco/confiar/mardeconfianza/app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58) [ERROR] An error occurred while running subprocess ionic-app-scripts.

ionic-app-scripts build --prod --target cordova --platform android exited with exit code 1.

I have searched extensively for a solution to this problem but have not found one that works. If anyone has any guidance on how to resolve this issue, it would be greatly appreciated. Below is a snippet from my package.json for reference:

{
  "name": "xxxxxxx",
  "version": "1.0.2",
  ... // (Snippet continues, maintaining original content)

For further context, here is some information about my Ionic setup:

Ionic:
   ionic (Ionic CLI)  : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.6
   @ionic/app-scripts : 3.2.4

... // (Information continues, keeping original details)

System:

   NodeJS : v10.11.0 (/usr/local/Cellar/node/10.11.0/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave
   Xcode  : Xcode 10.2.1 Build version 10E1001
angulartypescriptionic-frameworkangular-aot

Answer №1

After reviewing the information you provided, it appears that your project is utilizing Ionic 3 framework (version 3.9.6).

Please note that Ionic 3 was not designed to be compatible with Angular 6 or higher versions.

To address this issue, I recommend examining the package.json of Ionic 3 reference applications and adjusting your dependencies accordingly.

Explore Reference App v3 branch

Answer №2

An update to ionic-app-script has led to the occurrence of this error.

To resolve this issue, one solution is to specify the version in your package.json file to the previous stable release:

"@ionic/app-scripts": "3.2.3"

Alternatively, you can opt to downgrade the version.

Answer №3

Here's the solution: Start your project by running ionic serve, make changes to any .ts file in the src folder, and remember to save (ctrl+s). This will trigger an automatic rebuild and serve of the app, resolving any errors along the way.

I can confirm that this method worked for me as well.

These instructions were found on the Ionic Framework forum.

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

I am facing an issue with my useFetch hook causing excessive re-renders

I'm currently working on abstracting my fetch function into a custom hook for my Expo React Native application. The goal is to enable the fetch function to handle POST requests. Initially, I attempted to utilize and modify the useHook() effect availab ...

javascriptreactjstypescriptreact-nativereact-hooks

Is it possible to use data retrieved from an API in Angular Url Matcher to determine if the matcher should be considered true or not based on the API response?

The following question was posed during a micro-learning video session focused on Custom Angular URL Matchers in the Spartacus Storefront Is it possible to extract prefix data from an API response and determine whether a matcher is true based on that dat ...

angularspartacus-storefront

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

Issue with Generating PDF Using Angular 8, JSPDF, and JSPDF-AutoTable I am facing a challenge with exporting/generating a PDF based on an HTML grid. I need to make some DOM changes with CSS, remove toggle buttons, alter the header, etc. However, all the s ...

angulartypescriptjspdfjspdf-autotable

Struggling to update minimist in Angular 9?

Lately, I've been working on a project using Angular 9 and came across a warning about a security vulnerability related to the minimist package. Despite my efforts to fix it with "(sudo) npm audit fix" or updating with "(sudo) npm update", the issues ...

angularnpmangular9minimist

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

Currently, I am eager to learn Angular and have already installed Node version 18.13.0. However, when attempting to install Angular CLI using the command npm install -g @angular/cli, I encountered an issue: npm ERR! code ENOTFOUND' 'npm ERR! sys ...

javascriptnode.jsangularfrontendcrud

Tips for rendering nested objects and arrays within Angular 2

I am receiving JSON data from an API on the back-end and I want to display it using ngFor. However, when I tried to do so, I encountered an error message stating: "Cannot find a differ supporting object '[object Object]'" in the console. To addr ...

angularjsjsonangularngfor

Using a single TypeORM connection across various modules in NestJS

In the process of developing a link shortener, I have set up a CRUD REST API for authentication and creating shortened links. Now, I am looking to manage redirects for these shortened URLs without using the same path as my API endpoints (e.g. /api/v1/). Af ...

node.jstypescriptnestjstypeorm

When an Angular application is built in Electron and a div is printed, a blank window is

After developing an Angular application, I decided to build it in Electron. Surprisingly, everything was working perfectly fine until I encountered an issue with printing a specific div. Whenever I click the print button, a blank window opens up in Elect ...

angularelectron

Expanding the Mui Typescript breakpoints within a TypeScript environment

Encountering a typescript error when attempting to utilize custom names for breakpoint values: Type '{ mobile: number; tablet: number; desktop: number;}' is not compatible with type '{ xs: number; sm: number; md: number; lg: number; xl: numb ...

typescriptmaterial-ui

Angular template variables in VS Code now have the ability to automatically update their names when renamed

Here is a snippet from the controller: /* Local copies of Enumerators to use on template */ MeasurementOriginEnum: typeof MeasurementOriginEnum = MeasurementOriginEnum; And here is how it is used in the template: <button *ngIf="element.getMeasure ...

angularvisual-studio-code

When the query result is received in Angular TypeScript, translate epoch time into a time string

Here is the dilemma I am currently facing: I have an Angular script that requests data from a backend service and receives query results to display to the user. One of the fields in the query response is a time stamp, which is currently in epoch time forma ...

angulartypescripttimeepoch

Adding a dynamic CSS stylesheet at runtime with the power of Angular and Ionic 2

Currently, I am working on creating a bilingual application using Ionic2. The two languages supported are English and Arabic. As part of this project, I have created separate CSS files for each language - english.css and arabic.css. In order to switch be ...

androidangularjscordovatypescriptionic-framework

Exploring the process of updating the background color of a specific component in Angular

I'm currently working on a website that will feature alternating colors of white and black. However, I am facing an issue where I can only apply background color changes globally in the CSS file. Does anyone know how to address this problem? ...

htmlcssangular

Utilizing custom types in React with TypeScript and Prop-Types

Currently, I am working with a string type literal that looks like this: type MyType = 'str1' | 'str2' | 'str3'. I need one of my props to only accept this specific type, but I'm struggling to specify this in PropTypes. ...

reactjstypescriptreact-proptypes

Crafting interactive buttons with angular material

I've been working on an angular application where I created 5 mat flat buttons using angular material. <button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B-L1</b ...

angulartypescriptbuttonangular-materialnested-loops

Navigating through JSON object using Angular 2's ngFor iterator

I want to test the front end with some dummy JSON before I write a service to get real JSON data. What is the correct way to iterate through JSON using ngFor? In my component.ts file (ngOnInit()), I tried the following code with a simple interface: var js ...

jsonangulartypescript

My HTML grid table is not being properly rendered by the JSON data

I'm currently facing a challenge with rendering my HTML grid table in Angular using JSON data retrieved from a MySQL database. I would greatly appreciate any assistance or guidance on how to solve this issue. View the output of the Angular code here ...

htmljsonangularobservablerendering

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

javascripttypescript

Using Vue js and Typescript to automatically scroll to the bottom of a div whenever there are changes in

My goal is to automatically scroll to the bottom of a div whenever a new comment is added. Here's what I have been trying: gotoBottom() { let content = this.$refs.commentsWrapper; content.scrollTop = content.scrollHeight } The div containing ...

typescriptvue.jsscroll

In the latest release of Angular2, some routers are lacking a provider

After the recent upgrade from beta to RC1, I've encountered some routing issues. While some routes are functioning properly, others throw the following exception: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider ...

angularangular2-routing