how to embed an angular app into another app?

by

UPDATE 2020

You can also use the new Webpack 5 Module federation.

following examples show how to use module federation with Angular and other technologies.

Original answer

I’ve been very busy with the topic lately, because many have the same problem again and again (me, of course). Nowadays, you often hear the concept of micro-frontends. The concept is about designing the frontend to be extensible and scalable. Especially in the time when many companies have both Angular and React and Vue developers.
The following approaches came out of my research:

Links :

You can create your new app and have a hyperlink from your legacy app. (You must have a page reload when you switch beetween the both apps.)

Iframes :

a Software architect builded a meta router to deal with iframes and single page application:
Take a look at this:

Metaframeworks:

Metaframeworks allow you to have a communication beetween differents apps builded using differents frameworks:
here some example of metaframeworks for microfrontend purposes.

Web Components i.e Angular elements:

In order to deal with npm packages you can use as the other answerer mentioned the concept of Angular elements. You have to create a shell app and another independently apps that will be registred as elements in your shell app.
Take a look at this example.: Building micro frontends — angular elements

Mosaiq: Layout service

The online shop Zalando faced to the same problem and created a framework in order to deal with the problem:

Espacially the part Tailor.js, an open source system for the assembling the components on-demand on a backend layer written in Go.

PS. Tailor was inspired by BigPipe: Pipelining web pages for high performance from Facebook.

Plugin Architecture

A plugin architecture is an architecture that will call external code at certain points without knowing all the details of that code in advance.

This Stackoverflow question explain more about it in case of single page application:

Angular libraries

I Think a right way is to have in a app the same framework and the same version of this framework (e.g Angular 7). I will prefer to take a time a do a upgrade to a typescript version of angular. I hope the answer can be usefull for others.

Other Stackoverflow related Q & A:

Vue.JS – micro frontend approach
Micro frontend architecture advice

Micro frontends examples

List of ressources about micro frontends

https://github.com/billyjov/microfrontend-resources

More Related Contents:

  1. Difference between [ngClass] vs [class] binding
  2. NX MFE angular module federation not able to access remote micro front end
  3. Why am I seeing a dropdown like thingy and need to “open” my Angular component in chrome
  4. How do I share data between components in Angular 2?
  5. How can I use “*ngIf else”?
  6. How to group data in Angular 2?
  7. How to watch for form changes in Angular
  8. Ionic 2 Form goes up when keyboard shows
  9. RxJS: takeUntil() Angular component’s ngOnDestroy()
  10. Angular EXCEPTION: No provider for Http
  11. How can I conditionally disable the routerLink attribute?
  12. Cannot read property ‘push’ of undefined(…) in angular2
  13. ng: command not found while creating new project using angular-cli
  14. How to set value to form control in Reactive Forms in Angular
  15. Angular Reactive Forms with nested Form Arrays
  16. Reactive forms – disabled attribute
  17. Angular2: Insert a dynamic component as child of a container in the DOM
  18. How to install a specific version of Angular with Angular CLI?
  19. Using a directive to add class to host element [duplicate]
  20. How to trace routing in Angular 2?
  21. How to use Dependency Injection (DI) correctly in Angular2?
  22. Angular – What is the meanings of module.id in component?
  23. Create a reusable FormGroup
  24. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  25. Pass parameter into route guard
  26. Typescript dependency injection public vs private
  27. Merging http observables using forkjoin
  28. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  29. angular 6 warning for using formControlName and ngModel
  30. Angular 2 beta – Select not working (except in Chrome)

Leave a Comment