Search code examples
angulartypescriptnpmpackagemicroservices

In Angular, how do I convert a component into a microservice?


I need to create an Angular app with different microservices. There doesn't seem to be any clear tutorials on how to actually turn a component into a microservice. I tried this tutorial but it doesn't explain the packaging process. Is packaging a component into a microservice the same as packaging a library? Are they imported into a project the same way?

What is the best way to prepare a component so it can be consumed as a microservice?


Solution

  • First of all, it is wrong to use 'microservices' term here. 'Micro frontend' is the one you should be using.

    One possible solution would be to use Angular Elements / Web Components - the tutorial you linked mentions that.

    Once you properly build Angular Element - useful read, you will be provided with one .js file (you will have to merge few files into one file). After that is done, you import this .js file in your main application (wrapper application) and to use it you just have to call the selector you created. You can also pass values, services, and another things to it. Example:

    app.component.html

    <script src="micro1.js"></script>
    <script src="micro2.js"></script>
    <my-micro-app-one></my-micro-app-one>
    <my-micro-app-two [apiService]="apiService" [someValue]="someValue"></my-micro-app-two>
    

    This is the basic approach you should follow.