user1748379
user1748379

Reputation: 53

Angular multiple projects

I am doing a proof of concept with the following criteria:

enter image description here

  1. Allow each menu item to be in a different Bitbucket project.
  2. Build a single component without breaking the others.
  3. The components can talk to each other.
  4. If one of the components updates, all applications automatically have to see the last version of this component.
  5. All teams will be using the following versions:
    • Angular CLI: 7.0.7
    • Node: 10.13.0
    • Angular: 7.0.4

I made an example using Angular elements, extending the HTML.
Each angular team makes its deploy by generating a JavaScript file (team1.js, team2.js, team3.js) by registering its tag.

Example:

<team1> </ team1>  customElements.define("team1", ....); 
<team2> </ team2>  customElements.define("team2", ....); 
<team3> </ team3>  customElements.define("team3", ....);

The main Angular application, which has the menu, imports the JavaScript files (team1.js, team2.js, team3.js) and, when clicking on each menu, the tag is dynamically created inside the div main.

menu team1 >> this.renderer.createElement ("team1")
menu team2 >> this.renderer.createElement ("team2")
menu team3 >> this.renderer.createElement ("team3")

If any team needs to access a webservice to populate a table for example, the table is rendered before.
So I do the request in the webservice and then I create the table tag dynamically and I pass the parameter to popular.
In an Angular project it works normally without this need. But with Angular elements I just got that way:

this.data = data returned from webservice
const element = this.renderer.createElement ("component-table");
this.renderer.setProperty (element, "data", this.data);

All this works, but I find it difficult to work with createElement.

I could make this webservice request in the main project and go through parameter:

<team1 data = "data"> </ team1>

With this for all requests to the webservice would be in the main project and all teams would have to code in this project.

  1. Are there other possibilities?
  2. Can you keep doing it that way, but in a less complicated way?

Upvotes: 2

Views: 4084

Answers (0)

Related Questions