Issues arise when upgrading from Angular 8 to 9, which can be attributed to IVY

After successfully upgrading my Angular 8 application to Angular 9, I encountered an error upon running the application.


    {
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["node"],
        "moduleResolution": "node"
      },
      "files": [
        "src/main.ts",
        "src/polyfills.ts"
      ],
      "angularCompilerOptions": {
        "enableIvy": true
      },
      "exclude": ["src/**/*.spec.ts", "src/test/**/*", "e2e/**/*"]
    }

The configuration in my tsconfig.json file looks like this:


    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "types": ["jest"],
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2018", "dom"]
      }
    }

Output of the command ng --version:


    Angular CLI: 9.1.12
    Node: 12.3.1
    OS: darwin x64
    
    Angular: 9.1.12
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    Ivy Workspace: Yes
    
    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.901.12
    @angular-devkit/build-angular      0.901.12
    @angular-devkit/build-optimizer    0.901.12
    @angular-devkit/build-webpack      0.901.12
    @angular-devkit/core               9.1.12
    @angular-devkit/schematics         9.1.12
    @angular/cdk                       9.2.4
    @angular/material                  9.2.4
    @angular/material-moment-adapter   9.2.4
    @ngtools/webpack                   9.1.12
    @schematics/angular                9.1.12
    @schematics/update                 0.901.12
    rxjs                               6.6.3
    typescript                         3.8.3
    webpack                            4.42.0

I am uncertain if there are any specific configurations missing for Angular 9.

Answer №1

Seems like the problem lies within the angular-file node module.

A possible solution may involve upgrading to version 2.0 as suggested by the repository owner's comment. They have mentioned that version 2 supports Ivy.

Visit this link for more information.

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

Searching for MongoDB / Mongoose - Using FindOneById with specific conditions to match the value of an array inside an object nestled within another array

Although the title of this question may be lengthy, I trust you grasp my meaning with an example. This represents my MongoDB structure: { "_id":{ "$oid":"62408e6bec1c0f7a413c093a" }, "visitors":[ { "firstSource":"12 ...

The call to 'setRequestHeader' on 'XMLHttpRequest' was unsuccessful due to the object's state not being OPENED

While developing an angular application with a restful API get(), I encountered a few errors such as unauthorization error:401 which I managed to resolve. However, now I am facing another error that seems quite straightforward. I even tried adding the CORS ...

What is the best way to showcase a firebase "row" containing two columns within an Ionic 2 application?

Currently in the process of developing an app to keep track of assignments using Ionic 2/Typescript and Firebase as the backend database. The main page displays a list of assignments retrieved from the database. Creating a new assignment requires the user ...

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Currently, I am facing an issue in my code where I am trying to introduce a delay using timer(500). However, the problem is that it is only returning partial data. Instead of the expected 17 fields, it is only returning 2 fields. Below is my code snippet f ...

What is the best way to extract the ng-reflect-value and compare it with the expected value in testing?

After reviewing the attachment, I am utilizing the following code snippet "private readonly By _idTxt = By.XPath(".//*[@class='metric-set-details-dropdown']/../button[ng-reflect-value]");" in an attempt to extract the value of the attribute ng-re ...

Updating a property value within a JSON object: Adjusting attributes in a JSON data format

How can I modify a specific key's value in a JSON array like the following example: input = [{"201708":10,"201709": 12, "metric":"attritionManaged"},{"201708":10,"201709": 12, "metric":"attritionUnManaged"},{"201708":10,"201709": 12, "metric":"EHC"}] ...

Guide on showing a component exclusively for iPads with React and TypeScript

I need help displaying an icon only in the component for iPad devices, and not on other devices. As a beginner in coding for iPads and mobile devices, I am unsure how to achieve this specific requirement for the iPad device. Below is the code snippet tha ...

When attempting to navigate to a sub-route, I am encountering the error message: "Unable to find a matching route" in Angular 6

The initial code is functional, but not the best practice. const FooProcessingRoutes: Routes = [{ path: '', pathMatch: 'full', redirectTo: '/foo-processing/list', }, { path: 'list', component: FooListCompo ...

Problem with RxJS array observable functionality not meeting expectations

I am struggling with an Angular service that contains an array of custom objects and an observable of this array. An external component subscribes to the observable but does not respond when the list is modified. Additionally, the mat-table, which uses the ...

What strategies prove most successful in resetting a reactive angular form effectively?

I'm currently working with Reactive Forms using Angular Material inputs (mdInput) that are initialized with FormBuilder in the following way: contactForm: FormGroup; this.contactForm = this.fb.group({ name: ['', [Validators.required, Val ...

There are no markers or popups currently displayed on the map

Utilizing the ngx-leaflet plugin for leaflet, I have established the base layers and integrated a listener for the leafletMapReady event. Within my handler, I attempted to add both a marker and a customized popup. The handler code is displayed below: init ...

Dealing with challenges in integrating ngx-masonry with Angular 14

I am currently working with Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1). However, I am facing some issues where it is not functioning correctly. I would appreciate any assistance or guidance on how ...

Guide for Showing Data from Json Mapper in Angular 5

As a newcomer to Angular5 with TypeScript, I am trying to figure out how to display data from my JSON. I have an API that was created using Java. I have created a JSON Mapper in my Angular code like this : The JSON generated from my Java application looks ...

Tips for verifying error messages in angular for nested form group fields

Hey there, I'm new to Angular and I'm working on implementing form validations. Below is the code I'm using and encountering an issue with nested form group fields. The error I'm getting in the log is "TypeError: Cannot read property &a ...

Automatically generated bizarre URL parameters

Something strange is happening all of a sudden. I've noticed unusual URL parameters appearing on the site, and I'm not sure where they are coming from in my code. https://i.stack.imgur.com/g1xGG.png I am using Webpack 4 and Vue. This issue is ...

Discriminator-based deserializer with strong typing

Seeking advice on how to effectively utilize TypeScript for strongly typing a function that operates similarly to the following example: function createDeserializer(typeDeserializers) { return (data) => { const deserializer = typeDeserializ ...

Unsteady movement of Three JS OrbitControls during rotation

Currently, I am working on a scene with three.js and using orbit controls to rotate the camera around the scene. Occasionally, while rotating, the camera starts moving erratically before calming down and rotating smoothly again. I have read about orbit co ...

Having trouble with JavaScript's Date.getUTCMilliSeconds() function?

I have a straightforward question for you. Take a look at this Angular App and try to create a new date, then print the number of UTC milliseconds of that date in the console. Can you figure out why it is returning zero? ...

"Enhancing User Experience with Hover States in Nested React Menus

I have created a nested menu in the following code. My goal is to dynamically add a selected class name to the Nav.Item element when hovering, and remove it only when another Nav.Item is hovered over. I was able to achieve this using the onMouseOver event. ...

There is no property called 'x' in type 'y'

Can anyone explain why TypeScript is telling me this: Property 'dateTime' does not exist on type 'SSRPageProps'.ts(2339) Looking at my code below, I have data-time typed. import React from "react"; import axios from "axi ...