Bdtjtk

I'm pretty new in developing Angular (7), because I think about the architecture for a new large web project. So I play a little bit with the possible options, especially using a micro frontend.

I created two angular projects -> "micro-app-shell" and "micro-app-a".

The shell is the outer container of the web application, which manages several micro-apps.

I read some articals about micro apps with angular and want to try the custom-elements approach.

"micro-app-a"

excerpt of "app.module.ts"

@NgModule({

  declarations: [

    AppComponent,

    ClientAComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: ,

  schemas: [CUSTOM_ELEMENTS_SCHEMA],

  // bootstrap: [AppComponent]

  entryComponents: [

    ClientAComponent,

  ]

})

export class AppModule {



  constructor(private injector: Injector) {



  }



  ngDoBootstrap() {

    const appElement = createCustomElement(ClientAComponent, { injector: this.injector });

    customElements.define('client-a', appElement);

  }



}

"app.component.html"

<div style="text-align:center">

  <h1>

    Client A Micro App

  </h1>

</div> 

I build the application with following command:

ng build --output-hashing none --output-path C:/Dev/mdo_workspace/micro-app-test/micro-app-shell/src/assets/scripts

"micro-app-shell"

I added following to of index.html

 <script type="text/javascript" src="./assets/scripts/runtime.js"></script>

  <script type="text/javascript" src="./assets/scripts/polyfills.js"></script>

  <script type="text/javascript" src="./assets/scripts/styles.js"></script>

  <script type="text/javascript" src="./assets/scripts/vendor.js"></script>

  <script type="text/javascript" src="./assets/scripts/main.js"></script>

I extend the app.module.ts with schemas part

schemas: [CUSTOM_ELEMENTS_SCHEMA],

Now my questions/issues

1 a) When I uncomment in "micro-app-a" -> polyfills.js the zone.js import (import 'zone.js/dist/zone'; ) and run the "micro-app-shell" I get the error

Zone already loaded.

1 b) When I comment in "micro-app-a" -> polyfills.js the zone.js import (import 'zone.js/dist/zone'; ) and run the "micro-app-shell" I get the error

In this configuration Angular requires Zone.js

Wat is the right way to prevent this errors? Or can I irgnore it?

2) When I apply changes of question 1a and start the "micro-app-shell" I want to show the "micro-app-a" as custom element in app.comment.html like this:

<div>

  <client-a></client-a>

</div>

The content of "micro-app-shell" - "app.component.html" is shown but I get the error:

Failed to construct 'HTMLElement': Please use the 'new' operator,
this DOM object constructor cannot be called as a function.

I following samples like this:

https://www.softwarearchitekt.at/post/2018/05/04/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx
https://www.ngdevelop.tech/angular-elements/

Thanks a lot for your help in advance!

You check my sample project here
https://github.com/xmlking/angular-elements-in-angular-shell
I am still planing improve developer experience