Encountered an issue during the transition from Angular 7 to Angular 9

After following the advice in the second response of this discussion, I successfully upgraded to Angular 9. However, I am now encountering an issue in the browser console when running my project.

https://i.sstatic.net/esAXf.png

Package.json

"dependencies": {
    "@angular-devkit/build-angular": "^0.900.4",
    "@angular/animations": "9.0.4",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "9.0.4",
    "@angular/compiler": "9.0.4",
    "@angular/core": "9.0.4",
    "@angular/forms": "9.0.4",
    "@angular/http": "7.2.16",
    "@angular/material": "^9.1.0",
    "@angular/material-moment-adapter": "9.1.0",
    "@angular/platform-browser": "9.0.4",
    "@angular/platform-browser-dynamic": "9.0.4",
    "@angular/platform-server": "9.0.4",
    "@angular/router": "^9.0.4",
    "@types/underscore": "1.9.4",
    "angular-highcharts": "^9.0.2",
    "angular2-jwt": "*",
    "bootstrap": "4.4.1",
    "chart.js": "2.9.3",
    "core-js": "3.6.4",
    "font-awesome": "*",
    "http-client": "*",
    "http-headers": "*",
    "rxjs": "6.5.4",
    "rxjs-compat": "^6.5.4",
    "socket.io-client": "^2.3.0",
    "tether": "1.4.7",
    "underscore": "^1.9.2",
    "vm": "*",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^9.0.4",
    "@angular/compiler-cli": "9.0.4",
    "codelyzer": "5.2.1",
    "concurrently": "5.1.0",
    "lodash": "4.17.15",
    "tslint": "6.0.0",
    "typescript": "^3.6.4"
  }
}

Version

https://i.sstatic.net/HBSJL.png

Everything was functioning properly with Angular 7. Any assistance would be greatly appreciated.

angulartypescriptivy

Answer №1

To upgrade to the latest version of Angular 8, use the following command:

ng update @angular/cli@8 @angular/core@8

After completing the update to version 8, proceed with the next step to update to version 9:

ng update @angular/cli @angular/core

For a detailed guide on how to update to version 9, refer to this resource.

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

Following the upgrade of Angular, the webpack module source-map-loader is encountering an error: "this.getOptions is not a function"

Currently in the process of constructing my angular project using webpack alongside source-map-loader to extract source maps, like this: module.exports = { // ... module: { rules: [ { test: /\.js$/, enforce: "pre&quo ...

javascriptnode.jsangularwebpacksource-maps

Roles in the Nebular system always have the granted status set to true by default

Hey there, I'm currently setting up Nebular to handle roles. Everything is working fine on the server side, but on the front end side, accessControl.isGranted() always returns true regardless of the role. Here's a snippet of the code I have been ...

angularauthorizationnebular

There seems to be an issue with the authorization function in nextauthjs utilizing TypeScript

In my NextJS application utilizing nextAuth with TypeScript, I am encountering difficulties implementing the credentials provider. Below is a snippet from my api\auth\[...nextauth]\route.ts file: CredentialsProvider({ name: 'cre ...

typescriptnext.jsnext.js13next-auth

Angular 2 (Final): Utilizing resetConfig for seamless integration of routes into lazy loaded modules

Trying to understand the process of dynamically adding routes from a lazy-loaded module. The core app has initial routes: export const routes = [{ path: "", component: HomeComponent }, { path: "moduleA", loadChildren: "app/moduleA/A.module ...

dynamicangularmodulelazy-loadingrouter

Obtain the selected type from a tuple after filtering

I have a tuple with multiple objects stored in it. const repos = [ { name: 'react', type: 'JS' }, { name: 'angular', type: 'TS' }, ] as const const RepoTypes = typeof repos const jsRepoTypes = FilterRepos<&a ...

typescript

One-stop shop for organizing import paths

Currently seeking a solution to streamline the management of import paths in Angular 2.0. Ideally, I would prefer to set up the configuration once and then simply reference it as needed, similar to using a variable. For instance: import { ProductService } ...

angular

Angular 2: Issue with Input Controls losing value within a form element using ngFor

After developing a page in Angular2 that utilizes a form tag and renders input controls using ngFor within a table tag, I encountered an issue where selected input values are removed upon adding a new row. However, everything works fine when the form tag i ...

htmlangularangular2-templateangular2-formsangular2-directives

Securing your Angular2 application with TypeScript for enhanced safety

Looking to create a web application using Angular2 with TypeScript. After researching authentication in Angular2, it seems I need to include the following components: index component (public) login component (public) my private component (private) Thes ...

javascriptsecurityangular

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

My curiosity lies in understanding how front-end javascript libraries such as Vue and Angular can seamlessly integrate with other libraries and assets. For instance, if I were to procure a website template already equipped with additional javascript, is it ...

javascriptangularvue.js

What method can be used to inherit the variable type of a class through its constructor

Currently, I am in the process of creating a validator class. Here's what it looks like: class Validator { private path: string; private data: unknown; constructor(path: string, data: string) { this.data = data; this.path = path; } ...

typescript

Transition from tslint to a new linter

Is it possible to remove tslint globally and switch to using eslint as the default in my Angular projects? When creating a new project with the command ng new myProj, I would like to have an eslint.json file instead of tslint.json. ...

angularnpmnpm-installeslinttslint

Definition of Angular 2 File

I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I enco ...

javascriptangulartypescriptd3.js

Tips for concealing or deleting a title attribute from an SVG component in Angular 2

I have successfully integrated SVG icons into my Angular 2 application. However, when hovering over the icons, they display the 'Icons' title. I utilized Angular SVG Icon for inline SVG to apply CSS styles. My goal is to eliminate this title fro ...

angularsvg

Nest is unable to resolve DataSource in the dependency injection

I've encountered an issue with dependencies while working on my NestJS project. When I try to launch the app, the compiler throws this error at me: [Nest] 16004 - 09.04.2022, 16:14:46 ERROR [ExceptionHandler] Nest can't resolve dependencies of ...

node.jstypescriptnestjstypeorm

I am working on an Angular application that includes a dynamic form for an attendance system for employees. I am currently trying to figure out how to generate the JSON data

I have a dynamic form in my reactive attendance system for employees. When I click on submit, I need to generate JSON data like the following: { "user_id": "1", "branch_id": "4", "auth_token": "59a2a9337afb07255257199b03ed6076", "date": "2019- ...

jsonangulartypescript

What is the functionality of angular-cli@webpack?

After working with angular-cli using systemJS, I have become comfortable with the build process, test cases, and component interaction. Recently, I made the switch from angular-cli to angular-cli@webpack. However, I am now facing confusion on a few point ...

angulartypescriptwebpack

How can I create a computed field in TypeORM by deriving its value from other fields within the same Entity?

My goal is to implement a 'rating' field in my User Entity. Within the User Entity, there exists a relationship with the Rating Entity, where the User has a field called ratingsReceived that eagerly loads all Ratings assigned to that User. The & ...

javascriptsqltypescriptsequelize.jstypeorm

Enhance user experience by implementing accessibility features in Angular 5 using

Our team is currently working on an Angular 6 application and we need to make it more accessible. I have tried adding aria-live="polite" to our angular-components, but we are experiencing issues with the Chromevox reader interrupting itself during data l ...

angularaccessibilityuiaccessibility

Angular 2+ seems to be failing to detect and update changes in variables within the template

I have a component that includes rendering the user's name from the profile object. The corresponding part of the template looks like this: <button mat-button [matMenuTriggerFor]="userMenu" *ngIf="isAuthenticated()"> {{profile?.name} ...

angularangular2-template

Disabling ion-select in Ionic 2 with Typescript

To disable an ion-select element in Angular, you can use the disabled attribute like this: <ion-item> <ion-label stacked>Property Type</ion-label> <ion-select [(ngModel)]="propType" (ionChange)="ionChanger()" di ...

angulartypescriptionic2