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.

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

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

Create a recursive array structure that contains two distinct data types and specific guidelines

I have a unique array structure where the odd index always contains elements of TypeA and the even index always contains elements of TypeB. It is guaranteed that this array will always have an even length, never odd. The data structure of this array must ...

javascripttypescript

Is there a way to utilize Typescript enum types for conditional type checking?

I'm working with restful services that accept enum values as either numbers or strings, but always return the values as numbers. Is there a way to handle this in TypeScript? Here's my attempt at it, although it's not syntactically correct: ...

typescriptenumsmapped-typesconditional-types

There seems to be an issue with Material-UI and TypeScript where a parameter of type 'string' does not have an index signature in the type 'ClassNameMap<"container" | "navBar" | "section0">'

My current project is encountering a TS Error stating "(No index signature with a parameter of type 'string' was found on type 'ClassNameMap<"container" | "navBar" | "section0">'.)" The code below is used to assign styles to vari ...

reactjstypescriptmaterial-ui

Webpack and typescript are encountering a critical dependency issue where the require function is being utilized in a manner that prevents static extraction of dependencies

Having recently started diving into typescript and webpack programming, I must admit that my background in this area is limited. Despite searching through similar questions on Stack Overflow, none of the solutions provided so far have resolved my issue: I ...

typescriptwebpack

The declaration of module 'DynamicTestModule' contains an unexpected value 'StateService'

In my Angular 5 project, I am using UI Router. While running tests for the footer component, I encountered the following error: Failed: Unexpected value 'StateService' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Dir ...

angularunit-testingkarma-runner

The identifier 'name' is not found in the specified data type

How can I resolve the error 'Property 'name' does not exist on type' in TypeScript? Here is the code block : **Environment.prod.ts** export const environment = { production: true, name:"(Production)", apiUrl: 'https://tes ...

javascriptangulartypescript

Service in Angular - Triggering a signal with an HTTP request

I have created a service with the following structure: const initialState: IUserState | null = null @Injectable({ providedIn: 'root' }) export class AuthService { private user = signal(initialState) constructor (private http: HttpClient) { ...

angularhttpsignals

Change a TypeScript alias within the @types namespace

While using Typescript 3, I encountered a situation where I needed to modify a type alias from the @types/json-schema definition provided by DefinitelyTyped. The issue arose when I wanted to incorporate a custom schema type into my code. Since this custom ...

javascriptnode.jstypescript

What sets apart 'export type' from 'export declare type' in TypeScript?

When using TypeScript, I had the impression that 'declare' indicates to the compiler that the item is defined elsewhere. How do these two seemingly similar "types" actually differ? Could it be that if the item is not found elsewhere, it defaults ...

typescripttypesdeclare

Only include unique objects in the array based on a common property

I am currently working with the following array: [ {name: "Mike", code: "ABC123"}, {name: "Sarah", code: "DEF456"}, {name: "John", code: "GHI789"}, {name: "Jane", code: "JKL01 ...

javascripttypescript

Learn how to retrieve the index using PrimNG's TurboTable in conjunction with Angular version

Having trouble finding the correct way to display an index with Angular 6 and PrimeNG turbo table. This is what I have tried so far: <p-table [value]="timecards"> <ng-template pTemplate="body" let-timecard let-i="index"> <tr><t ...

angularprimengprimeng-turbotable

What is the process for upgrading ag-Grid to newer versions?

In the past, I was using: "ag-grid": "^18.1.2", "ag-grid-angular": "^18.1.1" Version "^18.1.1" of "ag-grid-enterprise". However, as my license expired, I obtained new versions of the licenses. I then included: "@ag-grid-community/angular": "^22.1.1", ...

angularag-gridag-grid-angular

Issue with SvelteKit: PageData not being refreshed in API response after initial render

I am relatively new to working with Svelte and SvelteKit, and I am currently trying to fetch data from an API. I have followed the SvelteKit todo sample code, which works well for the initial rendering and when clicking on an a tag. However, I am facing an ...

typescriptsveltesveltekit

Distinguishing Between TypeScript Interface Function Properties

Could anyone clarify why the assignment to InterfaceA constant is successful while the assignment to InterfaceB constant results in an error? interface InterfaceA { doSomething (data: object): boolean; } interface InterfaceB { doSomething: (data: obje ...

typescriptfunctioninterfaceproperties

The module './$types' or its related type declarations could not be located in server.ts

Issue with locating RequestHandler in +server.ts file despite various troubleshooting attempts (recreating file, restarting servers, running svelte-check) +server.ts development code: import type { RequestHandler } from './$types' /** @type {imp ...

typescriptsveltesveltekit

npm encountered an issue when attempting to install a package from a local directory: EISDIR: illegal operation on a directory, read

While attempting to add my compiled TypeScript output as a local package using npm, this error appears: $ npm install --save ../app/out npm ERR! eisdir EISDIR: illegal operation on a directory, read npm ERR! eisdir This is most likely not a problem wit ...

node.jstypescriptnpm

What is the method for sending a Post request using the "content type" value of "application/x-www-form-urlencoded"?

Need to send a request to the oAuth2 authentication server to obtain a token. The request works fine in postman but encountering issues when trying to make the same request from Angular 4. CORS configuration is correct as other requests are functioning p ...

node.jsangularoauth-2.0http-post

Is it possible for pdfjs-dist to be used with Typescript?

Is there a way to preview a PDF as a canvas without importing pdfjs-dist into my project? I have already used the command $yarn add pdfjs-dist to install pdfjs-dist. Do I need to include any additional imports? import pdfjsLib from "pdfjs-dist/build ...

typescriptvue.jspdfpdfjs-dist

Keep track of the input values by storing them in an array after they are

Creating an Angular application to read barcodes. barcode-scanner.component.html <form #f="ngForm" class="mt-3 text-center" id="myform" (ngSubmit)="onSubmit(f)"> <div class="text-center"> <input type="text" maxlength= ...

angulartypescriptapi

Restrict the parameter type using a type predicate

How can I effectively narrow types based on the value of a single field in TypeScript? It seems that using type predicates may not be working as expected to narrow down the types of other parameters within a type. Is there a way to ensure correct type na ...

typescript