Angular Mirco-Frontend using Single SPA

on

Angular Mirco-Frontend using Single SPA



Single SPA 

Single SPA is a JavaScript framework for building micro-frontends, enabling multiple SPAs to coexist on a single web page, facilitating code reusability and independent deployment cycles. 

Steps of creating an angular micro frontends using single SPA

 

To set up your first micro frontend with Angular using Single SPA, follow these steps:

1.    Install the Single SPA CLI globally:


After installation, create your first microfrontend. While Single SPA supports various JavaScript libraries, we'll create an Angular microfrontend. Use the following command in your terminal.

2. Create a new project by running:

 


 

3.    Follow the prompts to configure your project:

  •  Directory for new project: Enter your desired directory name (e.g., testProject).
  • Select type to generate: Choose single-spa root config for the initial project setup.
  • Choose package manager: Select npm for Angular projects.
  • Use Typescript: Answer y.
  • Use single-spa Layout Engine: Optionally select Y or N based on your preference.
  • Organization name: Enter your organization name or any desired identifier.


3.       A 4. After completion, navigate to the root directory of your project and install dependencies:

 




5.    Start the project:

 




   View your project in the browser by opening http://localhost:9000/. 

  You should see the application running.



 After setting up the root configuration, follow these steps to create Angular microfrontends:

1.    Navigate to the directory created for your project.

2.    Run the following command to create an Angular microfrontend:

3.    When prompted, provide the following information:

4.    Directory for new project: Leave it blank as the root directory is already created.

5.    Select type to generate: Choose single-spa application / parcel.

6.    Follow the remaining steps as mentioned during the root configuration creation process.

7.    After successful installation, your Angular microfrontends will be available inside the root directory.

To make your Angular microfrontend functional within the Single SPA architecture, 

follow these steps:

 

Step 1: Open microfrontend-layout.html and make the following changes:

  • Inside the <route> tag, add the route path to your newly created microfrontend.
 


Step 2: Open index.ejs and add the location where the app is hoisted inside the import map. Initially, it might be your localhost, but in production, it will be your deployed server location.




 For Angular apps, modify app-routing.module.ts:

  • Add the providers array in the @NgModule decorator.
  • Ensure to include EmptyRouteComponent in the routes array for fallback pages.

 



Additionally, enable the zone script in index.ejs.

         

 

Final Step:

1.    In the terminal of the newly created Angular microfrontend app, run:



 

2.    If any errors occur, run npm install, then rerun the command.

3.    Open your browser and navigate to the URL path mentioned in microfrontend-layout.html.

  


Single SPA — Utility using Angular

 

To achieve simple data transfer between two microfrontends in Single SPA using a utility module, follow these steps:

1.    Assuming you have already created multiple microfrontends (MFs) using Single SPA.

2.    Create a utility module using the create-single-spa command. When prompted, select the following options:

  • Organization name: Enter your organization name or any desired identifier.
  • Project name: Provide a name for your utility module.

  • Directory for new project: Choose a directory or leave it blank to create the utility module in the current directory.
  • Select type to generate: Choose single-spa utility module.

Follow the prompts to complete the creation of the utility module.

   
Once the utility module is created, you can use it to facilitate data transfer between your microfrontends within the Single SPA architecture.




 Now we have the utility module created, but still configuration required so that our Micro-frontends (MFs) can recognize as a known module.

We already have created two MFs named as app1 & app2 and trying achieve passing data from app2 -> to -> app1.

And as in the below image I have added “behavioursubject” from rxjs and few simple code inside the created utility file i.e — isu-utility.js.




 To achieve communication between microfrontends (MFs) in Single SPA, follow these steps:

 

Step 1: Configuration in app2

    1.    Create an extra.d.ts file in the app level of app2 to bypass Angular's compiler. For example, create extramodule.d.ts and add the following code:



    2.    Inform webpack to include the external utility module by adding the followingcode in extra-webpack.config.js in app2:



     3.  In the HTML file of app2 (app2.component.html), add:




 Step 2: Configuration in app1

1.    Repeat the same steps for app1 (create extramodule.d.ts and extraweback.config.js).



2.    \In the TypeScript file of app1 (app1.component.ts), subscribe to the value emitted from app2:



3.    In the HTML file of app1 (app1.component.html), display the received value:

 

    By following these steps, you can achieve communication between micro-frontends in Single SPA by using a utility module.

Comments

Post a Comment