2

I would like to know if there is a way to take the build files from an angular app and add it as part of another angular dist folder and launch that app inside a div in the parent app. Basically the micro frontend architecture.

I have looking at options like using window object and customising the main.ts or the index.html, but none of them seem to help.

Shyam Kumar
  • 21
  • 3
  • No. Have you considered deploying your apps as separate angular projects, that you could import as you would for 3rd party angular libraries? – Michael Kang Nov 19 '20 at 07:54
  • This can be done, as Angular (AFAIK) have full support of CustomElements. This will, however, require to use custom build pipeline instead of running builds from ng build, which will require some advanced Webpack knowledge (and it most won't be "prepare it once and it will work" issue - it will require changes over time). – TotallyNewb Nov 19 '20 at 07:58
  • @pixelbits, importing the libraries will impose redeploying the container application every time there is a change in any of the libraries it uses. – Shyam Kumar Nov 19 '20 at 16:38

1 Answers1

1

Does this other HTML page have angular included if so you can simply use the ng-include directive.

If not your best bet is iframe which is suboptimal

  • yes, we definitely do not want to go with Iframe. ng-include directive bundles at compile time, correct me if I am wrong :). I was looking at something which will integrate at runtime. – Shyam Kumar Nov 19 '20 at 16:40