Guide to embedding one Angular application into another Angular application

Question

Guide to embedding one Angular application into another Angular application

I am looking to integrate two angular applications, A and B. Specifically, I want to display the entire application A within a tab in application B. How can I accomplish this task effectively?

I would greatly appreciate any guidance on how to achieve this functionality. Is there a special tag in Angular that would facilitate this integration seamlessly?

angular typescript web

Answer 1

Answer №1

If you're facing a problem and need a solution, one approach could be to create the specific tag you require yourself. I successfully integrated Angular application A into Angular application B using a method known as web components or Angular elements. For more details, you can refer to resources like this article.

In the process, a tag called shiny-app-a is defined within application A, which is later imported and utilized in application B by referencing its JavaScript files.

The setup was tested in the following environment:

Angular CLI: 11.0.2
Node: 12.16.1
Operating System: win32 x64

To implement this integration, follow these steps:

1. Setting up Application A

Ensure that the package @angular/elements is also installed for this application.

1.1. Initializing Application A

$ ng new App-A
$ cd  App-A
$ ng add @angular/elements

1.2. Modifying app.modules.ts to define the web component/element and assign the tag shiny-app-a

My app.modules.ts file includes the following code:

import { BrowserModule } from '@angular/platform-browser';
// Add Injector
import { Injector, NgModule } from '@angular/core';
// Import createCustomElement
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
  BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(private injector: Injector){}

  ngDoBootstrap(){
    const el = createCustomElement(AppComponent, {injector:this.injector});
    // Define the new tag shiny-app-a here
    customElements.define('shiny-app-a', el);
  }
}

1.3. Building the Project

$ ng build --prod --output-hashing none

This command generates various files including runtime.js, main.js, and polyfills.js, located in [...]\App-A\dist\App-A folder.

1.4. Testing the Application

Run

$ ng serve

You should now see your newly created Application A in the browser.

2. Setting up Application B

Note: You do not need @angular/elements package for this application.

2.1. Initialization of Application B

$ ng new App-B

2.2. Moving Files from Application A to a Shared Folder accessible by Application B

In this example, I used [...]/src/assets folder for this purpose.

$ cd App-B/src/assets/

Next, copy the JavaScript files from Application A to this folder, such as:

[...]/App-A/dist/App-A/main.js
[...]/App-A/dist/App-A/polyfills.js
[...]/App-A/dist/App-A/runtime.js

2.3. Adapting Application B's Source Code to utilize the tag defined earlier

2.3.1 Making custom elements available in Application B in app.module.ts

Include CUSTOM_ELEMENTS_SCHEMA when setting up Application B. Here's an excerpt of my app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
// Import CUSTOM_ELEMENTS_SCHEMA
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add schemas
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.3.2 Loading External JavaScript in app.component.ts

The JavaScript files can be loaded from any source. In this case, they are fetched during OnInit() from [...]/assets folder. Below is how my app.component.ts file looks:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'App-B';

  ngOnInit() {
    this.loadScript('/assets/runtime.js');
    this.loadScript('/assets/main.js');
    this.loadScript('/assets/polyfills.js');
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

2.3.3 Implementing the Tag in app.component.html

Replace the existing content in app.component.html with just:

<shiny-app-a></shiny-app-a>

2.4. Testing the Integration

Run

$ ng serve

Now, you should be able to view Application A seamlessly embedded within Application B in the browser.

Answer 2

If you're facing a problem and need a solution, one approach could be to create the specific tag you require yourself. I successfully integrated Angular application A into Angular application B using a method known as web components or Angular elements. For more details, you can refer to resources like this article.

In the process, a tag called shiny-app-a is defined within application A, which is later imported and utilized in application B by referencing its JavaScript files.

The setup was tested in the following environment:

Angular CLI: 11.0.2
Node: 12.16.1
Operating System: win32 x64

To implement this integration, follow these steps:

1. Setting up Application A

Ensure that the package @angular/elements is also installed for this application.

1.1. Initializing Application A

$ ng new App-A
$ cd  App-A
$ ng add @angular/elements

1.2. Modifying app.modules.ts to define the web component/element and assign the tag shiny-app-a

My app.modules.ts file includes the following code:

import { BrowserModule } from '@angular/platform-browser';
// Add Injector
import { Injector, NgModule } from '@angular/core';
// Import createCustomElement
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
  BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(private injector: Injector){}

  ngDoBootstrap(){
    const el = createCustomElement(AppComponent, {injector:this.injector});
    // Define the new tag shiny-app-a here
    customElements.define('shiny-app-a', el);
  }
}

1.3. Building the Project

$ ng build --prod --output-hashing none

This command generates various files including runtime.js, main.js, and polyfills.js, located in [...]\App-A\dist\App-A folder.

1.4. Testing the Application

Run

$ ng serve

You should now see your newly created Application A in the browser.

2. Setting up Application B

Note: You do not need @angular/elements package for this application.

2.1. Initialization of Application B

$ ng new App-B

2.2. Moving Files from Application A to a Shared Folder accessible by Application B

In this example, I used [...]/src/assets folder for this purpose.

$ cd App-B/src/assets/

Next, copy the JavaScript files from Application A to this folder, such as:

[...]/App-A/dist/App-A/main.js
[...]/App-A/dist/App-A/polyfills.js
[...]/App-A/dist/App-A/runtime.js

2.3. Adapting Application B's Source Code to utilize the tag defined earlier

2.3.1 Making custom elements available in Application B in app.module.ts

Include CUSTOM_ELEMENTS_SCHEMA when setting up Application B. Here's an excerpt of my app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
// Import CUSTOM_ELEMENTS_SCHEMA
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add schemas
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.3.2 Loading External JavaScript in app.component.ts

The JavaScript files can be loaded from any source. In this case, they are fetched during OnInit() from [...]/assets folder. Below is how my app.component.ts file looks:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'App-B';

  ngOnInit() {
    this.loadScript('/assets/runtime.js');
    this.loadScript('/assets/main.js');
    this.loadScript('/assets/polyfills.js');
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

2.3.3 Implementing the Tag in app.component.html

Replace the existing content in app.component.html with just:

<shiny-app-a></shiny-app-a>

2.4. Testing the Integration

Run

$ ng serve

Now, you should be able to view Application A seamlessly embedded within Application B in the browser.

Answer 3

Answer №2

If you're looking to implement MICRO front ends, consider developing Application A as an Angular custom element using Angular Elements (a type of web component). The end result will be a script that can be loaded into Application B. Simply insert the specified selector from when you created the custom element in Micro App B wherever you want to display App A.

To learn more about Micro Front Ends and Angular Elements, check out this resource.

Avoid using iframes, as they can be quite challenging to manage. To expand your understanding, take some time to explore well-written blogs on implementing Micro Front Ends with Angular.

Answer 4

If you're looking to implement MICRO front ends, consider developing Application A as an Angular custom element using Angular Elements (a type of web component). The end result will be a script that can be loaded into Application B. Simply insert the specified selector from when you created the custom element in Micro App B wherever you want to display App A.

To learn more about Micro Front Ends and Angular Elements, check out this resource.

Avoid using iframes, as they can be quite challenging to manage. To expand your understanding, take some time to explore well-written blogs on implementing Micro Front Ends with Angular.

Answer 5

Answer №3

According to Akshay's suggestion, one option is to utilize Angular Elements to showcase your application A as a custom element that can be utilized in application B.

Specifically in your situation, the goal is to expose your AppComponent as a custom element.

Answer 6

According to Akshay's suggestion, one option is to utilize Angular Elements to showcase your application A as a custom element that can be utilized in application B.

Specifically in your situation, the goal is to expose your AppComponent as a custom element.

Guide to embedding one Angular application into another Angular application

Answer №1

1. Setting up Application A

1.1. Initializing Application A

1.2. Modifying app.modules.ts to define the web component/element and assign the tag shiny-app-a

1.3. Building the Project

1.4. Testing the Application

2. Setting up Application B

2.1. Initialization of Application B

2.2. Moving Files from Application A to a Shared Folder accessible by Application B

2.3. Adapting Application B's Source Code to utilize the tag defined earlier

2.4. Testing the Integration

Answer №2

Answer №3

Similar questions

Having trouble launching myapp on the Android Studio emulator for Ionic 3

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Issue encountered when trying to redirect after user creation on the backend

Guide to implementing a universal animated background with Angular components

Tips for transforming Http into HttpClient in Angular 5 (or higher than 4.3)

When trying to use the exported Ionic 3 class in TypeScript, the error "Cannot find name 'ClassName'" occurs

Distinguishing keyboard and mouse events while focusing in React app

Discover the Magic of Angular 8 and Bootstrap 4 Tooltips

fill the designated column in accordance with the specific criteria

The Angular Material Progress spinner and Progress bar fail to display

Is there a way to resolve the issue of retrieving the processed value directly in NestJS's @OnEvent function?

Discovering the quantity of items with a specific value in Angular 8

Filtering a key-value pair from an array of objects using Typescript

Exploring the power of TypeScript strictNullChecks with array manipulation

What are the best strategies to troubleshoot issues during NPM Install?

Utilizing npm to execute scripts stored in a dedicated file

To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

Is there a method to define an 'internal' property within a TypeScript type?

How can I use Angular to download the HTML content of a component when a button is clicked?

The method Office.context.mailbox.item.internetHeaders.setAsync has not been configured