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

Attempting a second filter of the table using the dropdown results in no data being returned

I've developed a CRUD app using Angular 7, and I'm facing an issue. When I select a dropdown item for the first time, it shows the desired table data. However, on selecting another item for the second time, it returns nothing. Below is my compone ...

What is the best way to arrange items by utilizing the Array index in JavaScript?

Currently, I am attempting to make the elements within this angular component cascade upon loading. The goal is to have them appear in a specific layout as shown in the accompanying image. I'm seeking guidance on how to write a function in the TypeSc ...

Adding a new element to the div by referencing its class name

One way to add a component to the view is by using ViewContainerRef. For instance, HTML File: <div #Ref>it is possible to append the component here</div> TS File: @ViewChild("Ref", { read: ViewContainerRef }) public Ref: ViewContainerRe ...

Display the splash screen just once upon the initial loading of the app with Angular's progressive web app

Recently, I developed a sample splash screen component for my Angular PWA app. However, I am facing an issue where the splash screen appears every time the application is refreshed on any page, not just when the app starts. This is not the behavior I want. ...

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Currently, I am working on setting up state to be passed through context in React using hooks. However, when I attempt to use the dispatched state updater function, an error is thrown: Cannot invoke an expression whose type lacks a call signature. Type &a ...

Ways to implement a package designed for non-framework usage in Vue

Alert This may not be the appropriate place to pose such inquiries, but I am in need of some guidance. It's more about seeking direction rather than a definitive answer as this question seems quite open-ended. Overview I've created a package th ...

"Encountering issues when trying to retrieve a global variable in TypeScript

Currently facing an issue with my code. I declared the markers variable inside a class to make it global and accessible throughout the class. However, I am able to access markers inside initMap but encountering difficulties accessing it within the function ...

Comparing Angular's 'ng serve' and 'npm start' commands

Just a quick query regarding angular-cli. I'm curious, is it correct that when I use ng serve, I am utilizing the global installation of angular-cli but when I opt for npm start, I am using the local one? ...

Instructions for displaying emotes and UTF-8 characters in a Flutter/Java app

In my efforts to display text in Flutter, I am facing the challenge of ensuring that the text is encoded in UTF-8 and can also show emojis. Unfortunately, I have not been successful in achieving both simultaneously. When attempting to decode an input with ...

Pass the parameter name to the controller using the Change function in Angular 2

When creating a string from multiple inputs, I have a requirement to include the name of the input element as the second parameter in a function. <input [(ngModel)]="programSearched" name="programSearched"(ngModelChange)="stringBuilderOnChangeMaker(pro ...

Exploring the functionalities of Angular components

I have encountered an issue while testing my class that relies on a single dependency, which is a service. Despite trying various methods such as using stubs, I am still facing the problem of an undefined method. https://i.stack.imgur.com/A3by2.png Testin ...

Can you use TypeScript to define generic React functional components?

I am looking to add annotations to a generic in a React functional component like the following: import React, {useEffect, useState} from "react"; interface PaginatedTableProps{ dataFetcher: (pageNumber: number) => Promise<any>, columnNames: ...

SecurityClient is encountering a problem where the Http Error status is not being displayed

Currently, I am utilizing a custom Http client that is an extension of Angular 4's Http Client. export class SecurityClient extends Http { // ... } Within this client, there are methods designed to make calls to an API and handle a 401 status code by ...

Incorporating a Symbol into a Function

Reviewing the following code snippet: namespace Add { type AddType = { (x: number, y: number): number; }; const add: AddType = (x: number, y: number) => { return x + y; }; } Can a 'unique symbol' be added to the AddType lik ...

Eliminate the usage of JSON.stringify in the Reducer function

I have a system where I store chat messages in a dictionary with the date as the key and a list of messages as the value. Whenever a new message is added, the following code snippet is executed. Is there a way to enhance the existing code to eliminate the ...

Each time the website refreshes, Object.entries() rearranges the orders

After reading the discussion on Does JavaScript guarantee object property order? It seems that Object.entries() should maintain order. However, I encountered an issue with my Angular website where the order of keys in Object.entries() changed upon refres ...

Only JSON objects with a boolean value of true will be returned

I am working on returning JSON objects in JavaScript/TypeScript that have a true boolean value for the "team" property. For example, the JSON data I am using is as follows: { "state": "Texas", "stateId": 1, "team": true }, { "state": "Cali ...

The checkbox component is currently not displaying on the ngx-datatable

The following HTML code snippet demonstrates a sample layout. The operations are functioning correctly, however, the checkbox is not visible. <ngx-datatable style="width: 90%" class="material" [rows]="rows" ...

I'm having trouble with ViewChild - consider upgrading to beta7 for a solution

import {Page,NavController,NavParams,Platform,IonicApp} from 'ionic-angular'; import {ViewChild} from '@angular/core'; @Page({ templateUrl: 'build/pages/tabspage/tabspage.html' }) @ViewChild('myTabs') tabRef: T ...

What is the Angular2 version of angular.equals?

Currently, I am in process of upgrading an Angular 1 project to Angular 2. In the old project, I used angular.equals for comparing objects like this: angular.equals($ctrl.obj1, $ctrl.newObj);. I tried looking online for a similar method in Angular 2 but ...