Micro UI Angular issue in rendering element seperately

Question

I'm creating a micro-frontend application. I have a container application in Angular. When I am injecting the selectors of the child applications to the container application it's working. But I need to run the child application alone when I hit the URL. It becomes possible through specifying the Appcomponent in bootstrap (bootstrap: [AppComponent]). But while using micro frontend we use entryComponent. When I am trying to use both there is a conflict. Is there any way I can independently run each of the applications and still have the capability of micro UI concept?

 bootstrap: [],
  entryComponents:[
    ShareDetailsComponent
  ]
})
    export class AppModule {
          constructor(private injector: Injector){
          }
          ngDoBootstrap() {
            const myCustomElement = createCustomElement(ShareDetailsComponent, { injector: this.injector });
            customElements.define('app-share-details', myCustomElement);
          }
          
         }

Answer 1

Yes. It is possible. There are some ground rules that needs to be followed.

1. Make sure you are have 2 independent projects, at least in different folders
2. Have the Angular Element project/folder do the packaging and produce the output in your descried output and have it tested with simple HTML Page.

So, the general idea is when you are trying to create a micro frontend please ensure to have that working on a simple HTML page without angular JS on the page. This will ensure that your final code does not have any dependency on the underlining HTML code.

Then on your main project you can use the custom tag as a normal HTML tag by adding the required JS files to the initial index.html

I have an example angular elements project on my github page that demos how to have the angular elements tested on simple html pages and also has code to do the packaging.

https://github.com/reflexdemon/angular10-webcompponent