Angular 2 and SystemJS: Dealing with the Challenge of Circular Dependencies

I have been struggling with a problem that seems to stem from a circular dependency. Despite conducting thorough research, I have not been able to find a suitable solution. It appears to be similar to the issue discussed here: TypeError: b is undefined in __extends in TypeScript, but the suggested solutions did not work for me.

To simplify the problem, I have created a sample in this plunker.

In essence, there are 3 classes involved:

  • Class A, which includes an array of type A
  • Class B, which inherits from class A
  • Class F, a factory responsible for creating instances of either class A or class B based on a given value

The objective is to manage a dynamic parameter list (each instance of A representing a parameter) where B serves as a specialized version of A for file handling. Even after removing the factory and simplifying to just classes A and B, I continue to encounter the same error:

TypeError: b is undefined
    Error loading http://localhost:3000/app/main.js

Below is the code snippet from a.ts:

import { F } from './f';

export class A {
  children: A[]

  constructor(hasChildren: boolean = false) {
    if (hasChildren) {
      for (var i = 0 ; i < 10 ; ++i) {
        let isB = (Math.random() * 2) > 1;
        this.children.push(F.createObject(isB))
      }
    }
  }
}

From b.ts:

import { A } from './a';

export class B extends A {
}

And finally, f.ts:

import { A } from './a'
import { B } from './b'

export class F {
  static createObject(isB: boolean): A {
    if (isB) {
      return new B
    } else {
      return new A
    }
  }
}

Answer â„–1

This situation doesn't allow for a circular dependency. One way to address it is by utilizing an interface.

Example link

file1.ts

import { Interface1 } from './interface1';

export class File1 implements Interface1 {
  items: File[]
}

file2.ts

import { File1 } from './file1';
import { Interface1 } from './interface1';

export class File2 implements Interface1{
  items: File[] = [];

  constructor(hasItems: boolean = false) {
     ...
  }
}

interface1.ts

export interface Interface1 {
  items: File[]
}

Additional resources: Circular dependency issue in TypeScript

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

Steps for implementing a button to erase all created polygons in Leaflet and Geoman

I'm currently utilizing Geoman-free in conjunction with Leaflet to create a map where I can draw polygons. My objective is to develop a custom button within my Angular UI that can clear all the drawn polygons. How can this be achieved? Update: Let m ...

What are some ways to customize the functionality of the data table filter in Angular Material?

Attempting to use the filter feature in Angular Material Data Table: When searching for "MATCHED", both "MATCHED" and "UNMATCHED" are displayed in the status column of the table. It seems this is due to the data object being reduced and concatenated befo ...

Encountering a ng-select2 Error with Angular version 4.1.3

I have recently installed the ng-select2 package, but I encountered an error when trying to compile my code using 'ng serve'. Node version: 8.10.0 NPM version: 6.0.0 Another list item Operating System: Windows 7 ERROR in d:/PATH-TO-PROJECT-F ...

What is the best way to pass props to a styled component (e.g., Button) in Material-UI

One of my tasks involves creating a customized button by utilizing the Button component with styled components. export const CustomButton = styled(Button)({ borderRadius: "17px", fontWeight: 300, fontSize: ".8125rem", height: &q ...

Exploring the keyof feature in Typescript for array values

My issue involves managing a list export const list = [ { name: 'parentTitle', }, { name: 'anotherTitle', }, { name: 'whatever', }, ]; My goal is to dynamically create a union type that reflects the t ...

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

Can anyone offer any suggestions for this issue with Angular? I've tried following a Mosh tutorial but it's

Just finished watching a video at around 1 hour and 35 minutes mark where they added the courses part. However, I encountered an error during compilation. ../src/app/app.component.html:2:1 - error NG8001: 'courses' is not recognized as an elemen ...

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

I am faced with an issue in my code where I am attempting to retrieve the path of my page within the getServerSideProps function. However, I have encountered a problem as the type of params is currently an object. How can I convert this object into a stri ...

Utilizing nested services for enhanced functionality

I'm facing an issue with my folder structure: . ├── lib/ │ └── dma/ │ ├── modules/ │ │ └── cmts/ │ │ ├── cmts.module.ts │ │ └── cmts.service.ts │ └┠...

Struggling to figure out how to change the display when navigating between different routes

I've been struggling for the past 3 hours trying to switch between routes. Let me explain further: Server Template HTML: <!-- I want the first div to display when the component opens, but disappear and show router-outlet when a button is clicked. ...

Angular route permissions and safety

Exploring the world of Angular has introduced me to its intricate routing mechanics and the use of routing guards for authorization on different routes. However, I can't help but feel like this guard mechanic may not be enough to fully secure my web s ...

Guide to utilizing Sheet Modal in Ionic 5

In the documentation for Ionic version %, there is a showcase of the sheet modal in mobile view but the code examples do not include it. If you want to learn how to use the Sheet Modal feature, you can check out the source code under the Mobile View sectio ...

The ng-bootstrap ngb-accordion component in Angular2 is not visible on the screen

Even though my HTML content loads successfully (displaying "HI", "title1", and "objName11" within span tags), the ngb-accordion component is not rendering on the view. I'm struggling to identify what I might have missed. There are no compilation or b ...

Steps to dynamically include a marker on a Google Maps component using HTTPGET in Angular 6

I am currently working on an Angular 6 application that involves integrating the Google Javascript API with AGM. So far, the map functions well except for dynamically adding markers using an http get request. Here is a snippet of the component.html: < ...

Receiving an error in Typescript when passing an object dynamically to a React component

Encountering a typescript error while attempting to pass dynamic values to a React component: Error message: Property 'title' does not exist on type 'string'.ts(2339) import { useTranslation } from "react-i18next"; import ...

Encountering difficulties in creating a custom Response type in Express.js with TypeScript

I have encountered a TypeScript error while trying to create my own custom Response interface by extending some methods instead of using the default Response type of Express.js: The last overload resulted in the following error: Argument of type '(r ...

The deprecation of DynamicComponentLoader in Angular 2 rc4 is now in effect

I am currently in the process of updating my Angular 2 application from beta.14 to rc.4. Upon moving to @angular/core, I encountered a deprecated warning related to DynamicComponentLoader. Can someone provide guidance on the new Class that should be used ...

Retrieve all items that match the ids in the array from the database

I'm having trouble receiving a list of items that match with my array of ids. Here's a snippet from the Angular component code: this.orderService.getSpecyficOrders(ids) .subscribe(orders => { ... Where ids is an array of [{_id : ID }, ...

how to navigate to a different page programmatically upon selecting an option in the side menu

ionic start mySideMenu sidemenu --v2 After creating a sidemenu using the code above, I implemented some login-logout functionality by storing user details in a localStorage variable named "userDetails". When clicking on the logout option from the sideme ...

Asynchronous jQuery operations using promises and finally functionality

I am attempting to interact with a REST api using jQuery's ajax feature. My goal is to return the Promise<Customer> object, but I am encountering an error stating that the property finally is missing. It used to work before, so I assume there h ...