'Angular4 micro front-ends

We have an application composed by multiple services, where there is a edge service routing and load balancing all request to the individual services.

The backend REST API is deployed without problem on each server, but we have one single Angular4 application that references routes to modules that are developed in conjunction with this backend REST APIs.

If we release a new version of a service, we deploy the backend and the edge server starts to route to the new version.

The problem is that, we always need to redeploy the edge server in order to replace the full Angular4 application, because the specific module were updated.

We user angular-cli and it generates (and hashes) webpack bundles automatically. All our service modules are declared as npm dependencies in the main application and bundled as one.

How can we build, package and deploy the Angular4 application and our service modules, in order to make the main application reference external bundles and keep the routing working as expected?

Thanks in advance.

PS: the backend services and edge server are Spring Cloud applications using Netflix OSS.



Solution 1:[1]

Angular-CLI 1.6 will code split your lazy-loaded feature modules into separate chunks that could, in theory, be deployed independently. ng build. Note that this only works if you are lazy-loading the feature modules.

The alternate solution would be a micro front-end architecture. Although the idea is in it infancy it is still worth exploring:

https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

https://micro-frontends.org/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Edodso2