Circular dependencies Angular

01/30/2019 16:02 elmarcia#1

Hi, i don't know if someone can help me with this.. but i will try, i'm making a html 5 game with a friend with socket.io, p5 and angular as frontend, i know that angular is not the best for this but i know i will have to handle the same error in node.js.

Stage.ts

Code:

// Singleton have methods like addEntityToWorld, removeEntity, mainUpdate, 

   static get Instance() {
            if (Stage._instance === undefined) {
                Stage._instance = new Stage();
            }
            return Stage._instance;
        }

function mainRender(){
  this.mainPlayer.render();
  for(let e of this.entities){
  e.render();
 }
}

Player.ts

Code:

//have methods render(),update()
...
constructor(){
   this.weapon = new Weapon();
}
...

Weapon.ts

Code:

... 
function fire(){
...
Stage.Instance.addEntityToWorld(new Bullet(...))
...
}
...

So the circular dependency is: Stage.ts -> Player.ts -> Weapon.ts -> Stage.ts

I don't want to pass stage reference's to all the classes that use stage.js, it would destroy singleton pattern...

01/31/2019 09:50 Wurzelh�pfer#2

I hope I understood your problem correctly. Your problem could be solved, if you can refactor your code and create a new service, which covers both of your use cases or if you make your Stage.ts injectable.

Take a look here:
- [Only registered and activated users can see links. Click Here To Register...]

Good luck!

01/31/2019 11:51 JustinMind#3

I can't follow your code properly since some important parts are missing, but i assume you are not following the modularization principle. As Wurzelh�pfer suggested you should create a service (conventionally named as any.service.ts) and use the auto-injection done by Angular via the constructor:

Code:

constructor(private anyService: AnyService){}

To make this service available you have 2 options:
The prefered option (which makes services lazy-loadable aswell:
In your stage.service.ts

Code:

 \@Injectable({
   providedIn: 'root'
})

or alternatively call your service in the app.module.ts and your service keeps being a singleton.

EDIT:As i read your question once more my answer is not what you are looking for, i guess.
Can you share a simple example online, so we can reproduce it?

01/31/2019 18:44 elmarcia#4

Quote:
Originally Posted by JustinMind
I can't follow your code properly since some important parts are missing, but i assume you are not following the modularization principle. As Wurzelh�pfer suggested you should create a service (conventionally named as any.service.ts) and use the auto-injection done by Angular via the constructor:
Code:
constructor(private anyService: AnyService){}
To make this service available you have 2 options:
The prefered option (which makes services lazy-loadable aswell:
In your stage.service.ts
Code:
 \@Injectable({
   providedIn: 'root'
})
or alternatively call your service in the app.module.ts and your service keeps being a singleton.

EDIT:As i read your question once more my answer is not what you are looking for, i guess.
Can you share a simple example online, so we can reproduce it?

The thing is that the game was made in full ES6 javascript, so you can do something like this:
Stage.js

Code:

class Stage{

constructor(){
this._entities = new Set();
}

initGame(){
   this.addEntity(new Player(...));
}

static get Instance() {
        if (this._instance === undefined) {
            this._instance = new Stage();
        }
        return this._instance;
    }

addEntity(e){
    this._entities.add(e);
}

destroy(e){
    this._entities.delete(e);
}

Code:

class Bullet{
   ...
}

Code:

class Player{
  fire(){
  Stage.Instance.addEntity(new Bullet(...));
 }
}

So the main.js file will look something like this:

Code:

Stage.Instance.initGame();

In plain javascript Stage class is loaded, then it creates a Player Entity, and that player instance uses Stage singleton to create another Entity bullet.

So what i did is create an angular component, and a bunch of classes for every javascript file, translate them to ts and try to use singleton pattern, but the way that angular works won't let me do that.

Injecting a service in every class that uses the singleton will be my approach, wish me luck and thx for your suggestions.
:handsdown:

02/01/2019 16:18 Serraniel#5

#moved