Ionic is throwing a reference error stating that __importDefault is not defined

My project is encountering the following error when I try to run it:

Uncaught ReferenceError: __importDefault is not defined
at Module../src/app/app.component.ts (app.component.ts:9)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app.module.ts (app.component.ts:12)
at __webpack_require__ (bootstrap:84)
at Module../src/main.ts (environment.ts:16)
at __webpack_require__ (bootstrap:84)
at Object.0 (main.ts:12)
at __webpack_require__ (bootstrap:84)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)

Could someone please help me understand where I've gone wrong?

Here is some information about my Ionic setup:

    Ionic:

   Ionic CLI                     : 6.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f7fbe6f0fbe2f5b9f8fdf6d4adbaa4baa5">[email protected]</a>)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (1 plugins total)

Utility:

   cordova-res (update available: 0.9.0) : 0.6.0
   native-run (update available: 0.3.0)  : 0.2.8

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.14.2
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504
angulartypescriptionic-frameworkcommand-line-interfacecapacitor

Answer №1

Could be related to the TS version you are using. Consider reverting back to a previous version like 3.5.3:

npm install typescript@~3.5.3

Make sure your package.json looks similar to this:

"devDependencies": {
    // ...
    "typescript": "3.5.3"
  }

Answer №2

Encountered a problem when updating Angular, but found a solution by ensuring that @angular-devkit is updated to match the version of @angular/core.

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

Ionic: Oops! Looks like we couldn't find any routes that match. URL Segment:

Currently, I'm working on developing a basic Ionic application, but I keep encountering the following error: core.js:14597 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'match-details/match-details-info' E ...

angularionic-frameworkangular-routing

Uploading images using Angular and PHP: A comprehensive guide

I am a beginner in Angular and I am having trouble uploading an image from Angular as I encounter 4 errors: 1) Error in the post method: Cannot find name 'formData'. Did you mean 'FormData'?ts(2552) 2) Error in the subscribe method: ...

angulartypescript

Acquire the property that broadens the interface

I'm currently working on a TypeScript function that aims to retrieve a property from an object with the condition that the returned property must extend a certain HasID interface. I envision being able to utilize it in this manner: let obj = { foo ...

typescript

Unable to locate the _app.js file within my Next.js project

After using "npx create-next-app" to set up my NextJs project, I came across a situation where I needed to define TransactionContext in _app.js. However, I encountered the issue that this file is not included in my project. Any assistance would be greatly ...

javascriptreactjstypescriptnext.js

When fetching data from the API in Angular, the response is displayed as an object

After fetching data from the API, I am encountering an issue where the "jobTitle" value is not displaying in the table, but instead appears as an array in the console. Can someone assist me with resolving this problem? Below is the visibility.ts file: exp ...

javascriptangulartypescript

Watching the Event Emitters emitted in Child Components?

How should we approach utilizing or observing parent @Output() event emitters in child components? For instance, in this demo, the child component utilizes the @Output onGreetingChange as shown below: <app-greeting [greeting]="onGreetingChange | a ...

javascriptangulartypescriptrxjsobservable

Data not being retrieved by HTTP GET request

I encountered an issue with my API where I made three Get requests using the same function but different URLs to differentiate between them. However, even though the provider returns the data in steps, the page response function does not receive it and sho ...

angulartypescriptionic-frameworkionic3

Challenges with migrating Kendo Data Grid to Angular 14

While using the Kendo grid for Angular, I encountered the following error after upgrading to Angular 14 and updating the packages in the package.json file. Could this issue be related to the package versions? TypeError: Cannot read properties of undefine ...

angularrxjskendo-uikendo-gridkendo-datetimepicker

The following error was encountered while building Angular 2 with Webpack at src/app/userManagement/unlockUserID/unlockUserID.component.ts, on line 7

Ever since I set up my routing, I've been encountering a persistent error message: ERROR in [at-loader] src/app/userManagement/unlockUserID/unlockUserID.component.ts:7:5 I'm utilizing angular-cli and below is an excerpt from my package.json: d ...

angular

Guide on sending information from a parent component to a child component in Angular using an event system

Is it possible to pass data from a parent component to a child component in Angular using a tab group? <mat-tab-group> <mat-tab label="Some text0"> <app-comp></app-comp1> </mat-tab> <mat-tab label="Some ...

angularinputcomponents

Navigating the challenges of time zones when calculating lag times

I am currently attempting to calculate the lag in milliseconds between my client (located in France) and my server (based in Germany). On the Client side (Using Angular Typescript) : this.http.getDate().subscribe(response => { if (respo ...

javaangulartypescript

Typescript hack: Transforming read-only arrays into tuple types with string literals

My configuration object looks like this: const config = { envs: ['dev', 'test', 'prod'], targets: ['> 2%'] }; Currently, the TypeScript compiler interprets the type of this object as: type IConfig = { envs: str ...

typescript

Steps for displaying template placeholders on a webpage

I am currently working on an Angular 9 application where users can save "placeholders" in text that is stored in the database. My goal is to display these placeholders but replace them with real data when the page is rendered. For instance, the data is s ...

angular

Pattern matching to eliminate line breaks and tabs

Hey there, I'm working with a string: "BALCONI \n\n\t\t\t\t10-pack MixMax chocolade cakejes" and trying to tidy it up by removing unnecessary tabs and new lines. I attempted using .replace(/(\n\t)/g, '&apo ...

regextypescript

Iterating over a JSON array using *ngFor

Here is the JSON structure that I have: { "first_name": "Peter", "surname": "Parker", "adresses": { "adress": [{ "info1": "intern", "info2": "bla1" }, { "info1": "extern", "info2": "bla2" }, { "info1": " ...

jsonangulartypescriptngfor

Tips on utilizing the context variable of an EmbeddedViewRef

I'm a bit confused on how to properly utilize the EmbeddedViewRef's context variable in Angular 2. According to the Angular 2 changelog, the context variable replaces the setLocal and getLocal methods for setting local variables in an embedded vi ...

angularangular2-directives

Angular2 allows for the firing of all columns in one click using *ngFor

<tr *ngFor = 'let student of students> <td contenteditable="true" class ='phone' #button> {{student.phone}} <i (click)='showbox()' class = ' glyphicon glyphicon-edit'></i> <input *ngIf=&apo ...

angulartypescript

Exploring the power of Vue 3 and Vuex with Typescript to access class methods

Can Vuex state be used to access class methods? For example, in this scenario, I am attempting to invoke fullName() to show the user's formatted name. TypeError: store.state.user.fullName is not a function Classes export class User { constructo ...

javascripttypescriptvue.jsvuexvuejs3

I need to show the value of A$ in a React form input, but ensure that only the numerical value is

I'm currently facing an issue where I want to show the currency symbol A$ in an input field. <form [formGroup]="incomeForm" *ngFor="let field of incomeFields"> <mat-form-field fxFlex> <input matInput [value]="incomeForm ...

angularangular-reactive-forms

Leverage environment variables within your index.html file

Currently, I am using Angular and I am encountering an issue while attempting to utilize an environment variable in my index.html for Google Analytics. I have attempted the following approach: <script> import {environment} from "./environments/e ...

javascriptangulartypescript