Error message in TypeScript class extension: "TypeError: Object.setPrototypeOf expects an object or null, received undefined."

Question

Error message in TypeScript class extension: "TypeError: Object.setPrototypeOf expects an object or null, received undefined."

In my Ionic 3 application, I have the following code snippets:

@Injectable() // I also tried without @Injectable and encountered the same error
export class M_someClass {
  constructor () {

  }

  method1 () { console.log("method1 used") }

}

@Injectable()
export class M_otherClass extends M_someClass {

  callMethod1 () {
    this.method1()
  }

}

Upon launching my app, I encounter the error:

TypeError: Object.setPrototypeOf: expected an object or null, got undefined

Researching about this issue led me to a related question on Stack Overflow. From what I gathered in this GitHub issue page, it appears that the bug has been resolved in either typescript version 2.4.0 or 2.4.1.
However, upon checking my package.json file, I noticed that under "devDependencies", I am using "typescript": "~2.4.2".
I'm confused as to why the error persists despite using version 2.4.2.

Could it be possible that the bug was not completely fixed in TypeScript 2.4.2? If so, is there any workaround available to resolve this issue?
Alternatively, could the error be originating from another source within my code?

angular typescript ionic2

Answer 1

Answer №1

Try switching up the order of your classes :

import { Component } from '@angular/core';

class M_otherClass  {
  constructor(){

  }

  test(){
    console.log('test')
  }

}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent extends M_otherClass  {
  constructor(){
    super();
    this.test();
  }

}

Here's a link to StackBlitz for reference.

Update:

In your service.ts file:

import { Injectable } from '@angular/core';

@Injectable()
class ParentService{
  constructor(){}
  get(){console.log('test')}
}

@Injectable()
class ChildService extends ParentService{
  constructor (){
    super();
  }
}

export {
    ChildService,
    ParentService
}

In your component file for utilizing services:

import { Component } from '@angular/core';
import { ChildService } from './app.service.ts'


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  constructor(public childService:ChildService){
    this.childService.get();
  }
}

In your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent} from './app.component';
import { HelloComponent } from './hello.component';
import { ChildService, ParentService } from './app.service.ts'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ ChildService, ParentService]
})
export class AppModule { }

Check it out in action on StackBlitz.

Answer 2

Try switching up the order of your classes :

import { Component } from '@angular/core';

class M_otherClass  {
  constructor(){

  }

  test(){
    console.log('test')
  }

}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent extends M_otherClass  {
  constructor(){
    super();
    this.test();
  }

}

Here's a link to StackBlitz for reference.

Update:

In your service.ts file:

import { Injectable } from '@angular/core';

@Injectable()
class ParentService{
  constructor(){}
  get(){console.log('test')}
}

@Injectable()
class ChildService extends ParentService{
  constructor (){
    super();
  }
}

export {
    ChildService,
    ParentService
}

In your component file for utilizing services:

import { Component } from '@angular/core';
import { ChildService } from './app.service.ts'


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  constructor(public childService:ChildService){
    this.childService.get();
  }
}

In your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent} from './app.component';
import { HelloComponent } from './hello.component';
import { ChildService, ParentService } from './app.service.ts'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ ChildService, ParentService]
})
export class AppModule { }

Check it out in action on StackBlitz.

Error message in TypeScript class extension: "TypeError: Object.setPrototypeOf expects an object or null, received undefined."

Answer №1

Similar questions

The implementation of Symbol.species in the Node.js Buffer class to generate a RapidBuffer seems illogical and confusing

Angular: Implementing a dialog in a component with an established constructor

Operators within an observable that perform actions after a specific duration has elapsed

Ways to enable components to access a string dependency token

conflict between ng-content and textarea elements

Is a loading screen necessary when setting up the Stripe API for the checkout session?

Using TypeScript: Implementing array mapping with an ES6 Map

Unable to retrieve React state within the callback function

Tips for aligning content produced by *ngFor within a bootstrap grid

Tips for converting necessary constructor choices into discretionary ones after they have been designated by the MyClass.defaults(options) method

Injecting live data into an input field within a table using Angular 4

The data in DataTables is loading correctly, however, the buttons and sorting features are not operating as intended within Angular 4

When working with Visual Studio and a shared TypeScript library, you may encounter the error message TS6059 stating that the file is not under the 'rootDir'. The 'rootDir' is expected to contain all source files

How Angular 8 can gracefully handle asynchronous HTTP results within an if statement

Ways to get into the Directive class

Is there a way to ensure my custom tslint rule is compatible with the exact version of the TypeScript module being used by tslint?

react-navigation hook for navigating

Unlocking the Power of Angular 12: Leveraging the Subscribe Method to Access Multiple REST APIs

Why is it that I am not receiving JSON data in my Angular application?

Understanding the concept of inconsistent return points in Typescript: What implications does it carry?