--- title: How to Build a Single-Spa Angular Application [with Code Examples] description: How to build a single-spa Angular app so your frameworks can work together and deploy Micro Frontends independently. Full tutorial with code examples! image: https://www.bitovi.com/hubfs/How%20to%20Build%20a%20Single-Spa%20Angular%20Application%20%5Bwith%20Code%20Examples%5D.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | January 18, 2023 # How to Build a Single-Spa Angular Application [with Code Examples] How to build a single-spa Angular app so your frameworks can work together and deploy Micro Frontends independently. Full tutorial with code examples! ![Adrian Ferguson](https://www.bitovi.com/hubfs/adrian-ferguson.png) Adrian Ferguson Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) What if your frameworks could work together? Well, with a single-spa Angular application, they can! When you build a single-spa Angular application, painless migration, independent deployment, and effortless scalability are all in store. This post will teach you about the single-spa framework and how to build a single-spa Angular application. Let’s get started. ## What is Single-Spa? [Single-spa](https://single-spa.js.org/docs/getting-started-overview) is a front-end framework focused on Micro Frontends. It’s most commonly used with [Angular](https://www.bitovi.com/why-build-with-angular), AngularJS, [React](https://www.bitovi.com/blog/how-to-create-a-path-alias-in-webpack), and Ember, but it can be used with other frameworks. Single-spa is so appealing because it allows your frameworks to work together, meaning your Angular application can communicate and maintain state with your React application. But that’s not all! Other benefits include: - Ability to migrate existing code to the single-spa framework without rewriting code - Independent deployment of each Micro Frontend ## Create an Angular Application To set up a single-spa Angular application, you first need to create an Angular application by running the following code below in your terminal. ``` ng new micro-fe-billing --routing --prefix micro-fe-billing cd micro-fe-billing npm i single-spa-angular ``` You have created an Angular application, and the `npm i single-spa-angular` has edited a couple of your files, like `package.json` updating the scripts. A complete detailed list of what it’s done can be found on the [single-spa schematics](https://single-spa.js.org/docs/ecosystem-angular/#schematics). ## Add and Configure Webpack Now that your application has been created, you need to add a webpack config file and configure it in the recommended single-spa. Start by running the code below in the terminal to create your new file, and ensure it’s at the root of the project. ``` touch singlespa-webpack.config.js ``` Add this code to `singlespa-webpack.config.js`: ``` // singlespa-webpack.config.js const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default; module.exports = (angularWebpackConfig, options) => { return singleSpaAngularWebpack(angularWebpackConfig, options); } ``` ## Update package.json Scripts The next step in creating a single-spa Angular app is to update your `package.json` scripts. Within your `package.json`, you will update scripts to disable host checking, the port where you want your app to load, and the deployed URL used for the other Micro Frontends to communicate. ``` // package.json ... scripts { "ng": "ng", "build": "npm run build:single-spa", "start": "npm run serve:single-spa", "build:single-spa": "ng build --base-href /dist/app1 --output-hashing none", "serve:single-spa": "ng serve --disable-host-check --port 4207" ... } ``` ## Add and Configure main.single-spa.ts Next, create `main.single-spa.ts` in the src/ directory: ``` touch src/main.single-spa.ts ``` Add the following code block: ``` // main.single-spa.ts import { enableProdMode, NgZone } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { Router } from '@angular/router'; import { AppModule } from './app/app.module'; import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular'; import { ReplaySubject } from 'rxjs'; import { AppProps } from 'single-spa'; import { setPublicPath } from "systemjs-webpack-interop"; export const singleSpaPropsSubject = new ReplaySubject(1) export type SingleSpaProps = AppProps & { // Add any custom single-spa props you have to this type def // https://single-spa.js.org/docs/building-applications.html#custom-props } export const environment = { production: false }; if (environment.production) { enableProdMode(); } // This sets the name of your application that will be consumed when sharing data with other spa applications setPublicPath("@bitovi/micro-fe-billing"); const lifecycles = singleSpaAngular({ bootstrapFunction: singleSpaProps => { singleSpaPropsSubject.next(singleSpaProps); return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule); }, template: '', Router, NgZone, }); export const bootstrap = lifecycles.bootstrap; export const mount = lifecycles.mount; export const unmount = lifecycles.unmount; ``` The above line is the typical single-spa setup that you’ll see in most Angular single-spa applications. Our `main.single-spa.ts` helps create the browser environment for your application to run by checking the following: - Whether the app is in production mode - Adding the single-spa props for the application to behave as a single-spa application over a regular Angular application. ## Configure angular.json Once you’ve configured `main.single-spa.ts`, edit `angular.json` in the root directory. Add the following instructions for your `project` where you’ll have the name of your project `micro-fe-billing` under `architect`, then `build` ``` // angular.json ... "project": { "micro-fe-billing": { "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "outputPath": "dist/app1", "index": "src/index.html", "main": "src/main.single-spa.ts", "customWebpackConfig": { "path": "./singlespa-webpack.config.js" } ... }, } } } } ``` When you run your build command, you tell your project that it uses a custom webpack configuration with a path of `./singlespa-webpack.config.js.` The application will use `main` as the entry point and the build's output, `dist/app1`. ## Configure tsconfig.app.json Add the following to `tsconfig.app.json`. This tells the TypeScript configuration to build another TypeScript file `src/main.single-spa.ts`, so you need to include it in your `tsconfig.app.json` like this. ``` // tsconfig.app.json ... "files": [ "src/main.ts", "src/main.single-spa.ts", "src/polyfills.ts" ], ... ``` You are ready to build/serve your newly created single-spa Angular Micro Frontend application! ## Note: Ivy Compatibility Error You may encounter this error while building: `Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/Youbpack/src/ivy/index.js)` while building: ![single-spa1](https://www.bitovi.com/hs-fs/hubfs/single-spa1.png?width=694&height=270&name=single-spa1.png) This error is due to Ivy’s lack of support for building to Safari, which you’ll see if you open your `browserslistrc` . If you encounter this error, change your existing code to the code below: ``` // .browserslistrc # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries # For the full list of supported browsers by the Angular framework, please see: # https://angular.io/guide/browser-support # You can see what browsers Youre selected by your queries by running: # npx browserslist last 1 Chrome version last 1 Firefox version ``` There’s an open issue in single-spa to fix this, but your project will build for now with the fix above. ## Wrap Up ![single-spa spa](https://www.bitovi.com/hs-fs/hubfs/single-spa%20spa.png?width=350&height=294&name=single-spa%20spa.png) Congratulations! You’ve successfully created a single-spa Angular application. To view the example from this post, check out [this repository](https://github.com/Midknight56/micro-fe-billing) with everything you accomplished today. Now you can relax knowing your frameworks can work together, making migrations and deployments seamless. ### Single-spa not a day at the spa for you? Don’t worry! We have a dedicated team of Angular consultants eager to help take your project from vision to reality. Schedule your [free consultation call](https://www.bitovi.com/frontend-javascript-consulting/angular-consulting) to get started.   [![Tag for micro frontend](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) micro frontend ](https://www.bitovi.com/blog/topic/micro-frontend) Previous Post ![What Is Design? Insights From Our Product Design Team](https://www.bitovi.com/hs-fs/hubfs/What%20Is%20Design%3F%20Insights%20From%20Our%20Product%20Design%20Team.png?height=117&name=What%20Is%20Design%3F%20Insights%20From%20Our%20Product%20Design%20Team.png) [ What Is Design? Insights From Our Product Design Team ](https://www.bitovi.com/blog/what-is-design-insights-from-our-product-design-team)   Next Post ![Certified Kubernetes Admin Exam Survival Guide [from a CKA]](https://www.bitovi.com/hs-fs/hubfs/Certified%20Kubernetes%20Admin%20Exam%20Survival%20Guide%20%5Bfrom%20a%20CKA%5D.png?height=117&name=Certified%20Kubernetes%20Admin%20Exam%20Survival%20Guide%20%5Bfrom%20a%20CKA%5D.png) [ Certified Kubernetes Admin Exam Survival Guide [from a CKA] ](https://www.bitovi.com/blog/cka-certification-exam-survival-guide) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/how-to-build-a-single-spa-angular-application", "@type" : "WebPage", "description" : "How to build a single-spa Angular app so your frameworks can work together and deploy Micro Frontends independently. Full tutorial with code examples!" }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Adrian Ferguson" }, "dateModified" : "March 26, 2024, 4:21:15 PM", "datePublished" : "2023-01-18 16:10:08", "description" : "How to build a single-spa Angular app so your frameworks can work together and deploy Micro Frontends independently. Full tutorial with code examples!", "headline" : "How to Build a Single-Spa Angular Application [with Code Examples]", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/How%20to%20Build%20a%20Single-Spa%20Angular%20Application%20%5Bwith%20Code%20Examples%5D.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```