Upgrading from Angular 2 to 4 causes compilation failure in project

Recently, I upgraded my Angular project from version 2 to version 4. The steps I followed for this upgrade are as follows:
1- Deleted the /node_modules/ folder
2- Executed the following command:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

This was done in order to update the versions listed in package.json.

3- Ran npm install
++However, at the end of the process, an unusual link is visible within the tree structure: https://i.sstatic.net/bmEvP.png

4- Ran ng build

The error message displayed after running ng build was:

    ERROR in PATH/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts (133,11): All declarations of 'WeakMap' must have identical type parameters.

ERROR in PATH/node_modules/typescript/lib/lib.es2015.iterable.d.ts (124,11): All declarations of 'WeakMap' must have identical type parameters.

ERROR in PATH/node_modules/typescript/lib/lib.es2015.collection.d.ts (45,11): All declarations of 'WeakMap' must have identical type parameters.

ERROR in PATH/node_modules/@types/lodash/index.d.ts (19417,15): All declarations of 'WeakMap' must have identical type parameters.

When I inspected one of the classes mentioned above, an additional error message appeared: https://i.sstatic.net/ZAEuW.png

The message indicated 'cannot find type object.'

Based on my background in Java, it seems that the compiler is interpreting 'object' differently than what is expected by the library. Ideally, 'Object' should be used as a concrete class or interface. Any suggestions?

Here is the content of my package.json file:

    {
  "name": "rats-gui",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
........(Content truncated for brevity)......
    "tslint": "^4.3.0",
    "typescript": "2.1.5"
  }
}

Answer №1

To ensure compatibility with the latest version of Angular, it is recommended that you make the following changes to your project:

  • Remove the "typescript": "^2.3.4" entry from your dependencies and replace it within your devDependencies with "typescript": "^2.3.4".
  • Move @types/lodash to devDependencies and update it to version 4.14.66.
  • Delete @angular/compiler-cli from the dependencies list.
  • Swap out angular-cli with "@angular/cli": "1.1.3".

Keep in mind that updating to the new Angular CLI version may introduce some additional challenges. Refer to the changelog for any breaking changes.

For more tips on upgrading your project, visit this link.

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

The default behavior of Angular-Keycloak does not include automatically attaching the bearer token to my http requests

I'm currently working on integrating keycloak-angular into my project, but I'm facing an issue with setting the bearer token as the default for my HTTP requests. "keycloak-angular": "9.1.0" "keycloak-js": "16.0 ...

Using Firebase orderByChild to access a nested object in the database

In my current project, I am utilizing a real-time database with the following data structure: { "users": { "1234": { "name": "Joe", "externalId": "384738473847", }, ...

What is the proper way to eliminate the port from a URL so that the images sourced from the XAMPP database can function correctly?

I am a beginner in Angular and I am facing an issue with Angular and XAMPP. I am attempting to load images from mySQL database where I stored their destinations. The problem is that Angular is trying to access that destination through this link: https://i ...

Example of a Single-Page Application using Angular 2

Currently working on a project to create a single page application. The layout will include a search section and a results section. export class AppComponent implements OnInit{ // Div visibility. searchVisible = true; resultsVisible = false; ...

Is it possible to modify the parameters of a function by utilizing a MethodDecorator without affecting the "this" value?

Consider a scenario where you need to dynamically modify method arguments using a decorator at runtime. To illustrate this concept, let's simplify it with an example: setting all arguments to "Hello World": export const SillyArguments = (): MethodDec ...

The utilization of 'new' is not allowed with an expression that does not have a call or construct signature in TypeScript

While searching for a solution, I stumbled upon this link which unfortunately did not provide the answer I was looking for: Cannot use 'new' with an expression whose type lacks a call or construct signature I am facing a similar issue. In my JavaS ...

Metamorphosed Version.execute SourceText and TypeScript Writer

I'm currently working on transforming a TypeScript source file and I have successfully made the necessary changes to the code. Despite seeing my transformed node in the statements property of the transformed source file, the SourceFile.text property d ...

How can I use Angular2 to ensure that a child component automatically updates when there is a change in the parent's property?

After reviewing the components provided below, it appears that the parent's property updates correctly, but unfortunately, the changes are not reflected in the child component. What steps should I take to ensure that the child component accurately ref ...

Formik Fields with unique key properties

When mapping text fields, I follow this structure: { AddVehicleFields.map(({formikRef, ...input}) => ( <> <TextField key={formikRef} helperText={ getIn(formik.touched, formikRef) ? getIn(formik. ...

Integrating Angular 2 code into an existing JSF web application

I have a web application developed using JSF and Maven. Currently, the UI is built using JSF and I would like to add new screens using Angular 2 code within the same application while making REST calls. I am unsure about where to integrate the Angular co ...

I possess a dataset and desire to correlate each element to different elements

[ { "clauseId": 1, "clauseName": "cover", "texts": [ { "textId": 1, "text": "hello" } ] }, { "clauseId": 3, "clauseName": "xyz", "te ...

Creating a custom HTTP request in Angular 2

Utilizing a custom HTTP request class to add an Authorization Header to all requests has been successful on the majority of android devices. However, some customers have reported receiving a 'No internet connection' error despite having a functio ...

Accessing data from an API and showcasing information on a chart using Angular

I'm currently developing a dashboard application that requires me to showcase statistics and data extracted from my MongoDB in various types of charts and maps using Angular and Spring Boot. The issue I'm facing is that when attempting to consume ...

Transfer the unique field name to a universal assistant

Consider the code snippet provided in this playground: class A { private z = 0 } type K = "z" type ValidKeys = A[K] extends any ? K : never The type ValidKeys compiles correctly and matches K only when K represents a subset of keys from A. It ...

Mapping arrays from objects using Next.js and Typescript

I am trying to create a mapping for the object below using { ...product.images[0] }, { ...product.type[0] }, and { ...product.productPackages[0] } in my code snippet. This is the object I need to map: export const customImage = [ { status: false, ...

Utilizing Angular 2 for a dynamic Google Map experience with numerous markers

I am currently working on an Angular2 project that involves integrating Google Maps. My goal is to display multiple markers around a specific area on the map. Although I have been able to get the map running, I am facing issues with displaying the markers ...

How can I send a parameter to a function and retrieve it upon clicking in Angular?

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = & ...

The ultimate guide to successfully implementing Angular Service Workers on IE11

Can the Angular Service Worker be utilized in IE11? Although CanIuse indicates that IE11 is not supported, there is a Polyfill available for older browsers that offers Promises support - the foundation on which the Service Worker operates. Has anyone succ ...

The function angularCompiler.getNextProgram is not available in the context of angular 12 when using custom-webpack configurations

Recently, I upgraded my Angular 11 project to version 12. I have incorporated the @angular-builders/custom-webpack package in my devDependencies and I am using the below command for building my Angular project. ng build --configuration=production --build ...

Focusing in on a particular category of items based on a specific characteristic

I can't seem to understand why typescript has an issue with the code below. The errors from the compiler are detailed in the comments within the code. const FOO = Symbol(); function bar<T>(param: T) { if (param !== null && typeof para ...