├── src
    ├── assets
    │   ├── .gitkeep
    │   └── gateway.png
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   ├── environment.mflocal.ts
    │   └── environment.ts
    ├── app
    │   ├── components
    │   │   ├── error
    │   │   │   ├── error.component.html
    │   │   │   ├── error.component.scss
    │   │   │   ├── error.component.ts
    │   │   │   └── error.component.spec.ts
    │   │   └── navigation
    │   │   │   ├── navigation.component.ts
    │   │   │   ├── navigation.component.html
    │   │   │   ├── navigation.component.scss
    │   │   │   └── navigation.component.spec.ts
    │   ├── app.component.scss
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── apps.configuration.ts
    │   ├── app.module.ts
    │   ├── app.component.spec.ts
    │   ├── services
    │   │   └── component-loader-service
    │   │   │   └── component-loader.service.ts
    │   └── app-routing.module.ts
    ├── tsconfig.app.json
    ├── global.scss
    ├── tsconfig.spec.json
    ├── tslint.json
    ├── browserslist
    ├── index.html
    ├── test.ts
    ├── karma.conf.js
    ├── styles.scss
    ├── globals.ts
    ├── main.ts
    └── polyfills.ts
├── logo.png
├── mf_separation.png
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.e2e.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.json
├── .travis.yml
├── .gitignore
├── LICENSE
├── tools
    └── watch_dev.js
├── package.json
├── README.md
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marfusios/micro-frontend-gateway/HEAD/logo.png


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marfusios/micro-frontend-gateway/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/mf_separation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marfusios/micro-frontend-gateway/HEAD/mf_separation.png


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/assets/gateway.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marfusios/micro-frontend-gateway/HEAD/src/assets/gateway.png


--------------------------------------------------------------------------------
/src/app/components/error/error.component.html:
--------------------------------------------------------------------------------
1 | <div class="container">
2 | 
3 |   <div class="message-box">
4 |     <div class="message">{{message}}</div>
5 |   </div>
6 | 
7 | </div>
8 | 


--------------------------------------------------------------------------------
/src/app/components/error/error.component.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   padding: 20px;
 3 | }
 4 | 
 5 | .message-box {
 6 |   border: 1px solid indianred;
 7 | }
 8 | 
 9 | .message {
10 |   padding: 5px;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/environments/environment.mflocal.ts:
--------------------------------------------------------------------------------
1 | // import { name } from '../../../../app.config.json';
2 | 
3 | export const environment = {
4 |   production: false,
5 |   devModuleName: 'name',
6 |   devModulePrefixPath: 'http://localhost:4444'
7 | };
8 | 


--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | $textBaseColor: #333333;
 3 | $textSubHeaderColor: #666666;
 4 | $textDisabledColor: #999999;
 5 | 
 6 | $backgroundBaseColor: #ffffff;
 7 | $backgroundLightColor: #F6F7FC;
 8 | 
 9 | $primaryColor: #3949ab;
10 | $secondaryColor: #dcd04c;
11 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .top-panel {
 2 |   border-bottom: 1px solid #999999;
 3 |   padding-bottom: 10px;
 4 |   box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
 5 | }
 6 | 
 7 | .content-panel {
 8 |   padding-top: 20px;
 9 | }
10 | 
11 | h1 {
12 |   display: inline-block;
13 | }
14 | 
15 | .github {
16 |   position: absolute;
17 |   left: 10px;
18 |   top: 10px;
19 | }
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getTitleText()).toEqual('Welcome to micro-frontend-gateway!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/app/components/navigation/navigation.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-navigation',
 5 |   templateUrl: './navigation.component.html',
 6 |   styleUrls: ['./navigation.component.scss']
 7 | })
 8 | export class NavigationComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/components/navigation/navigation.component.html:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <ul>
3 |     <li><a routerLink="services/alpha" routerLinkActive="active">ALPHA service</a></li>
4 |     <li><a routerLink="services/beta" routerLinkActive="active">BETA service</a></li>
5 |     <li style="float:right"><a href="https://github.com/Marfusios/micro-frontend-gateway" target="_blank">About</a></li>
6 |   </ul>
7 | </div>
8 | 
9 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Gateway | Micro Frontend</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | 
14 |   <!-- Github button -->
15 |   <script async defer src="https://buttons.github.io/buttons.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "resolveJsonModule": true,
11 |     "emitDecoratorMetadata": true,
12 |     "experimentalDecorators": true,
13 |     "importHelpers": true,
14 |     "target": "es2015",
15 |     "typeRoots": [
16 |       "node_modules/@types"
17 |     ],
18 |     "lib": [
19 |       "es2018",
20 |       "dom"
21 |     ]
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="top-panel">
 2 | 
 3 |   <div style="text-align:center">
 4 |     <div class="github">
 5 |       <a class="github-button" href="https://github.com/marfusios/micro-frontend-gateway"
 6 |          data-size="large"
 7 |          aria-label="Star marfusios/micro-frontend-gateway on GitHub">Git repo</a>
 8 |     </div>
 9 |     <h1>
10 |       GATEWAY
11 |     </h1>
12 |     <span>to micro frontends</span>
13 |   </div>
14 | 
15 |   <app-navigation></app-navigation>
16 | 
17 | </div>
18 | 
19 | <div class="content-panel">
20 | 
21 |   <router-outlet></router-outlet>
22 | 
23 | </div>
24 | 
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { getApps } from './apps.configuration';
 3 | import { ComponentLoaderService } from './services/component-loader-service/component-loader.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-root',
 7 |   templateUrl: './app.component.html',
 8 |   styleUrls: ['./app.component.scss']
 9 | })
10 | export class AppComponent {
11 |   constructor(private _componentLoaderService: ComponentLoaderService) {
12 |     this.loadGlobalBundles();
13 |   }
14 | 
15 |   loadGlobalBundles() {
16 |     getApps().forEach(app => this._componentLoaderService.updateModule(app));
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js # Building with node js
 2 | node_js:
 3 |   - stable # Download the stable node version
 4 | 
 5 | # Blocklist
 6 | branches:
 7 |   except:
 8 |     - gh-pages # will be deployed to, no need to build it
 9 | 
10 | script:
11 |   - npm run build-deploy # Generates the deployment folder with built angular app and umd bundle
12 | 
13 | deploy:
14 |   provider: pages
15 |   skip_cleanup: true # Prevent travis from cleaning out the branch before the deploy occurs
16 |   github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
17 |   on:
18 |     branch: master # Build only from master
19 |   local_dir: deployment # Only copy the deployment content
20 | 


--------------------------------------------------------------------------------
/src/app/apps.configuration.ts:
--------------------------------------------------------------------------------
 1 | export interface AppConfiguration {
 2 |   title: string;
 3 |   name: string;
 4 |   path: string;
 5 |   url: string;
 6 |   devUrl?: string;
 7 | }
 8 | 
 9 | export function getApps(): AppConfiguration[] {
10 |   return [
11 |     {
12 |       title: 'MicroFrontend Alpha',
13 |       name: 'alpha',
14 |       path: 'alpha',
15 |       url: 'http://mkotas.cz/micro-frontend-alpha',
16 |       // devUrl: 'http://localhost:3333',
17 |     },
18 |     {
19 |       title: 'MicroFrontend Beta',
20 |       name: 'beta',
21 |       path: 'beta',
22 |       url: 'http://mkotas.cz/micro-frontend-beta',
23 |       // devUrl: 'http://localhost:4444',
24 |     },
25 |   ];
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/components/error/error.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input, OnInit} from '@angular/core';
 2 | import {ActivatedRoute} from '@angular/router';
 3 | 
 4 | @Component({
 5 |   selector: 'app-error',
 6 |   templateUrl: './error.component.html',
 7 |   styleUrls: ['./error.component.scss']
 8 | })
 9 | export class ErrorComponent implements OnInit {
10 | 
11 |   @Input()
12 |   public message: string;
13 | 
14 |   constructor(private activatedRoute: ActivatedRoute) {
15 |     this.activatedRoute.params.subscribe(params => {
16 |       const msgParam = params['msg'];
17 |       const msgDecoded = decodeURIComponent(msgParam);
18 |       this.message = msgDecoded;
19 |     });
20 |   }
21 | 
22 |   ngOnInit() {
23 |   }
24 | 
25 | }
26 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/app/components/error/error.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ErrorComponent } from './error.component';
 4 | 
 5 | describe('ErrorComponent', () => {
 6 |   let component: ErrorComponent;
 7 |   let fixture: ComponentFixture<ErrorComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ErrorComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ErrorComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/navigation/navigation.component.scss:
--------------------------------------------------------------------------------
 1 | @import "../../../global";
 2 | 
 3 | ul {
 4 |   list-style-type: none;
 5 |   margin: 0;
 6 |   padding: 0;
 7 |   overflow: hidden;
 8 |   background-color: transparent;
 9 | }
10 | 
11 | li {
12 |   float: left;
13 |   border-right:1px solid #bbb;
14 | }
15 | 
16 | li:last-child {
17 |   border-right: none;
18 | }
19 | 
20 | li a {
21 |   display: block;
22 |   color: $textBaseColor;
23 |   text-align: center;
24 |   padding: 14px 16px;
25 |   text-decoration: none;
26 | }
27 | 
28 | li a:hover:not(.active) {
29 |   background-color: #eee;
30 | }
31 | 
32 | .active {
33 |   background-color: $primaryColor;
34 |   color: $backgroundLightColor !important;
35 | }
36 | 
37 | .container {
38 |   margin-left: 10px;
39 |   margin-right: 10px;
40 | }
41 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false,
 7 |   devModuleName: '',
 8 |   devModulePrefixPath: ''
 9 | };
10 | 
11 | /*
12 |  * For easier debugging in development mode, you can import the following file
13 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
14 |  *
15 |  * This import should be commented out in production mode because it will have a negative impact
16 |  * on performance if an error is thrown.
17 |  */
18 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
19 | 


--------------------------------------------------------------------------------
/.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 | /deployment
 8 | 
 9 | # dependencies
10 | /node_modules
11 | 
12 | # profiling files
13 | chrome-profiler-events.json
14 | speed-measure-plugin.json
15 | 
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 | 
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 | 
33 | # misc
34 | /.sass-cache
35 | /connect.lock
36 | /coverage
37 | /libpeerconnection.log
38 | npm-debug.log
39 | yarn-error.log
40 | testem.log
41 | /typings
42 | 
43 | # System Files
44 | .DS_Store
45 | Thumbs.db
46 | 


--------------------------------------------------------------------------------
/src/app/components/navigation/navigation.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NavigationComponent } from './navigation.component';
 4 | 
 5 | describe('NavigationComponent', () => {
 6 |   let component: NavigationComponent;
 7 |   let fixture: ComponentFixture<NavigationComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ NavigationComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(NavigationComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Mariusz Kotas
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { AgGridModule } from 'ag-grid-angular';
 2 | 
 3 | import { NgModule } from '@angular/core';
 4 | import { BrowserModule } from '@angular/platform-browser';
 5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 6 | import { StoreModule } from '@ngrx/store';
 7 | 
 8 | import { AppRoutingModule } from './app-routing.module';
 9 | import { AppComponent } from './app.component';
10 | import { ErrorComponent } from './components/error/error.component';
11 | import { NavigationComponent } from './components/navigation/navigation.component';
12 | import { ComponentLoaderService } from './services/component-loader-service/component-loader.service';
13 | 
14 | @NgModule({
15 |   declarations: [
16 |     AppComponent,
17 |     ErrorComponent,
18 |     NavigationComponent,
19 |   ],
20 |   imports: [
21 |     BrowserModule,
22 |     BrowserAnimationsModule,
23 |     AppRoutingModule,
24 |     StoreModule.forRoot({}),
25 |     AgGridModule.withComponents([]),
26 |   ],
27 |   providers: [
28 |     ComponentLoaderService,
29 |   ],
30 |   bootstrap: [AppComponent]
31 | })
32 | export class AppModule {
33 | 
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'micro-frontend-gateway'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('micro-frontend-gateway');
27 |   });
28 | 
29 |   it('should render title in a h1 tag', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to micro-frontend-gateway!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/tools/watch_dev.js:
--------------------------------------------------------------------------------
 1 | // TODO: temporary solution
 2 | 
 3 | const spawn = require('child_process').spawn;
 4 | 
 5 | process.chdir('./src/gateway');
 6 | console.log('Changing working directory to ' + process.cwd());
 7 | 
 8 | const gatewayBuild = spawn('ng', ['serve', '--configuration=local']);
 9 | 
10 | gatewayBuild.stdout.on('data', function (data) {
11 |   console.log(data.toString());
12 | });
13 | 
14 | gatewayBuild.stderr.on('data', function (data) {
15 |   console.error(data.toString());
16 | });
17 | 
18 | gatewayBuild.on('exit', function (code) {
19 |   console.log('child process exited with code ' + code.toString());
20 | });
21 | 
22 | process.chdir('../../');
23 | console.log('Changing working directory to ' + process.cwd());
24 | 
25 | const packagrWatch = spawn('npm', ['run', 'package:watch']);
26 | 
27 | packagrWatch.stdout.on('data', function (data) {
28 |   console.log(data.toString());
29 | });
30 | 
31 | packagrWatch.stderr.on('data', function (data) {
32 |   console.error(data.toString());
33 | });
34 | 
35 | packagrWatch.on('exit', function (code) {
36 |   console.log('child process exited with code ' + code.toString());
37 | });
38 | 
39 | 
40 | const serverWatch = spawn('npm', ['run', 'server']);
41 | 
42 | serverWatch.stdout.on('data', function (data) {
43 |   console.log(data.toString());
44 | });
45 | 
46 | serverWatch.stderr.on('data', function (data) {
47 |   console.error(data.toString());
48 | });
49 | 
50 | serverWatch.on('exit', function (code) {
51 |   console.log('child process exited with code ' + code.toString());
52 | });
53 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | 
 3 | @import "global";
 4 | 
 5 | // AgGrid properties
 6 | $ag-icons-path: "~ag-grid-community/src/styles/ag-theme-balham/icons/";
 7 | 
 8 | $icon-color: #03a9f4;
 9 | $alt-icon-color: #03a9f4;
10 | $accent-color: #FFFFF1;
11 | 
12 | $header-height: 50px;
13 | $row-height: 40px;
14 | $row-border-width: 1px;
15 | $hover-color: cornsilk;
16 | 
17 | $ag-range-selected-color-1: rgb(250, 235, 215);
18 | $ag-range-selected-color-2: darken($ag-range-selected-color-1, 10%);
19 | $ag-range-selected-color-3: darken($ag-range-selected-color-1, 20%);
20 | $ag-range-selected-color-4: darken($ag-range-selected-color-1, 30%);
21 | 
22 | // Custom properties
23 | $scrollBarWidth: 13px;
24 | 
25 | * {
26 |   box-sizing: border-box;
27 | }
28 | 
29 | html {
30 |   height: 100%;
31 |   color: $textBaseColor;
32 |   background-color: $backgroundBaseColor;
33 |   font: 400 24px -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Open Sans', Arial, sans-serif;
34 |   text-rendering: optimizeLegibility;
35 | 
36 |   ::-webkit-scrollbar {
37 |     width: $scrollBarWidth;
38 |     height: $scrollBarWidth;
39 |   }
40 | 
41 |   ::-webkit-scrollbar-thumb {
42 |     background-color: rgba(50,50,50,0.25);
43 |     border: 2px solid transparent;
44 |     border-radius: 10px;
45 |     background-clip: padding-box;
46 |   }
47 | }
48 | 
49 | body {
50 |   font-size: 0.5833rem;
51 |   height: 100%;
52 |   margin: 0;
53 |   padding: 0;
54 | }
55 | 
56 | @import "~ag-grid-community/src/styles/ag-grid";
57 | @import "~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham";
58 | 


--------------------------------------------------------------------------------
/src/globals.ts:
--------------------------------------------------------------------------------
 1 | export const externals = [
 2 |   'ace-builds/src-noconflict/ace',
 3 |   'ace-builds/src-noconflict/theme-chrome',
 4 |   'ace-builds/src-noconflict/mode-html.js',
 5 |   'ace-builds/src-noconflict/mode-sql.js',
 6 |   'froala-editor/js/froala_editor.min.js',
 7 | ];
 8 | 
 9 | // function loadExternals() {
10 | //   const loadPromises: any[] = [];
11 | //   externals.forEach(script => loadPromises.push(loadScript(script)));
12 | 
13 | //   return Promise.all(loadPromises);
14 | // }
15 | 
16 | // function loadScript(path: string) {
17 | //   return new Promise((resolve, reject) => {
18 | //       // if (this.scripts[name].loaded) {
19 | //       //     resolve({script: name, loaded: true, status: 'Already Loaded'});
20 | //       // } else {
21 | //       const script = document.createElement('script') as any;
22 | //       script.type = 'text/javascript';
23 | //       script.src = path;
24 | 
25 | //       script.onload = () => {
26 | //         resolve({ script: name, loaded: true, status: 'Loaded' });
27 | //       };
28 | 
29 | //       script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
30 | //       document.getElementsByTagName('head')[0].appendChild(script);
31 | //       // }
32 | //   });
33 | // }
34 | 
35 | // loadExternals();
36 | 
37 | 
38 | // const ace = require('ace-builds/src-noconflict/ace');
39 | // console.log(ace);
40 | // import 'ace-builds/src-noconflict/theme-chrome';
41 | // import 'ace-builds/src-noconflict/mode-html.js';
42 | // import 'ace-builds/src-noconflict/mode-sql.js';
43 | 
44 | // console.log('froala');
45 | // const froala = require('froala-editor/js/froala_editor.min.js');
46 | // console.log(froala);
47 | 


--------------------------------------------------------------------------------
/src/app/services/component-loader-service/component-loader.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable, ComponentFactory, Compiler } from '@angular/core';
 2 | import { AppConfiguration } from '../../apps.configuration';
 3 | 
 4 | // import { environment } from '../../../environments/environment';
 5 | 
 6 | declare const SystemJS;
 7 | 
 8 | export interface GlobalComponentStorage {
 9 |   [key: string]: ComponentFactory<any>;
10 | }
11 | 
12 | interface ExtendedWindow extends Window {
13 |   AppGlobalComponent: GlobalComponentStorage;
14 | }
15 | 
16 | function _window(): ExtendedWindow {
17 |    return window as ExtendedWindow;
18 | }
19 | 
20 | @Injectable()
21 | export class ComponentLoaderService {
22 |   constructor(private _compiler: Compiler) {
23 |     _window().AppGlobalComponent = _window().AppGlobalComponent || { };
24 |   }
25 | 
26 |   public updateModule(configuration: AppConfiguration) {
27 |     // const importUrl = !!environment.devModulePrefixPath && name === environment.devModuleName
28 |     // ? `${environment.devModulePrefixPath}/global.bundle.umd.min.js` : `${configuration.url}/global.bundle.umd.min.js`;
29 |     const importUrl = `${configuration.devUrl || configuration.url}/global.bundle.umd.min.js`;
30 | 
31 |     SystemJS.import(importUrl)
32 |       .then(globalModule => {
33 |         const factories = this._compiler.compileModuleAndAllComponentsSync(globalModule.GlobalModule);
34 |         factories.componentFactories.forEach(item => {
35 |           this.addOrReplaceComponent(item.selector, item);
36 |         });
37 |       })
38 |       .catch(err => {
39 |         console.error(`Failed to load global bundle: ${importUrl}. ${err}`);
40 |       });
41 |   }
42 | 
43 |   public addOrReplaceComponent(name: string, factory: ComponentFactory<any>) {
44 |     _window().AppGlobalComponent[name] = factory;
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { environment } from '../environments/environment';
 5 | import { ErrorComponent } from './components/error/error.component';
 6 | import { getApps, AppConfiguration } from './apps.configuration';
 7 | 
 8 | declare const SystemJS;
 9 | 
10 | /**
11 |  * Lazy load remote bundle (AOT compatible!)
12 |  */
13 | export const loadRemoteChildren = (configuration: AppConfiguration) => {
14 |   // const importUrl = !!environment.devModulePrefixPath && name === environment.devModuleName
15 |   //   ? `${environment.devModulePrefixPath}/bundle.umd.min.js` : `${url}/bundle.umd.min.js`;
16 |   // const importUrl = '../../../entry/entry.module#EntryModule';
17 |   const importUrl = `${configuration.devUrl || configuration.url}/bundle.umd.min.js`;
18 | 
19 |   return SystemJS.import(importUrl)
20 |     .then(entryModule => entryModule.EntryModule)
21 |     .catch(err => {
22 |       handleLoadError(importUrl, err);
23 |     });
24 | };
25 | 
26 | 
27 | const handleLoadError = function (url, err) {
28 |   const msg = `Failed to load service from '${url}'.`;
29 |   console.error(msg, err);
30 |   // const msgEncoded = encodeURIComponent(msg);
31 |   // window.location.href = `/error/${msgEncoded}`;
32 | };
33 | 
34 | const routes: Routes = [
35 |   {
36 |     path: 'services',
37 |     children: getApps().map(item => {
38 |       return {
39 |         path: item.path,
40 |         loadChildren: () => loadRemoteChildren(item)
41 |       };
42 |     })
43 |   },
44 |   {
45 |     path: 'error/:msg',
46 |     component: ErrorComponent
47 |   },
48 |   {
49 |     path: 'error',
50 |     component: ErrorComponent
51 |   }
52 | ];
53 | 
54 | @NgModule({
55 |   imports: [RouterModule.forRoot(routes, {useHash: true})],
56 |   exports: [RouterModule]
57 | })
58 | export class AppRoutingModule { }
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "micro-frontend-gateway",
 3 |   "version": "1.0.0",
 4 |   "description": "Micro frontend - Gateway",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build --output-path=deployment",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e",
13 |     "build-deploy": "ng build --output-path=deployment --base-href /micro-frontend-gateway/",
14 |     "server": "http-server deployment -p 2222 --cors -c-1"
15 |   },
16 |   "private": true,
17 |   "dependencies": {
18 |     "@angular/animations": "7.2.0",
19 |     "@angular/common": "7.2.0",
20 |     "@angular/compiler": "7.2.0",
21 |     "@angular/core": "7.2.0",
22 |     "@angular/elements": "7.2.0",
23 |     "@angular/forms": "7.2.0",
24 |     "@angular/material": "7.3.2",
25 |     "@angular/platform-browser": "7.2.0",
26 |     "@angular/platform-browser-dynamic": "7.2.0",
27 |     "@angular/router": "7.2.0",
28 |     "@ngrx/store": "7.2.0",
29 |     "ag-grid-angular": "^20.0.0",
30 |     "ag-grid-community": "^20.0.0",
31 |     "core-js": "2.5.4",
32 |     "document-register-element": "1.7.2",
33 |     "froala-editor": "^2.9.3",
34 |     "jquery": "^3.3.1",
35 |     "ng2-ace-editor": "^0.3.9",
36 |     "rxjs": "6.3.3",
37 |     "systemjs": "0.21.5",
38 |     "tachyons": "4.11.1",
39 |     "tslib": "1.9.0",
40 |     "zone.js": "0.8.26"
41 |   },
42 |   "devDependencies": {
43 |     "@angular-devkit/build-angular": "0.12.1",
44 |     "@angular/cli": "7.2.1",
45 |     "@angular/compiler-cli": "7.2.0",
46 |     "@angular/language-service": "7.2.0",
47 |     "@types/node": "8.9.4",
48 |     "@types/jasmine": "2.8.8",
49 |     "@types/jasminewd2": "2.0.3",
50 |     "@webcomponents/webcomponentsjs": "2.2.4",
51 |     "codelyzer": "4.5.0",
52 |     "jasmine-core": "2.99.1",
53 |     "jasmine-spec-reporter": "4.2.1",
54 |     "karma": "3.1.1",
55 |     "karma-chrome-launcher": "2.2.0",
56 |     "karma-coverage-istanbul-reporter": "2.0.1",
57 |     "karma-jasmine": "1.1.2",
58 |     "karma-jasmine-html-reporter": "0.2.2",
59 |     "protractor": "5.4.0",
60 |     "ts-node": "7.0.0",
61 |     "tslint": "5.11.0",
62 |     "typescript": "3.2.2",
63 |     "http-server": "0.11.1"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![logo](logo.png)
 2 | # GATEWAY [![Build Status](https://travis-ci.com/Marfusios/micro-frontend-gateway.svg?branch=master)](https://travis-ci.com/Marfusios/micro-frontend-gateway) [![demo link](https://img.shields.io/badge/demo-link-blue.svg)](http://mkotas.cz/micro-frontend-gateway)
 3 | 
 4 | This is Micro Frontends proof of concept. 
 5 | 
 6 | To cover these **requirements**: 
 7 | * separate frontend per every microservice (micro frontend AKA ‘MF’)
 8 | * MF independently deployable, has to be dynamically loaded in runtime (not statically built)
 9 |     * via canary deployment we want to load ALPHA microservice in version 1.0, but BETA microservice in version 1.2
10 |     * other canary deployment wants to load ALPHA microservice in version 2.0, but BETA microservice in version 1.0
11 | * frontend source codes as part of the backend git repository (to be versioned together)
12 | * preserve look and feel of SPA application
13 |     * like desktop application
14 |     * instant switching between modules
15 |     * only one full reload
16 | 
17 | ### Architecture
18 | 
19 | ![separation](mf_separation.png)
20 | 
21 | ### Implementation
22 | 
23 | Current implementation is based on [Angular](https://angular.io/) and [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview) (via library [ng-packagr](https://github.com/ng-packagr/ng-packagr)).
24 | 
25 | Micro frontends can be found here: 
26 | * ALPHA [github.com/marfusios/micro-frontend-alpha](https://github.com/Marfusios/micro-frontend-alpha)
27 | * BETA [github.com/marfusios/micro-frontend-beta](https://github.com/Marfusios/micro-frontend-beta)
28 | 
29 | Gateway deployed at: [mkotas.cz/micro-frontend-gateway](http://mkotas.cz/micro-frontend-gateway)
30 | 
31 | ### Usage
32 | 
33 | * local development
34 |     * `npm start`
35 |     * modify urls in 'app-routing.module.ts'
36 | * remote deployment
37 |     * `npm build-deploy`
38 |     * copy content of 'deployment' directory into web server
39 | 
40 | ### Resources
41 | 
42 | * [Micro Frontends idea](https://micro-frontends.org/)
43 | * [Lazy Loading Angular modules from a remote server](https://www.all-loops-considered.org/2018/07/07/angular-remote-lazy-loading/)
44 | * [Creating a Library with Angular CLI](https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5)
45 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | import * as jquery from 'jquery';
 8 | import * as common from '@angular/common';
 9 | import * as commonHttp from '@angular/common/http';
10 | import * as core from '@angular/core';
11 | import * as router from '@angular/router';
12 | import * as forms from '@angular/forms';
13 | import * as animations from '@angular/animations';
14 | import * as rxjs from 'rxjs';
15 | import * as rxjsOperators from 'rxjs/operators';
16 | import * as tslib from 'tslib';
17 | import * as store from '@ngrx/store';
18 | import * as aPlatformBrowser from '@angular/platform-browser';
19 | import * as aPlatformBrowserAnimations from '@angular/platform-browser/animations';
20 | import * as agGridAngular from 'ag-grid-angular';
21 | 
22 | // import * as ace from 'ace-builds/src-noconflict/ace';
23 | // import * as aceChrome from 'ace-builds/src-noconflict/theme-chrome';
24 | // import * as aceHtml from 'ace-builds/src-noconflict/mode-html.js';
25 | // import * as aceSql from 'ace-builds/src-noconflict/mode-sql.js';
26 | 
27 | // import * as froalaEditor from 'froala-editor/js/froala_editor.min.js';
28 | 
29 | /**
30 |  * Setup SystemJS modules for remote module dependencies
31 |  */
32 | declare const SystemJS;
33 | 
34 | SystemJS.set('jquery', SystemJS.newModule(jquery));
35 | SystemJS.set('@angular/core', SystemJS.newModule(core));
36 | SystemJS.set('@angular/common', SystemJS.newModule(common));
37 | SystemJS.set('@angular/common/http', SystemJS.newModule(commonHttp));
38 | SystemJS.set('@angular/router', SystemJS.newModule(router));
39 | SystemJS.set('@angular/forms', SystemJS.newModule(forms));
40 | SystemJS.set('@angular/animations', SystemJS.newModule(animations));
41 | SystemJS.set('@angular/platform-browser', SystemJS.newModule(aPlatformBrowser));
42 | SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(aPlatformBrowserAnimations));
43 | SystemJS.set('ag-grid-angular', SystemJS.newModule(agGridAngular));
44 | SystemJS.set('rxjs', SystemJS.newModule(rxjs));
45 | SystemJS.set('rxjs/operators', SystemJS.newModule(rxjsOperators));
46 | SystemJS.set('tslib', SystemJS.newModule(tslib));
47 | SystemJS.set('@ngrx/store', SystemJS.newModule(store));
48 | 
49 | // SystemJS.set('ace-builds/src-noconflict/ace', SystemJS.newModule(ace));
50 | // SystemJS.set('ace-builds/src-noconflict/theme-chrome', SystemJS.newModule(aceChrome));
51 | // SystemJS.set('ace-builds/src-noconflict/mode-html.js', SystemJS.newModule(aceHtml));
52 | // SystemJS.set('ace-builds/src-noconflict/mode-sql.js', SystemJS.newModule(aceSql));
53 | 
54 | // SystemJS.set('froala-editor/js/froala_editor.min.js', SystemJS.newModule(froalaEditor));
55 | 
56 | if (environment.production) {
57 |   enableProdMode();
58 | }
59 | 
60 | platformBrowserDynamic().bootstrapModule(AppModule)
61 |   .catch(err => console.error(err));
62 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "no-output-on-prefix": true,
121 |     "use-input-property-decorator": true,
122 |     "use-output-property-decorator": true,
123 |     "use-host-property-decorator": true,
124 |     "no-input-rename": true,
125 |     "no-output-rename": true,
126 |     "use-life-cycle-interface": true,
127 |     "use-pipe-transform-interface": true,
128 |     "component-class-suffix": true,
129 |     "directive-class-suffix": true
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
22 |  *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
23 |  */
24 | 
25 | // import 'core-js/es6/symbol';
26 | // import 'core-js/es6/object';
27 | // import 'core-js/es6/function';
28 | // import 'core-js/es6/parse-int';
29 | // import 'core-js/es6/parse-float';
30 | // import 'core-js/es6/number';
31 | // import 'core-js/es6/math';
32 | // import 'core-js/es6/string';
33 | // import 'core-js/es6/date';
34 | // import 'core-js/es6/array';
35 | // import 'core-js/es6/regexp';
36 | // import 'core-js/es6/map';
37 | // import 'core-js/es6/weak-map';
38 | // import 'core-js/es6/set';
39 | 
40 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
41 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
42 | 
43 | /** IE10 and IE11 requires the following for the Reflect API. */
44 | // import 'core-js/es6/reflect';
45 | 
46 | /**
47 |  * Web Animations `@angular/platform-browser/animations`
48 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
49 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
50 |  */
51 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
52 | 
53 | /**
54 |  * By default, zone.js will patch all possible macroTask and DomEvents
55 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
56 |  * because those flags need to be set before `zone.js` being loaded, and webpack
57 |  * will put import in the top of bundle, so user need to create a separate file
58 |  * in this directory (for example: zone-flags.ts), and put the following flags
59 |  * into that file, and then add the following code before importing zone.js.
60 |  * import './zone-flags.ts';
61 |  *
62 |  * The flags allowed in zone-flags.ts are listed here.
63 |  *
64 |  * The following flags will work for all browsers.
65 |  *
66 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
67 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
68 |  * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
69 |  *
70 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
71 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
72 |  *
73 |  *  (window as any).__Zone_enable_cross_context_check = true;
74 |  *
75 |  */
76 | 
77 | /***************************************************************************************************
78 |  * Zone JS is required by default for Angular itself.
79 |  */
80 | import 'zone.js/dist/zone';  // Included with Angular CLI.
81 | 
82 | 
83 | /***************************************************************************************************
84 |  * APPLICATION IMPORTS
85 |  */
86 | import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
87 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "micro-frontend-gateway": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "styleext": "scss"
 14 |         }
 15 |       },
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/micro-frontend-gateway",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "src/tsconfig.app.json",
 25 |             "assets": [
 26 |               "src/favicon.ico",
 27 |               "src/assets"
 28 |             ],
 29 |             "styles": [
 30 |               "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
 31 |               "node_modules/froala-editor/css/froala_style.min.css",
 32 |               "node_modules/font-awesome/css/font-awesome.min.css",
 33 |               "node_modules/tachyons/css/tachyons.min.css",
 34 |               "src/styles.scss"
 35 |             ],
 36 |             "scripts": [
 37 |               "node_modules/systemjs/dist/system.js",
 38 |               "node_modules/jquery/dist/jquery.min.js",
 39 |               "node_modules/ace-builds/src-min/ace.js",
 40 |               "node_modules/ace-builds/src-min/theme-chrome.js",
 41 |               "node_modules/ace-builds/src-min/mode-html.js",
 42 |               "node_modules/ace-builds/src-min/mode-sql.js",
 43 |               "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
 44 |               {
 45 |                 "input": "node_modules/document-register-element/build/document-register-element.js"
 46 |               }
 47 |             ]
 48 |           },
 49 |           "configurations": {
 50 |             "mflocal": {
 51 |               "fileReplacements": [
 52 |                 {
 53 |                   "replace": "src/environments/environment.ts",
 54 |                   "with": "src/environments/environment.mflocal.ts"
 55 |                 }
 56 |               ]
 57 |             },
 58 |             "production": {
 59 |               "fileReplacements": [
 60 |                 {
 61 |                   "replace": "src/environments/environment.ts",
 62 |                   "with": "src/environments/environment.prod.ts"
 63 |                 }
 64 |               ],
 65 |               "optimization": true,
 66 |               "outputHashing": "all",
 67 |               "sourceMap": false,
 68 |               "extractCss": true,
 69 |               "namedChunks": false,
 70 |               "aot": true,
 71 |               "extractLicenses": true,
 72 |               "vendorChunk": false,
 73 |               "buildOptimizer": true,
 74 |               "budgets": [
 75 |                 {
 76 |                   "type": "initial",
 77 |                   "maximumWarning": "2mb",
 78 |                   "maximumError": "5mb"
 79 |                 }
 80 |               ]
 81 |             }
 82 |           }
 83 |         },
 84 |         "serve": {
 85 |           "builder": "@angular-devkit/build-angular:dev-server",
 86 |           "options": {
 87 |             "browserTarget": "micro-frontend-gateway:build"
 88 |           },
 89 |           "configurations": {
 90 |             "mflocal": {
 91 |               "browserTarget": "micro-frontend-gateway:build"
 92 |             },
 93 |             "production": {
 94 |               "browserTarget": "micro-frontend-gateway:build:production"
 95 |             }
 96 |           }
 97 |         },
 98 |         "extract-i18n": {
 99 |           "builder": "@angular-devkit/build-angular:extract-i18n",
100 |           "options": {
101 |             "browserTarget": "micro-frontend-gateway:build"
102 |           }
103 |         },
104 |         "test": {
105 |           "builder": "@angular-devkit/build-angular:karma",
106 |           "options": {
107 |             "main": "src/test.ts",
108 |             "polyfills": "src/polyfills.ts",
109 |             "tsConfig": "src/tsconfig.spec.json",
110 |             "karmaConfig": "src/karma.conf.js",
111 |             "styles": [
112 |               "src/styles.scss"
113 |             ],
114 |             "scripts": [],
115 |             "assets": [
116 |               "src/favicon.ico",
117 |               "src/assets"
118 |             ]
119 |           }
120 |         },
121 |         "lint": {
122 |           "builder": "@angular-devkit/build-angular:tslint",
123 |           "options": {
124 |             "tsConfig": [
125 |               "src/tsconfig.app.json",
126 |               "src/tsconfig.spec.json"
127 |             ],
128 |             "exclude": [
129 |               "**/node_modules/**"
130 |             ]
131 |           }
132 |         }
133 |       }
134 |     },
135 |     "micro-frontend-gateway-e2e": {
136 |       "root": "e2e/",
137 |       "projectType": "application",
138 |       "prefix": "",
139 |       "architect": {
140 |         "e2e": {
141 |           "builder": "@angular-devkit/build-angular:protractor",
142 |           "options": {
143 |             "protractorConfig": "e2e/protractor.conf.js",
144 |             "devServerTarget": "micro-frontend-gateway:serve"
145 |           },
146 |           "configurations": {
147 |             "production": {
148 |               "devServerTarget": "micro-frontend-gateway:serve:production"
149 |             }
150 |           }
151 |         },
152 |         "lint": {
153 |           "builder": "@angular-devkit/build-angular:tslint",
154 |           "options": {
155 |             "tsConfig": "e2e/tsconfig.e2e.json",
156 |             "exclude": [
157 |               "**/node_modules/**"
158 |             ]
159 |           }
160 |         }
161 |       }
162 |     }
163 |   },
164 |   "defaultProject": "micro-frontend-gateway"
165 | }
166 | 


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