Encountering an issue during Angular upgrade from version 8 to 11: Error message stating that the class extends value is undefined,

I am currently in the process of upgrading my Angular application from version 8 to 11, but I encountered the following error:

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module.4lR8 (main.js:sourcemap:59)
    at __webpack_require__ (runtime.js:sourcemap:80)
    at Module.etL5 (main.js:sourcemap:3115)
    at __webpack_require__ (runtime.js:sourcemap:80)
    at Module.A3+G (main.js:sourcemap:1039)
    at __webpack_require__ (runtime.js:sourcemap:80)
    at Module.ct+p (main.js:sourcemap:3011)
    at __webpack_require__ (runtime.js:sourcemap:80)
    at Module.ZAI4 (main.js:sourcemap:2897)
    at __webpack_require__ (runtime.js:sourcemap:80)

Could someone please help provide a solution for this issue?

Below are the details of the Angular framework versions being used:

Angular CLI: 11.2.12
Node: 10.16.3
OS: win32 x64

Angular: 11.2.13

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.12
@angular-devkit/build-angular   0.1102.12
@angular-devkit/core            11.2.12
@angular-devkit/schematics      11.2.12
@angular/cdk                    11.2.12
@angular/cli                    11.2.12
@angular/http                   7.2.15
@schematics/angular             11.2.12
@schematics/update              0.1102.12
ng-packagr                      11.0.0
rxjs                            6.6.7
typescript                      4.0.2
angulartypescriptangular11

Answer №1

Consider incorporating @Directive()/@Component() into the base class structure

By annotating an abstract class with @Directive() (without arguments), Angular recognizes it for compilation, generating a factory and establishing connections to any methods or properties that will be used by Angular.

@Directive()
export abstract class ServiceBase {
  static onTokenExpired = new EventEmitter();
  static onTokenRefreshed = new EventEmitter<string>();
  constructor(protected http: HttpClient) { }
  protected get<T>(url: string, options?: any, ctor?: new () => BaseVO, resolveLater: boolean = false): Observable<T> { .... }
  protected post<T>(url: string, data: any, options?: any, ctor?: new () => BaseVO, resolveLater: boolean = false): Observable<T> { ----- }
}

Explore Further Information Here

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

Routing with nested modules in Angular 2 can be achieved by using the same

Encountering a common issue within a backend application. Various resources can be accessed through the following routes: reports/view/:id campains/view/:id suts/view/:id certifications/view/:id Note that all routes end with the same part: /view/:id. ...

javascriptangulartypescriptroutesangular-ui-router

Getting the local path of a file from an input file in Angular 7

Is there a way to retrieve the local file path from an input field in HTML? After running the code below, I obtained 'C:\fakepath\fileTest.txt' I am looking for a method to get the local path so that I can pass it on to my control ...

htmlangulartypescriptangular7

Customize Typing for Properties in Subclasses of Lit-Element Using TypeScript

When extending a lit-element Class to add more specific typing, should the @property decorator be overridden or just the type and initializer? For example, consider the following code: interface AB { a: number, b: string, } @customElement('my- ...

javascripttypescriptsubclasslit-elementjavascript-decorators

Encountering a compiler error due to lack of patience for a promise?

In the current TypeScript environment, I am able to write code like this: async function getSomething():Promise<Something> { // ... } And later in my code: const myObject = getSomething(); However, when I attempt to use myObject at a later po ...

typescriptasync-await

Struggling to center align a button with Bootstrap 5 and Flexbox

I'm having trouble centering the Define New link, and I can't figure out what I'm doing wrong. I'm new to this, so please be patient with me. Below is the code snippet: <div class="col-xl-3 d-flex flex-column justify-content-be ...

angularbootstrap-5

Transforming a sizeable Typescript undertaking into ES6 modules

I am faced with the challenge of transitioning a fairly large app (~650 files) that currently has a mix of ES6 modules and legacy global namespace internal modules and classes. My goal is to convert everything to 100% ES6 modules. Considering an Iterativ ...

typescriptes6-modules

Displaying changing content in Angular Google Maps infoWindow

Can you provide guidance on displaying marker-specific information in the corresponding infoWindow? In the example found here, it seems that the same information appears for every marker. In the previous version of angular google maps, you could easily cu ...

angulargoogle-mapsangular-material

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

In my application, I am working with a MatTable that has a datasource consisting of AbstractControls (FormGroups) to create an editable table. At the end of each row, there are action buttons for saving or deleting the elements. My goal is to implement tr ...

javascriptangularangular-materialangular-material-tableformgroups

Challenges with Primeng Component UI

I am currently working with PrimeNG components, but I'm facing issues with the UI display on the web browser. At this moment, I need to showcase a static dropdown. I have referred to PrimeNG for guidance. Below is the code snippet to implement that c ...

angularprimengprimeng-dropdowns

Utilizing Node modules in TypeScript, Angular 2, and SystemJS: A Comprehensive Guide

In the process of developing a simple Angular 2 application, I am constructing a class named User. This class includes a function called validPassword() which utilizes the bcrypt library to validate user passwords: import { compareSync, genSaltSync, hashS ...

node.jsangulartypescriptnpmsystemjs

Steps for linking Apollo client to Apollo server

I'm currently working through the Apollo tutorial located at https://www.apollographql.com/docs/tutorial/client/. My server is successfully running on localhost:4000, while my client is running on localhost:3000. Even though the client compiled withou ...

typescriptapollo-clientapollo-server

How can I remove a row from a mat table using Angular?

Having trouble implementing *ngFor in my angular mat table, seeking guidance from someone with more expertise? I am trying to delete a row within an array using a button and display it on my table, but encountering issues. I intend to utilize *ngFor to sh ...

angulartypescriptangular-materialmat-table

Can you tell me how to add a custom CSS class to a cell in ag-grid using Angular?

I am facing a challenge with applying CSS to cells in ag-grid in Angular based on specific logic. I have assigned an object to the grid, where one of the fields contains a value for Object.hours and I need to apply styling based on the Object.status proper ...

angularag-grid-angular

Leverage CSS variables to dynamically create class names within SCSS

Can CSS variables be used to generate class names? I am incorporating SCSS in an Angular project and I am looking to base my class names on the @input color component property. I have stored the input in a CSS variable called --color-variable to utiliz ...

cssangularsass

clicking a table row will activate the *ngFor directive

Incorporating data from an API into a table, I have enabled the functionality for users to click on table rows in order to change the displayed data using background code: <tr [ngClass]="tablerowClass" *ngFor="let dataObject of data$ | async" (click)=" ...

htmlangulartypescript

"Angular encountering an error with converting a string to a date due to

I have a date stored as a string in the format '2022-07-15T09:29:24.958922Z[GMT]'. When I try to convert it to a date object, I am getting an error saying it is an invalid date. Can anyone help me with this issue? const myDate = response; / ...

javascriptangulardate

Issue with Angular 6 Share module functionality not functioning as expected

While creating my Angular 6 application, I encountered an issue with sharing a header across multiple pages. I tried including it but it doesn't seem to be working. Can anyone point out what I might be doing wrong? For a demonstration, you can visit . ...

angulartypescriptfrontend

Unable to log in with password after hashing using React, NodeJS, and mySQL

I've implemented a salt and hash function to secure my password. Strange thing is, I can't log in using the original password, but it works when I use the hashed password from the database. Salt: "HashedPasswordCheck" Hash Function: function has ...

mysqlnode.jsreactjstypescriptredux

React Typescript does not support the use of React-Router

I'm currently working on a React app that utilizes Typescript. The React version is set to "react": "^16.9.0", and the React-Router version is "react-router-dom": "^5.1.2". Within my App.tsx file, the structure looks like this: const App: React.FC ...

reactjstypescriptreact-routerreact-router-v4

The module '@angular/compiler-cli/ngcc' is missing and cannot be located while trying to run ng serve

Out of the blue, I started encountering this error. It seems to be related to a version issue with angular-cli, but I'm unable to pinpoint the exact problem. Any assistance would be greatly appreciated! npm i displays some warnings and one compiler e ...

angularnpmangular-clipackage.json