single-spa-home-app
This is an AngularJS application example used as NPM package in single-spa-login-example-with-npm-packages in order to register an application. See the installation instructions there.
✍🏻 Motivation
This is an AngularJS application with a home view for embbed the app inside a root single-spa application.
How it works ❓
There are several files for the right working of this application and they are:
- src/routes.js
- src/singleSpaEntry.js
- package.json
- webpack.config.js
src/routes.js
;; angular ;
As this application will be mounted when browser url is /, we need to enable html5 mode into $locationProvider.
src/singleSpaEntry.js
;; ; ;; const domElementGetter = document; const ngLifecycles = ; const bootstrap = ngLifecycles;const mount = ngLifecycles;const unmount = ngLifecycles;
The ngLifecycles object contains all single-spa-angularjs methods for the single-spa lifecycle of this app. All used config is default one but the custom config of the domElementGetter option. It's assumed that an element with home-app id is defined in the index.html where this application will be mounted.
package.json
There are only two scripts in this project:
- build: for compile the application and build it as a libray in umd format
- lint: for run eslint in all project
webpack.config.js
const path = ;const webpack = ;const CleanWebpackPlugin = ; moduleexports = entry: 'src/singleSpaEntry.js' output: library: 'single-spa-home-app' libraryTarget: 'umd' filename: 'single-spa-home-app.js' path: path module: rules: test: /\.js?$/ exclude: path loader: 'babel-loader' 'eslint-loader' test: /\.html$/i loader: 'html-loader' node: fs: 'empty' resolve: modules: __dirname 'node_modules' plugins: cleanAfterEveryBuildPatterns: 'dist' maxChunks: 1 devtool: 'source-map' externals: devServer: historyApiFallback: true writeToDisk: true ;
The needed options for the right build of the application as library are defined in the output field.
The LimitChunkCountPlugin is used for disable chunks for build process. It's not necessary but I prefer keep whole application in one chunk as it will be embedded in another one.