├── .gitignore
├── README.md
├── demo
    ├── index.html
    └── mfe_logo.png
├── package-lock.json
├── package.json
├── projects
    ├── first
    │   ├── first.mfe.ts
    │   ├── package.json
    │   └── tsconfig.json
    ├── host
    │   ├── host.mfe.ts
    │   ├── package.json
    │   └── tsconfig.json
    ├── second
    │   ├── package.json
    │   ├── second.mfe.ts
    │   └── tsconfig.json
    └── shared
    │   ├── package.json
    │   ├── shared.mfe.ts
    │   └── tsconfig.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ![Micro Frontends Logo](demo/mfe_logo.png) Angular Micro Frontends
 2 | 
 3 | ## Pure Angular toolchain without 3rd party
 4 | 
 5 | Example repository and boilerplate to build *__real micro frontends__* with angular.
 6 | 
 7 | ### How this repository differs from the examples in the WWW?
 8 | 
 9 | > Micro Frontends in its essence means being able to <br> build, compile, load and use frontends that work **independently**. <br>
10 | It **must be** possible to include micro frontends on runtime without configuration change. <br>
11 | This also means that including a micro frontend **must not** involve recompilation <br>
12 | > 
13 | > Otherwise it is just lazy loading with some overhead. <br>
14 | > But since we all live in a free world, everyone can call all the stuff however one wants to. 
15 | 
16 | Enjoy it. Or not. It's up to you.
17 | 
18 | ## How does all this work?
19 | 
20 | 1. We make use of the great [ng-packagr](https://github.com/ng-packagr/ng-packagr) package which kinda does all the job for us.
21 | 2. [Ng-packagr uses rollup under its hood](https://github.com/ng-packagr/ng-packagr/blob/master/src/lib/flatten/rollup.ts). 
22 |    This means by default, every dependency is excluded from the angular application we are building.
23 | 3. Ng-packagr outputs the application in FESM
24 |    ([also ESM, which is basically used to create the other formats](https://github.com/ng-packagr/ng-packagr/blob/master/src/lib/ng-package/entry-point/write-bundles.transform.ts#L46))
25 | 4. We could make use of UMD, but it's deprecated, so we stick with ESM.
26 | 
27 | A curcial step is to "link" the angular packages in fully compilation mode. (which is done in this repo as a postinstall step).
28 | It is also important to build your micro frontends with ivy. This is required, so a runtime compilation is not necessary anymore.
29 | 
30 | Basically
31 | 
32 | ```
33 | # Install packages
34 | npm ci
35 | # Run the live-server
36 | npm run serve
37 | # Build the shared library
38 | npm run shared
39 | # Build the host micro frontend
40 | npm run host
41 | ```
42 | 
43 | So you just build the host application (sometimes called "shell")
44 | 
45 | *Now comes the part where you see what these micro frontends are of <br>
46 | and not like the examples you can find all over the WWW.*
47 | 
48 | 
49 | ```
50 | # Keep your browser with index.html open!
51 | # Build the first micro frontend
52 | npm run first
53 | ```
54 | 
55 | Now type in your browser console
56 | ```js
57 | hostMfe.loadMfe("@angular-mfe/first");
58 | ```
59 | This will load the just compiled micro frontend bundle. <br>
60 | **and creates an instance of it, on runtime!**
61 | 
62 | You should see in the console following output
63 | ```html
64 | Registering MFE-ONE
65 | Total registered: 1
66 | ```
67 | 
68 | ‼️ Without any reload / refresh of your browser page you just added features to your application ‼️
69 | 
70 | And because people don't realize this small, but excellent possibility, <br>
71 | another round.
72 | 
73 | 1. Let's add again a feature to the **running** app.
74 | 2. Just **compile** the second MFE: `npm run second`
75 | 3. **Without reloading**, type in the console of the **running** app:
76 | ```js
77 | hostMfe.loadMfe("@angular-mfe/second");
78 | ```
79 | Which results the following output
80 | ```html
81 | Registering MFE-TWO
82 | Total registered: 2
83 | ```
84 | 
85 | Take a break and think about it. 
86 | 
87 | ### Drawbacks
88 | 
89 | This approach requires a bit more knowledge in [importmaps](https://github.com/WICG/import-maps) which landed in Chrome 89, but <br>
90 | 1. The angular packages are published in partially compilation mode. For this approach the fully compilation is required. This is done by using `@babel/cli` together with the `@angular/compiler-cli/linker/babel` plugin
91 | 2. rxjs does not provide FESM formats and somehow bugs with the exports, so we make use of skypack (Thank you folks!)
92 | 3. ESM cannot be loaded from the filesystem, therefore we need to start a local webserver (e.g. live-server)
93 | 4. FESM2020 is not compatible out of the box with zone.js when using `async await`. Therefore FESM2015 bundles are used to avoid issues. Thanks @petebacondarwin for this [crucial information](https://github.com/angular/angular/issues/43716#issuecomment-934628526)  
94 | 
95 | Cheers
96 | 
97 | flash :zap:
98 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Micro Frontends with ESM</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <link rel="icon" type="image/x-icon" href="mfe_logo.png">
 8 | </head>
 9 | <body>
10 | 	<host-mfe></host-mfe>
11 | </body>
12 | 	<script type="importmap">
13 | 		{
14 | 			"imports": {
15 | 				"rxjs": "https://cdn.skypack.dev/rxjs",
16 | 				"rxjs/operators": "https://cdn.skypack.dev/rxjs/operators",
17 | 				"@angular/core": "/dist/core.js",
18 | 				"@angular/common": "/dist/common.js",
19 | 				"@angular/platform-browser": "/dist/platform-browser.js",
20 | 				"@angular-mfe/shared": "/dist/shared/fesm2015/angular-mfe-shared.mjs",
21 | 				"@angular-mfe/first": "/dist/first/fesm2015/angular-mfe-first.mjs",
22 | 				"@angular-mfe/second": "/dist/second/fesm2015/angular-mfe-second.mjs",
23 | 				"@angular-mfe/host": "/dist/host/fesm2015/angular-mfe-host.mjs"
24 | 			}
25 | 		}
26 | 	</script>
27 | 	<script type="module" src="https://cdn.skypack.dev/zone.js@0.11.4"></script>
28 | 	<script type="module">
29 | 		import {platformBrowser} from "@angular/platform-browser";
30 | 		import {ModuleMfeModule} from  "@angular-mfe/host";
31 | 
32 | 		platformBrowser().bootstrapModule(ModuleMfeModule);
33 | 	</script>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/demo/mfe_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flash-me/angular-micro-frontends/16c420009517d45d26504dd07cc1bb054d5dc1ed/demo/mfe_logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-micro-frontends",
 3 |   "version": "1.0.0",
 4 |   "author": {
 5 |     "email": "adem@simsek.dev",
 6 |     "name": "Adem Simsek"
 7 |   },
 8 |   "scripts": {
 9 |     "postinstall": "npm run linker:core && npm run linker:common && npm run linker:platformBrowser",
10 |     "linker:core": "babel node_modules/@angular/core/fesm2015/core.mjs -d dist --plugins=@angular/compiler-cli/linker/babel",
11 |     "linker:common": "babel node_modules/@angular/common/fesm2015/common.mjs -d dist --plugins=@angular/compiler-cli/linker/babel",
12 |     "linker:platformBrowser": "babel node_modules/@angular/platform-browser/fesm2015/platform-browser.mjs -d dist --plugins=@angular/compiler-cli/linker/babel",
13 |     "first": "ng-packagr -p projects/first/package.json -c projects/first/tsconfig.json",
14 |     "second": "ng-packagr -p projects/second/package.json -c projects/second/tsconfig.json",
15 |     "shared": "ng-packagr -p projects/shared/package.json -c projects/shared/tsconfig.json",
16 |     "host": "ng-packagr -p projects/host/package.json -c projects/host/tsconfig.json",
17 |     "first:watch": "npm run first -- -w",
18 |     "second:watch": "npm run second -- -w",
19 |     "shared:watch": "npm run shared -- -w",
20 |     "host:watch": "npm run host -- -w",
21 |     "serve": "live-server demo --mount=/dist:./dist --mount=/node_modules:./node_modules"
22 |   },
23 |   "browserslist": [
24 |     "Chrome > 89"
25 |   ],
26 |   "private": true,
27 |   "dependencies": {
28 |     "@angular/compiler": "~13.2.4",
29 |     "@angular/core": "~13.2.4",
30 |     "@angular/platform-browser": "~13.2.4"
31 |   },
32 |   "devDependencies": {
33 |     "@angular/compiler-cli": "~13.2.4",
34 |     "@babel/cli": "^7.17.6",
35 |     "live-server": "1.2.1",
36 |     "ng-packagr": "~13.2.1",
37 |     "typescript": "~4.4.4"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/projects/first/first.mfe.ts:
--------------------------------------------------------------------------------
 1 | import {SharedMfe, SharedMfeModule} from '@angular-mfe/shared';
 2 | import {Component, NgModule} from '@angular/core';
 3 | 
 4 | @Component({
 5 |   selector: 'first-mfe',
 6 |   template: `
 7 |     <p>First Angular Micro Frontend</p> 
 8 |     <p>
 9 |       <shared-component></shared-component>
10 |     </p>
11 |   `
12 | })
13 | export class EntryComponent {
14 |   constructor(private sharedMfe: SharedMfe) {
15 |     sharedMfe.registerMfe('MFE-ONE', EntryComponent);
16 |   }
17 | }
18 | 
19 | @NgModule({
20 |   declarations: [EntryComponent],
21 |   imports: [SharedMfeModule]
22 | })
23 | export class FirstMfeModule {
24 | }
25 | 
26 | export const ngModule = FirstMfeModule;
27 | 


--------------------------------------------------------------------------------
/projects/first/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/package.schema.json",
 3 |   "name": "@angular-mfe/first",
 4 |   "version": "1.0.0",
 5 |   "ngPackage": {
 6 |     "dest": "../../dist/first",
 7 |     "lib": {
 8 |       "entryFile": "./first.mfe.ts"
 9 |     },
10 |     "deleteDestPath": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/projects/first/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ES2015",
 5 |     "declaration": true,
 6 |     "inlineSources": true,
 7 |     "types": [],
 8 |     "lib": [
 9 |       "dom",
10 |       "es2018"
11 |     ]
12 |   },
13 | 	"files": [
14 | 		"first.mfe.ts"
15 | 	],
16 | 	"angularCompilerOptions": {
17 | 		"enableIvy": true,
18 | 		"compilationMode": "full",
19 |     "skipTemplateCodegen": false,
20 |     "strictMetadataEmit": true,
21 |     "enableResourceInlining": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/projects/host/host.mfe.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Component,
 3 |   createNgModuleRef,
 4 |   Injector,
 5 |   NgModule,
 6 |   ViewChild,
 7 |   ViewContainerRef
 8 | } from '@angular/core';
 9 | import {BrowserModule} from '@angular/platform-browser';
10 | import {SharedMfeModule} from '@angular-mfe/shared';
11 | 
12 | @Component({
13 |   template: `
14 |     <h1>Host MFE</h1>
15 |     <ng-container #vc></ng-container>
16 |   `,
17 |   selector: 'host-mfe'
18 | })
19 | export class HostMfeComponent {
20 |   @ViewChild('vc', {read: ViewContainerRef})
21 |   vc: ViewContainerRef;
22 | 
23 | 
24 |   constructor(readonly injector: Injector) {
25 |     (<any>window).hostMfe = this;
26 |   }
27 | 
28 |   /**
29 |    * Creates a components and inserts it into the container
30 |    * @param path Path to the angular mfe
31 |    */
32 |   loadMfe(path: string): void {
33 |     import(path).then(mfe =>
34 |       this.vc.createComponent(
35 |         createNgModuleRef(mfe.ngModule, this.injector)
36 |           .componentFactoryResolver
37 |           .resolveComponentFactory(mfe.EntryComponent)
38 |       )
39 |     )
40 |   }
41 | }
42 | 
43 | @NgModule({
44 |   declarations: [HostMfeComponent],
45 |   imports: [BrowserModule, SharedMfeModule],
46 |   bootstrap: [HostMfeComponent]
47 | })
48 | export class ModuleMfeModule {
49 | }
50 | 


--------------------------------------------------------------------------------
/projects/host/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/package.schema.json",
 3 |   "name": "@angular-mfe/host",
 4 |   "version": "1.0.0",
 5 |   "ngPackage": {
 6 |     "dest": "../../dist/host",
 7 |     "lib": {
 8 |       "entryFile": "./host.mfe.ts"
 9 |     },
10 |     "deleteDestPath": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/projects/host/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ES2015",
 5 |     "declaration": true,
 6 |     "inlineSources": true,
 7 |     "types": [],
 8 |     "lib": [
 9 |       "dom",
10 |       "es2018"
11 |     ]
12 |   },
13 | 	"files": [
14 | 		"host.mfe.ts"
15 | 	],
16 | 	"angularCompilerOptions": {
17 | 		"enableIvy": true,
18 | 		"compilationMode": "full",
19 |     "skipTemplateCodegen": false,
20 |     "strictMetadataEmit": true,
21 |     "enableResourceInlining": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/projects/second/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/package.schema.json",
 3 |   "name": "@angular-mfe/second",
 4 |   "version": "1.0.0",
 5 |   "ngPackage": {
 6 |     "dest": "../../dist/second",
 7 |     "lib": {
 8 |       "entryFile": "./second.mfe.ts"
 9 |     },
10 |     "deleteDestPath": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/projects/second/second.mfe.ts:
--------------------------------------------------------------------------------
 1 | import {SharedMfe, SharedMfeModule} from '@angular-mfe/shared';
 2 | import {Component, NgModule} from '@angular/core';
 3 | 
 4 | @Component({
 5 |   selector: 'second-mfe',
 6 |   template: 'Second Angular Micro Frontend'
 7 | })
 8 | export class EntryComponent {
 9 |   constructor(private sharedMfe: SharedMfe) {
10 |     sharedMfe.registerMfe('MFE-TWO', EntryComponent);
11 |   }}
12 | 
13 | @NgModule({
14 |   declarations: [EntryComponent],
15 |   imports: [SharedMfeModule]
16 | })
17 | export class SecondMfeModule {
18 | }
19 | 
20 | export const ngModule = SecondMfeModule;
21 | 


--------------------------------------------------------------------------------
/projects/second/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ES2015",
 5 |     "declaration": true,
 6 |     "inlineSources": true,
 7 |     "types": [],
 8 |     "lib": [
 9 |       "dom",
10 |       "es2018"
11 |     ]
12 |   },
13 | 	"files": [
14 | 		"second.mfe.ts"
15 | 	],
16 | 	"angularCompilerOptions": {
17 | 		"enableIvy": true,
18 | 		"compilationMode": "full",
19 |     "skipTemplateCodegen": false,
20 |     "strictMetadataEmit": true,
21 |     "enableResourceInlining": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/projects/shared/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/package.schema.json",
 3 |   "name": "@angular-mfe/shared",
 4 |   "version": "1.0.0",
 5 |   "ngPackage": {
 6 |     "dest": "../../dist/shared",
 7 |     "lib": {
 8 |       "entryFile": "./shared.mfe.ts"
 9 |     },
10 |     "deleteDestPath": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/projects/shared/shared.mfe.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Injectable, NgModule, Type} from '@angular/core';
 2 | 
 3 | @Injectable({providedIn: 'platform'})
 4 | export class SharedMfe {
 5 |   private registeredMfes = new Map<string, Type<any>>()
 6 | 
 7 |   public registerMfe(name: string, type: Type<any>) {
 8 |     console.log(`Registering ${name}`)
 9 |     this.registeredMfes.set(name, type);
10 | 
11 |     console.log(`Total registered: ${this.registeredMfes.size}`)
12 |   }
13 | }
14 | 
15 | @Component({template: 'Shared Component', selector: 'shared-component'})
16 | export class SharedComponent { }
17 | 
18 | @NgModule({
19 |   declarations: [SharedComponent],
20 |   exports: [SharedComponent]
21 | })
22 | export class SharedMfeModule { }
23 | 


--------------------------------------------------------------------------------
/projects/shared/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ES2015",
 5 |     "declaration": true,
 6 |     "inlineSources": true,
 7 |     "types": [],
 8 |     "lib": [
 9 |       "dom",
10 |       "es2018"
11 |     ]
12 |   },
13 | 	"files": [
14 | 		"shared.mfe.ts"
15 | 	],
16 | 	"angularCompilerOptions": {
17 | 		"enableIvy": true,
18 | 		"compilationMode": "full",
19 |     "skipTemplateCodegen": false,
20 |     "strictMetadataEmit": true,
21 |     "enableResourceInlining": true
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ],
21 | 		"paths": {
22 | 			"@angular-mfe/shared": [
23 | 				"./dist/shared"
24 | 			],
25 | 			"@angular-mfe/shared/*": [
26 | 				"./dist/shared/*"
27 | 			]
28 | 		}
29 | 	},
30 |   "angularCompilerOptions": {
31 |     "fullTemplateTypeCheck": true,
32 |     "strictInjectionParameters": true
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------