├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── build ├── build-server.config.js ├── build-web.config.js ├── common.conf.js ├── lib-server.config.js ├── lib-web.config.js ├── shell-server.config.js └── shell-web.config.js ├── index.html ├── libs ├── _angular-devkit_architect-cli.tgz ├── _angular-devkit_architect.tgz ├── _angular-devkit_build-angular.tgz ├── _angular-devkit_build-ng-packagr.tgz ├── _angular-devkit_build-optimizer.tgz ├── _angular-devkit_build-webpack.tgz ├── _angular-devkit_core.tgz ├── _angular-devkit_schematics-cli.tgz ├── _angular-devkit_schematics.tgz ├── _angular_cli.tgz ├── _angular_pwa.tgz ├── _ngtools_webpack.tgz ├── _schematics_angular.tgz ├── _schematics_schematics.tgz └── _schematics_update.tgz ├── package-lock.json ├── package.json ├── plugins └── federation.js ├── postcss.config.js ├── projects ├── mfe1 │ ├── browserslist │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── flights │ │ │ │ ├── flights-search │ │ │ │ │ ├── flights-search.component.html │ │ │ │ │ └── flights-search.component.ts │ │ │ │ ├── flights.module.ts │ │ │ │ └── lazy │ │ │ │ │ ├── lazy.component.html │ │ │ │ │ └── lazy.component.ts │ │ │ └── home │ │ │ │ ├── home.component.html │ │ │ │ └── home.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json └── shell │ ├── browserslist │ ├── karma.conf.js │ ├── server-bootstrap.ts │ ├── server.js │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.server.module.ts │ │ └── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ ├── assets │ │ └── .gitkeep │ ├── decl.d.ts │ ├── dom-polifylls.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.server.ts │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.server.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json ├── tslint.json ├── webpack.config.js └── yarn.lock /.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 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.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 | # FederationDemo Angular Universal 2 | 3 | Demonstrates [Webpack 5](https://github.com/webpack/webpack/milestone/18) Module Federation with [Angular](https://angular.io/), Angular Router and [Angular Universal](https://angular.io/guide/universal). 4 | Just a minimal demo. 5 | Not for production, of course. 6 | 7 | ## Start 8 | 9 | - ``npm run build`` 10 | - ``npm run serve:dist`` 11 | - Navigate to shell with SSR at http://localhost:4000 12 | - Navigate to standalone microfrontend at http://localhost:3000 13 | 14 | Thanks to [Manfred Steyer](https://github.com/manfredsteyer) for his [great article](https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/) 15 | about Webpack Federation Module. 16 | 17 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "shell": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "projects/shell", 10 | "sourceRoot": "projects/shell/src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "ngx-build-plus:browser", 15 | "options": { 16 | "outputPath": "dist/shell/browser", 17 | "index": "projects/shell/src/index.html", 18 | "main": "projects/shell/src/main.ts", 19 | "polyfills": "projects/shell/src/polyfills.ts", 20 | "tsConfig": "projects/shell/tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "projects/shell/src/favicon.ico", 24 | "projects/shell/src/assets" 25 | ], 26 | "styles": [ 27 | "projects/shell/src/styles.css" 28 | ], 29 | "scripts": [] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "fileReplacements": [ 34 | { 35 | "replace": "projects/shell/src/environments/environment.ts", 36 | "with": "projects/shell/src/environments/environment.prod.ts" 37 | } 38 | ], 39 | "optimization": true, 40 | "outputHashing": "all", 41 | "sourceMap": false, 42 | "extractCss": true, 43 | "namedChunks": false, 44 | "extractLicenses": true, 45 | "vendorChunk": false, 46 | "buildOptimizer": true 47 | } 48 | } 49 | }, 50 | "serve": { 51 | "builder": "ngx-build-plus:dev-server", 52 | "options": { 53 | "browserTarget": "shell:build", 54 | "port": 5000 55 | }, 56 | "configurations": { 57 | "production": { 58 | "browserTarget": "shell:build:production" 59 | } 60 | } 61 | }, 62 | "extract-i18n": { 63 | "builder": "@angular-devkit/build-angular:extract-i18n", 64 | "options": { 65 | "browserTarget": "shell:build" 66 | } 67 | }, 68 | "test": { 69 | "builder": "ngx-build-plus:karma", 70 | "options": { 71 | "main": "projects/shell/src/test.ts", 72 | "polyfills": "projects/shell/src/polyfills.ts", 73 | "tsConfig": "projects/shell/tsconfig.spec.json", 74 | "karmaConfig": "projects/shell/karma.conf.js", 75 | "assets": [ 76 | "projects/shell/src/favicon.ico", 77 | "projects/shell/src/assets" 78 | ], 79 | "styles": [ 80 | "projects/shell/src/styles.css" 81 | ], 82 | "scripts": [] 83 | } 84 | }, 85 | "lint": { 86 | "builder": "@angular-devkit/build-angular:tslint", 87 | "options": { 88 | "tsConfig": [ 89 | "projects/shell/tsconfig.app.json", 90 | "projects/shell/tsconfig.spec.json", 91 | "projects/shell/e2e/tsconfig.json" 92 | ], 93 | "exclude": [ 94 | "**/node_modules/**" 95 | ] 96 | } 97 | }, 98 | "e2e": { 99 | "builder": "@angular-devkit/build-angular:protractor", 100 | "options": { 101 | "protractorConfig": "projects/shell/e2e/protractor.conf.js", 102 | "devServerTarget": "shell:serve" 103 | }, 104 | "configurations": { 105 | "production": { 106 | "devServerTarget": "shell:serve:production" 107 | } 108 | } 109 | }, 110 | "server": { 111 | "builder": "@angular-devkit/build-angular:server", 112 | "options": { 113 | "outputPath": "dist/shell/server", 114 | "main": "projects/shell/server.ts", 115 | "tsConfig": "projects/shell/tsconfig.server.json" 116 | }, 117 | "configurations": { 118 | "production": { 119 | "outputHashing": "media", 120 | "fileReplacements": [ 121 | { 122 | "replace": "projects/shell/src/environments/environment.ts", 123 | "with": "projects/shell/src/environments/environment.prod.ts" 124 | } 125 | ], 126 | "sourceMap": false, 127 | "optimization": true 128 | } 129 | } 130 | }, 131 | "serve-ssr": { 132 | "builder": "@nguniversal/builders:ssr-dev-server", 133 | "options": { 134 | "browserTarget": "shell:build", 135 | "serverTarget": "shell:server" 136 | }, 137 | "configurations": { 138 | "production": { 139 | "browserTarget": "shell:build:production", 140 | "serverTarget": "shell:server:production" 141 | } 142 | } 143 | }, 144 | "prerender": { 145 | "builder": "@nguniversal/builders:prerender", 146 | "options": { 147 | "browserTarget": "shell:build:production", 148 | "serverTarget": "shell:server:production", 149 | "routes": [ 150 | "/" 151 | ] 152 | }, 153 | "configurations": { 154 | "production": {} 155 | } 156 | } 157 | } 158 | }, 159 | "mfe1": { 160 | "projectType": "application", 161 | "schematics": {}, 162 | "root": "projects/mfe1", 163 | "sourceRoot": "projects/mfe1/src", 164 | "prefix": "app", 165 | "architect": { 166 | "build": { 167 | "builder": "@angular-devkit/build-angular:browser", 168 | "options": { 169 | "outputPath": "dist/mfe1", 170 | "index": "projects/mfe1/src/index.html", 171 | "main": "projects/mfe1/src/main.ts", 172 | "polyfills": "projects/mfe1/src/polyfills.ts", 173 | "tsConfig": "projects/mfe1/tsconfig.app.json", 174 | "aot": true, 175 | "assets": [ 176 | "projects/mfe1/src/favicon.ico", 177 | "projects/mfe1/src/assets" 178 | ], 179 | "styles": [ 180 | "projects/mfe1/src/styles.css" 181 | ], 182 | "scripts": [] 183 | }, 184 | "configurations": { 185 | "production": { 186 | "fileReplacements": [ 187 | { 188 | "replace": "projects/mfe1/src/environments/environment.ts", 189 | "with": "projects/mfe1/src/environments/environment.prod.ts" 190 | } 191 | ], 192 | "optimization": true, 193 | "outputHashing": "all", 194 | "sourceMap": false, 195 | "extractCss": true, 196 | "namedChunks": false, 197 | "extractLicenses": true, 198 | "vendorChunk": false, 199 | "buildOptimizer": true 200 | } 201 | } 202 | }, 203 | "serve": { 204 | "builder": "@angular-devkit/build-angular:dev-server", 205 | "options": { 206 | "browserTarget": "mfe1:build", 207 | "port": 3000 208 | }, 209 | "configurations": { 210 | "production": { 211 | "browserTarget": "mfe1:build:production" 212 | } 213 | } 214 | }, 215 | "extract-i18n": { 216 | "builder": "@angular-devkit/build-angular:extract-i18n", 217 | "options": { 218 | "browserTarget": "mfe1:build" 219 | } 220 | }, 221 | "test": { 222 | "builder": "@angular-devkit/build-angular:karma", 223 | "options": { 224 | "main": "projects/mfe1/src/test.ts", 225 | "polyfills": "projects/mfe1/src/polyfills.ts", 226 | "tsConfig": "projects/mfe1/tsconfig.spec.json", 227 | "karmaConfig": "projects/mfe1/karma.conf.js", 228 | "assets": [ 229 | "projects/mfe1/src/favicon.ico", 230 | "projects/mfe1/src/assets" 231 | ], 232 | "styles": [ 233 | "projects/mfe1/src/styles.css" 234 | ], 235 | "scripts": [] 236 | } 237 | }, 238 | "lint": { 239 | "builder": "@angular-devkit/build-angular:tslint", 240 | "options": { 241 | "tsConfig": [ 242 | "projects/mfe1/tsconfig.app.json", 243 | "projects/mfe1/tsconfig.spec.json", 244 | "projects/mfe1/e2e/tsconfig.json" 245 | ], 246 | "exclude": [ 247 | "**/node_modules/**" 248 | ] 249 | } 250 | }, 251 | "e2e": { 252 | "builder": "@angular-devkit/build-angular:protractor", 253 | "options": { 254 | "protractorConfig": "projects/mfe1/e2e/protractor.conf.js", 255 | "devServerTarget": "mfe1:serve" 256 | }, 257 | "configurations": { 258 | "production": { 259 | "devServerTarget": "mfe1:serve:production" 260 | } 261 | } 262 | } 263 | } 264 | } 265 | }, 266 | "defaultProject": "shell" 267 | } -------------------------------------------------------------------------------- /build/build-server.config.js: -------------------------------------------------------------------------------- 1 | const libServer = require('./lib-server.config'); 2 | const shellServer = require('./shell-server.config'); 3 | 4 | module.exports = [ 5 | libServer, 6 | shellServer, 7 | ]; 8 | -------------------------------------------------------------------------------- /build/build-web.config.js: -------------------------------------------------------------------------------- 1 | const libWeb = require('./lib-web.config'); 2 | const shellWeb = require('./shell-web.config'); 3 | 4 | module.exports = [ 5 | libWeb, 6 | shellWeb 7 | ]; 8 | -------------------------------------------------------------------------------- /build/common.conf.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | distDir: __dirname + '/../dist', 4 | mode: 'production', 5 | }; 6 | -------------------------------------------------------------------------------- /build/lib-server.config.js: -------------------------------------------------------------------------------- 1 | const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin; 2 | const path = require("path"); 3 | const ContainerPlugin = require("webpack/lib/container/ContainerPlugin"); 4 | const config = require('./common.conf'); 5 | 6 | const mfe1ServerConfig = { 7 | entry: ["./projects/mfe1/src/polyfills.ts", "./projects/mfe1/src/main.ts"], 8 | resolve: { 9 | mainFields: ["browser", "module", "main"] 10 | }, 11 | target: 'async-node', 12 | module: { 13 | rules: [{test: /\.ts$/, loader: "@ngtools/webpack"}] 14 | }, 15 | plugins: [ 16 | new ContainerPlugin({ 17 | name: "mfe1", 18 | filename: "remoteEntry.js", 19 | exposes: { 20 | Component: './projects/mfe1/src/app/app.component.ts', 21 | Module: './projects/mfe1/src/app/flights/flights.module.ts' 22 | }, 23 | library: {type: "commonjs2"}, 24 | overridables: ["@angular/core", "@angular/common", "@angular/router"] 25 | }), 26 | new AngularCompilerPlugin({ 27 | skipCodeGeneration: false, 28 | tsConfigPath: "./projects/mfe1/tsconfig.app.json", 29 | directTemplateLoading: true, 30 | entryModule: path.resolve(__dirname, "../projects/mfe1/src/app/app.module#AppModule") 31 | }) 32 | ], 33 | output: { 34 | filename: "[name].js", 35 | path: `${config.distDir}/mfe1/server`, 36 | chunkFilename: "[id].[chunkhash].js", 37 | libraryTarget: "commonjs2" 38 | }, 39 | mode: config.mode 40 | }; 41 | 42 | module.exports = mfe1ServerConfig; 43 | -------------------------------------------------------------------------------- /build/lib-web.config.js: -------------------------------------------------------------------------------- 1 | const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin; 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | const path = require("path"); 4 | const ContainerPlugin = require("webpack/lib/container/ContainerPlugin"); 5 | const config = require('./common.conf'); 6 | 7 | const mfe1WebConfig = { 8 | entry: ["./projects/mfe1/src/polyfills.ts", "./projects/mfe1/src/main.ts"], 9 | resolve: { 10 | mainFields: ["browser", "module", "main"] 11 | }, 12 | devServer: { 13 | contentBase: path.join(__dirname, "dist/mfe1"), 14 | port: 3000 15 | }, 16 | module: { 17 | rules: [{test: /\.ts$/, loader: "@ngtools/webpack"}] 18 | }, 19 | plugins: [ 20 | new ContainerPlugin({ 21 | name: "mfe1", 22 | filename: "remoteEntry.js", 23 | exposes: { 24 | Component: './projects/mfe1/src/app/app.component.ts', 25 | Module: './projects/mfe1/src/app/flights/flights.module.ts' 26 | }, 27 | library: {type: "var", name: "mfe1"}, 28 | overridables: ["@angular/core", "@angular/common", "@angular/router"] 29 | }), 30 | 31 | new AngularCompilerPlugin({ 32 | skipCodeGeneration: false, 33 | tsConfigPath: "./projects/mfe1/tsconfig.app.json", 34 | directTemplateLoading: true, 35 | entryModule: path.resolve( 36 | __dirname, 37 | "../projects/mfe1/src/app/app.module#AppModule" 38 | ) 39 | }), 40 | new HtmlWebpackPlugin({ 41 | template: "./projects/mfe1/src/index.html" 42 | }) 43 | ], 44 | output: { 45 | publicPath: "http://localhost:3000/", 46 | filename: "[name].js", 47 | path: `${config.distDir}/mfe1`, 48 | chunkFilename: "[id].[chunkhash].js" 49 | }, 50 | mode: config.mode 51 | }; 52 | 53 | module.exports = mfe1WebConfig; 54 | -------------------------------------------------------------------------------- /build/shell-server.config.js: -------------------------------------------------------------------------------- 1 | const {AngularCompilerPlugin, PLATFORM} = require('@ngtools/webpack'); 2 | const path = require("path"); 3 | const ContainerReferencePlugin = require("webpack/lib/container/ContainerReferencePlugin"); 4 | const config = require('./common.conf'); 5 | 6 | const shellConfig = { 7 | entry: ["./projects/shell/server.js"], 8 | resolve: { 9 | mainFields: ["server", "module", "main"] 10 | }, 11 | target: 'async-node', 12 | optimization: {minimize: false}, 13 | module: { 14 | rules: [ 15 | {test: /\.ts$/, loader: "@ngtools/webpack"} 16 | ] 17 | }, 18 | externals: ["enhanced-resolve"], 19 | plugins: [ 20 | // ContainerReferencePlugin for Host allows to statically import shared libs 21 | new ContainerReferencePlugin({ 22 | remoteType: 'commonjs2', 23 | remotes: {mfe1: `${config.distDir}/mfe1/server/remoteEntry.js`}, 24 | overrides: ["@angular/core", "@angular/common", "@angular/router"] 25 | }), 26 | 27 | // OR: 28 | 29 | // new ModuleFederationPlugin({ 30 | // name: "mfe1", 31 | // library: { type: "commonjs2" }, 32 | // filename: "remoteEntry.js", 33 | // remotes: { 34 | // mfe1: path.resolve(__dirname, 'dist/mfe1/server/remoteEntry.js') 35 | // }, 36 | // shared: ["@angular/core", "@angular/common", "@angular/router"] 37 | // }), 38 | 39 | new AngularCompilerPlugin({ 40 | skipCodeGeneration: false, 41 | tsConfigPath: "./projects/shell/tsconfig.server.json", 42 | directTemplateLoading: true, 43 | platform: PLATFORM.Server, 44 | entryModule: path.resolve( 45 | __dirname, 46 | "../projects/shell/src/app/app.server.module#AppServerModule" 47 | ) 48 | }) 49 | ], 50 | 51 | output: { 52 | filename: "[name].js", 53 | path: `${config.distDir}/shell/server`, 54 | chunkFilename: "[id].[chunkhash].js", 55 | libraryTarget: "commonjs2", 56 | }, 57 | mode: config.mode 58 | }; 59 | 60 | module.exports = shellConfig; 61 | -------------------------------------------------------------------------------- /build/shell-web.config.js: -------------------------------------------------------------------------------- 1 | const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin; 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | const path = require("path"); 4 | const ContainerReferencePlugin = require("webpack/lib/container/ContainerReferencePlugin"); 5 | const config = require('./common.conf'); 6 | 7 | const shellConfig = { 8 | entry: ["./projects/shell/src/polyfills.ts", "./projects/shell/src/main.ts"], 9 | resolve: { 10 | mainFields: ["browser", "module", "main"] 11 | }, 12 | module: { 13 | rules: [ 14 | {test: /\.ts$/, loader: "@ngtools/webpack"} 15 | ] 16 | }, 17 | plugins: [ 18 | new ContainerReferencePlugin({ 19 | remoteType: 'var', 20 | remotes: {mfe1: "mfe1"}, 21 | overrides: ["@angular/core", "@angular/common", "@angular/router"] 22 | }), 23 | new AngularCompilerPlugin({ 24 | skipCodeGeneration: false, 25 | tsConfigPath: "./projects/shell/tsconfig.app.json", 26 | directTemplateLoading: true, 27 | entryModule: path.resolve(__dirname, "../projects/shell/src/app/app.module#AppModule") 28 | }), 29 | new HtmlWebpackPlugin({ 30 | template: "./projects/shell/src/index.html" 31 | }) 32 | ], 33 | output: { 34 | filename: "[id].[name].js", 35 | path: `${config.distDir}/shell`, 36 | chunkFilename: "[id].[chunkhash].js" 37 | }, 38 | mode: config.mode 39 | }; 40 | 41 | 42 | module.exports = shellConfig; 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /libs/_angular-devkit_architect-cli.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_architect-cli.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_architect.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_architect.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_build-angular.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_build-angular.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_build-ng-packagr.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_build-ng-packagr.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_build-optimizer.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_build-optimizer.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_build-webpack.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_build-webpack.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_core.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_core.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_schematics-cli.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_schematics-cli.tgz -------------------------------------------------------------------------------- /libs/_angular-devkit_schematics.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular-devkit_schematics.tgz -------------------------------------------------------------------------------- /libs/_angular_cli.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular_cli.tgz -------------------------------------------------------------------------------- /libs/_angular_pwa.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_angular_pwa.tgz -------------------------------------------------------------------------------- /libs/_ngtools_webpack.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_ngtools_webpack.tgz -------------------------------------------------------------------------------- /libs/_schematics_angular.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_schematics_angular.tgz -------------------------------------------------------------------------------- /libs/_schematics_schematics.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_schematics_schematics.tgz -------------------------------------------------------------------------------- /libs/_schematics_update.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/libs/_schematics_update.tgz -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "federation-demo-ssr", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "build": "webpack", 6 | "serve:dist": "concurrently \"node dist/shell/server/main.js\" \"serve dist/mfe1 -l 3000 -s\" ", 7 | "start": "echo Make sure to build before calling start && npm run serve:dist", 8 | "build:server": "webpack config ./build/build-server.config.js", 9 | "build:web": "webpack config ./build/build-web.config.js" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^9.1.4", 14 | "@angular/common": "^9.1.4", 15 | "@angular/compiler": "^9.1.4", 16 | "@angular/core": "^9.1.4", 17 | "@angular/forms": "^9.1.4", 18 | "@angular/platform-browser": "^9.1.4", 19 | "@angular/platform-browser-dynamic": "^9.1.4", 20 | "@angular/platform-server": "~9.1.0", 21 | "@angular/router": "^9.1.4", 22 | "@nguniversal/express-engine": "^9.1.0", 23 | "concurrently": "^5.2.0", 24 | "express": "^4.15.2", 25 | "json-stringify": "^1.0.0", 26 | "mini-css-extract-plugin": "^0.9.0", 27 | "ngx-build-plus": "^9.0.6", 28 | "rxjs": "^6.5.5", 29 | "tslib": "^1.11.1", 30 | "zone.js": "~0.10.2" 31 | }, 32 | "devDependencies": { 33 | "@angular-devkit/architect": "file:libs/_angular-devkit_architect.tgz", 34 | "@angular-devkit/architect-cli": "file:libs/_angular-devkit_architect-cli.tgz", 35 | "@angular-devkit/build-angular": "file:libs/_angular-devkit_build-angular.tgz", 36 | "@angular-devkit/build-ng-packagr": "file:libs/_angular-devkit_build-ng-packagr.tgz", 37 | "@angular-devkit/build-optimizer": "file:libs/_angular-devkit_build-optimizer.tgz", 38 | "@angular-devkit/build-webpack": "file:libs/_angular-devkit_build-webpack.tgz", 39 | "@angular-devkit/core": "file:libs/_angular-devkit_core.tgz", 40 | "@angular-devkit/schematics": "file:libs/_angular-devkit_schematics.tgz", 41 | "@angular-devkit/schematics-cli": "file:libs/_angular-devkit_schematics-cli.tgz", 42 | "@angular/cli": "file:libs/_angular_cli.tgz", 43 | "@angular/compiler-cli": "^9.1.4", 44 | "@angular/language-service": "^9.1.4", 45 | "@angular/pwa": "file:libs/_angular_pwa.tgz", 46 | "@ngtools/webpack": "file:libs/_ngtools_webpack.tgz", 47 | "@nguniversal/builders": "^9.1.0", 48 | "@schematics/angular": "file:libs/_schematics_angular.tgz", 49 | "@schematics/schematics": "file:libs/_schematics_schematics.tgz", 50 | "@schematics/update": "file:libs/_schematics_update.tgz", 51 | "@types/express": "^4.17.0", 52 | "@types/jasmine": "~3.5.0", 53 | "@types/jasminewd2": "~2.0.3", 54 | "@types/node": "^12.12.37", 55 | "codelyzer": "^5.1.2", 56 | "css-to-string-loader": "^0.1.3", 57 | "html-loader": "^1.1.0", 58 | "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin.git#master", 59 | "jasmine-core": "~3.5.0", 60 | "jasmine-spec-reporter": "~4.2.1", 61 | "karma": "~4.4.1", 62 | "karma-chrome-launcher": "~3.1.0", 63 | "karma-coverage-istanbul-reporter": "~2.1.0", 64 | "karma-jasmine": "~3.0.1", 65 | "karma-jasmine-html-reporter": "^1.4.2", 66 | "midas": "^2.0.3", 67 | "postcss-nested": "^4.2.1", 68 | "protractor": "^5.4.4", 69 | "serve": "^11.3.0", 70 | "to-string-loader": "^1.1.6", 71 | "ts-node": "~8.3.0", 72 | "tslint": "^6.1.2", 73 | "typescript": "^3.8.3", 74 | "webpack": "git://github.com/webpack/webpack.git#dev-1", 75 | "webpack-cli": "^3.3.11", 76 | "webpack-dev-server": "^3.10.3", 77 | "webpack-virtual-modules": "^0.2.2" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /plugins/federation.js: -------------------------------------------------------------------------------- 1 | var stringify = require('json-stringify'); 2 | 3 | exports.default = { 4 | config: function (cfg) { 5 | 6 | for(var entry of cfg.module.rules) { 7 | // delete entry.parser; 8 | // delete entry.sockPath; 9 | } 10 | 11 | delete cfg.node; 12 | delete cfg.sockPath; 13 | // delete cfg.optimization; 14 | 15 | for (var rule of cfg.module.rules) { 16 | // console.debug('rule', rule); 17 | } 18 | 19 | //console.debug('options', cfg.module.rules[7].use[1].options); 20 | console.debug('cfg', cfg); 21 | 22 | 23 | return cfg; 24 | }, 25 | pre: function () { 26 | console.debug('pre'); 27 | }, 28 | post: function () { 29 | console.debug('post'); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-nested'), 4 | require('autoprefixer'), 5 | ] 6 | } 7 | 8 | -------------------------------------------------------------------------------- /projects/mfe1/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /projects/mfe1/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/mfe1'), 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 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: 'app.component.html' 6 | }) 7 | export class AppComponent { 8 | } 9 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { AppComponent } from './app.component'; 4 | import { RouterModule } from '@angular/router'; 5 | import { HomeComponent } from './home/home.component'; 6 | import { FlightsModule } from './flights/flights.module'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | BrowserModule, 11 | FlightsModule, 12 | RouterModule.forRoot([ 13 | { path: '', component: HomeComponent, pathMatch: 'full'} 14 | ]) 15 | ], 16 | declarations: [ 17 | HomeComponent, 18 | AppComponent, 19 | ], 20 | providers: [], 21 | bootstrap: [ 22 | AppComponent 23 | ] 24 | }) 25 | export class AppModule { } 26 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/flights/flights-search/flights-search.component.html: -------------------------------------------------------------------------------- 1 | 35 | 36 |
37 |

Flights!!!

38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 |
51 |
52 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/flights/flights-search/flights-search.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, ViewChild, ViewContainerRef, Inject, Injector, ComponentFactoryResolver, OnInit} from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | selector: 'app-flights-search', 6 | templateUrl: './flights-search.component.html' 7 | }) 8 | export class FlightsSearchComponent { 9 | 10 | @ViewChild('vc', { read: ViewContainerRef, static: true }) 11 | viewContainer: ViewContainerRef; 12 | 13 | constructor( 14 | @Inject(Injector) private injector, 15 | @Inject(ComponentFactoryResolver) private cfr) { } 16 | 17 | search() { 18 | alert('Not implemented for this demo!'); 19 | } 20 | 21 | async terms() { 22 | const comp = await import('../lazy/lazy.component').then(m => m.LazyComponent); 23 | 24 | const factory = this.cfr.resolveComponentFactory(comp); 25 | this.viewContainer.createComponent(factory, null, this.injector); 26 | } 27 | 28 | 29 | } 30 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/flights/flights.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FlightsSearchComponent } from './flights-search/flights-search.component'; 4 | import { RouterModule } from '@angular/router'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | CommonModule, 9 | RouterModule.forChild([ 10 | { 11 | path: 'flights-search', 12 | component: FlightsSearchComponent 13 | } 14 | ]) 15 | ], 16 | declarations: [ 17 | FlightsSearchComponent 18 | ] 19 | }) 20 | export class FlightsModule { } 21 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/flights/lazy/lazy.component.html: -------------------------------------------------------------------------------- 1 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -------------------------------------------------------------------------------- /projects/mfe1/src/app/flights/lazy/lazy.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy', 5 | templateUrl: './lazy.component.html' 6 | }) 7 | export class LazyComponent implements OnInit { 8 | 9 | constructor() { } 10 | 11 | ngOnInit() { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /projects/mfe1/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |

Welcome!

2 | 3 |

4 | Search Flights 5 |

-------------------------------------------------------------------------------- /projects/mfe1/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html' 6 | }) 7 | export class HomeComponent implements OnInit { 8 | 9 | constructor() { } 10 | 11 | ngOnInit() { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /projects/mfe1/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/projects/mfe1/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/mfe1/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { AppModule } from './app/app.module'; 2 | import { environment } from './environments/environment'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | import { enableProdMode } from '@angular/core'; 5 | 6 | if (environment.production) { 7 | enableProdMode(); 8 | } 9 | 10 | platformBrowserDynamic().bootstrapModule(AppModule) 11 | .catch(err => console.error(err)); -------------------------------------------------------------------------------- /projects/mfe1/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/mfe1/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/mfe1/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/projects/mfe1/src/favicon.ico -------------------------------------------------------------------------------- /projects/mfe1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/mfe1/src/main.ts: -------------------------------------------------------------------------------- 1 | // 2 | // This workaround makes sure, we can execute 3 | // this remote directly. 4 | // 5 | // It is needed to resolve all shared libs 6 | // Once, they've been loaded via an dynamic import 7 | // they can be referenced via a static one in 8 | // the rest of the application. 9 | // 10 | 11 | // Promise.all([ 12 | // import('@angular/core'), 13 | // import('@angular/common'), 14 | // import('@angular/router'), 15 | // ]) 16 | // .then(_ => import('./bootstrap')) 17 | // .catch(err => console.error('error', err)); 18 | 19 | import('./bootstrap'); 20 | -------------------------------------------------------------------------------- /projects/mfe1/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 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /projects/mfe1/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/mfe1/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: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /projects/mfe1/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/mfe1/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 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/mfe1/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 | -------------------------------------------------------------------------------- /projects/shell/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /projects/shell/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/shell'), 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 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/shell/server-bootstrap.ts: -------------------------------------------------------------------------------- 1 | import 'zone.js/dist/zone-node'; 2 | 3 | import { ngExpressEngine } from '@nguniversal/express-engine'; 4 | import * as express from 'express'; 5 | import { join } from 'path'; 6 | import './src/dom-polifylls'; 7 | 8 | 9 | import { AppServerModule } from './src/main.server'; 10 | import { APP_BASE_HREF } from '@angular/common'; 11 | import { existsSync } from 'fs'; 12 | 13 | 14 | // The Express app is exported so that it can be used by serverless Functions. 15 | export function app() { 16 | const server = express(); 17 | const distFolder = join(process.cwd(), 'dist/shell'); 18 | const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index'; 19 | 20 | // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) 21 | server.engine('html', ngExpressEngine({ 22 | bootstrap: AppServerModule, 23 | })); 24 | 25 | server.set('view engine', 'html'); 26 | server.set('views', distFolder); 27 | 28 | 29 | server.get('/favicon.ico', (req, res) => { 30 | res.status(404).send(); 31 | }); 32 | 33 | // Example Express Rest API endpoints 34 | // server.get('/api/**', (req, res) => { }); 35 | // Serve static files from /browser 36 | server.get('*.*', express.static(distFolder, { 37 | maxAge: '1y' 38 | })); 39 | 40 | 41 | // All regular routes use the Universal engine 42 | server.get('*', (req, res) => { 43 | res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); 44 | }); 45 | 46 | return server; 47 | } 48 | 49 | export function run() { 50 | const port = process.env.PORT || 4000; 51 | 52 | // Start up the Node server 53 | const server = app(); 54 | server.listen(port, () => { 55 | console.log(`Node Express server listening on http://localhost:${port}`); 56 | }); 57 | } 58 | 59 | export * from './src/main.server'; 60 | -------------------------------------------------------------------------------- /projects/shell/server.js: -------------------------------------------------------------------------------- 1 | // declare const __non_webpack_require__: NodeRequire; 2 | 3 | const mainModule = __non_webpack_require__.main; 4 | const moduleFilename = mainModule && mainModule.filename || ''; 5 | if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { 6 | import ('./server-bootstrap').then(x => x.run()); 7 | } 8 | -------------------------------------------------------------------------------- /projects/shell/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | 2 | /* Hallo */ 3 | 4 | .x { } -------------------------------------------------------------------------------- /projects/shell/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/shell/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'shell'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('shell'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement; 29 | expect(compiled.querySelector('.content span').textContent).toContain('shell app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /projects/shell/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild, ViewContainerRef, ɵrenderComponent as renderComponent, Inject, Injector, ComponentFactoryResolver } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'shell'; 9 | 10 | @ViewChild('vc', { read: ViewContainerRef, static: true }) 11 | viewContainer: ViewContainerRef; 12 | 13 | constructor( 14 | @Inject(Injector) private injector, 15 | @Inject(ComponentFactoryResolver) private cfr) { } 16 | 17 | home() { 18 | this.viewContainer.clear(); 19 | } 20 | 21 | async load() { 22 | const comp = await import('mfe1/Component').then(m => { 23 | return m.AppComponent; 24 | }); 25 | const factory = this.cfr.resolveComponentFactory(comp); 26 | this.viewContainer.createComponent(factory, null, this.injector); 27 | } 28 | } 29 | 30 | -------------------------------------------------------------------------------- /projects/shell/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { RouterModule } from '@angular/router'; 4 | import { AppComponent } from './app.component'; 5 | import { HomeComponent } from './home/home.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | BrowserModule.withServerTransition({ appId: 'serverApp' }), 10 | RouterModule.forRoot([ 11 | { 12 | path: '', 13 | component: HomeComponent, 14 | pathMatch: 'full' 15 | }, 16 | { 17 | path: 'flights', 18 | loadChildren: () => import('mfe1/Module').then(m => m.FlightsModule) 19 | }, 20 | ], { 21 | initialNavigation: 'enabled' 22 | }) 23 | ], 24 | declarations: [ 25 | AppComponent, 26 | HomeComponent 27 | ], 28 | providers: [], 29 | bootstrap: [AppComponent] 30 | }) 31 | export class AppModule { } 32 | -------------------------------------------------------------------------------- /projects/shell/src/app/app.server.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ServerModule } from '@angular/platform-server'; 3 | 4 | import { AppModule } from './app.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | AppModule, 10 | ServerModule, 11 | ], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppServerModule {} 15 | -------------------------------------------------------------------------------- /projects/shell/src/app/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/projects/shell/src/app/home/home.component.css -------------------------------------------------------------------------------- /projects/shell/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |

Welcome!

-------------------------------------------------------------------------------- /projects/shell/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /projects/shell/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html' 6 | }) 7 | export class HomeComponent implements OnInit { 8 | 9 | constructor() { } 10 | 11 | ngOnInit() { 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /projects/shell/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/projects/shell/src/assets/.gitkeep -------------------------------------------------------------------------------- /projects/shell/src/decl.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'mfe1/Component'; 2 | declare module 'mfe1/Module'; 3 | 4 | -------------------------------------------------------------------------------- /projects/shell/src/dom-polifylls.ts: -------------------------------------------------------------------------------- 1 | import * as domino from 'domino'; 2 | import * as fs from 'fs'; 3 | import * as path from 'path'; 4 | 5 | const template = fs.readFileSync(path.join(process.cwd(), 'dist/shell', 'index.html')).toString(); 6 | const win = domino.createWindow(template); 7 | 8 | global['window'] = win; 9 | 10 | // console.log(win.HTMLTemplateElement); 11 | 12 | Object.defineProperty(win.document.body.style, 'transform', { 13 | value: () => { 14 | return { 15 | enumerable: true, 16 | configurable: true 17 | }; 18 | }, 19 | }); 20 | 21 | Object.defineProperty(win.document.body.style, 'z-index', { 22 | value: () => { 23 | return { 24 | enumerable: true, 25 | configurable: true 26 | }; 27 | }, 28 | }); 29 | 30 | global['document'] = win.document; 31 | global['CSS'] = null; 32 | // global['atob'] = win.atob; 33 | global['atob'] = (base64: string) => { 34 | return Buffer.from(base64, 'base64').toString(); 35 | }; 36 | 37 | function setDomTypes() { 38 | // Make all Domino types available as types in the global env. 39 | Object.assign(global, domino['impl']); 40 | (global as any)['KeyboardEvent'] = domino['impl'].Event; 41 | } 42 | 43 | setDomTypes(); 44 | -------------------------------------------------------------------------------- /projects/shell/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/shell/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 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/shell/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newvladimirov/module-federation-with-angular-universal/cb35c525904ebde9d65d361d8c63aeb0eef4260e/projects/shell/src/favicon.ico -------------------------------------------------------------------------------- /projects/shell/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Shell 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /projects/shell/src/main.server.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | 3 | import { environment } from './environments/environment'; 4 | 5 | if (environment.production) { 6 | enableProdMode(); 7 | } 8 | 9 | export { AppServerModule } from './app/app.server.module'; 10 | export { renderModule, renderModuleFactory } from '@angular/platform-server'; 11 | -------------------------------------------------------------------------------- /projects/shell/src/main.ts: -------------------------------------------------------------------------------- 1 | import { AppModule } from './app/app.module'; 2 | import { environment } from './environments/environment'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | import { enableProdMode } from '@angular/core'; 5 | 6 | if (environment.production) { 7 | enableProdMode(); 8 | } 9 | 10 | document.addEventListener('DOMContentLoaded', () => { 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | }); 14 | -------------------------------------------------------------------------------- /projects/shell/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 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /projects/shell/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/shell/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: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /projects/shell/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/shell/tsconfig.server.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.app.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app-server", 5 | "module": "commonjs", 6 | "types": [ 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/main.server.ts", 12 | "server-bootstrap.ts" 13 | ], 14 | "angularCompilerOptions": { 15 | "entryModule": "./src/app/app.server.module#AppServerModule" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/shell/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 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/shell/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 | -------------------------------------------------------------------------------- /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": "ES2020", 11 | "allowJs": true, 12 | "moduleResolution": "node", 13 | "importHelpers": true, 14 | "target": "es5", 15 | "lib": [ 16 | "es2018", 17 | "dom" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "fullTemplateTypeCheck": true, 22 | "strictInjectionParameters": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "align": { 8 | "options": [ 9 | "parameters", 10 | "statements" 11 | ] 12 | }, 13 | "array-type": false, 14 | "arrow-return-shorthand": true, 15 | "curly": true, 16 | "deprecation": { 17 | "severity": "warning" 18 | }, 19 | "eofline": true, 20 | "import-blacklist": [ 21 | true, 22 | "rxjs/Rx" 23 | ], 24 | "import-spacing": true, 25 | "indent": { 26 | "options": [ 27 | "spaces" 28 | ] 29 | }, 30 | "max-classes-per-file": false, 31 | "max-line-length": [ 32 | true, 33 | 140 34 | ], 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-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-empty": false, 55 | "no-inferrable-types": [ 56 | true, 57 | "ignore-params" 58 | ], 59 | "no-non-null-assertion": true, 60 | "no-redundant-jsdoc": true, 61 | "no-switch-case-fall-through": true, 62 | "no-var-requires": false, 63 | "object-literal-key-quotes": [ 64 | true, 65 | "as-needed" 66 | ], 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "semicolon": { 72 | "options": [ 73 | "always" 74 | ] 75 | }, 76 | "space-before-function-paren": { 77 | "options": { 78 | "anonymous": "never", 79 | "asyncArrow": "always", 80 | "constructor": "never", 81 | "method": "never", 82 | "named": "never" 83 | } 84 | }, 85 | "typedef-whitespace": { 86 | "options": [ 87 | { 88 | "call-signature": "nospace", 89 | "index-signature": "nospace", 90 | "parameter": "nospace", 91 | "property-declaration": "nospace", 92 | "variable-declaration": "nospace" 93 | }, 94 | { 95 | "call-signature": "onespace", 96 | "index-signature": "onespace", 97 | "parameter": "onespace", 98 | "property-declaration": "onespace", 99 | "variable-declaration": "onespace" 100 | } 101 | ] 102 | }, 103 | "variable-name": { 104 | "options": [ 105 | "ban-keywords", 106 | "check-format", 107 | "allow-pascal-case" 108 | ] 109 | }, 110 | "whitespace": { 111 | "options": [ 112 | "check-branch", 113 | "check-decl", 114 | "check-operator", 115 | "check-separator", 116 | "check-type", 117 | "check-typecast" 118 | ] 119 | }, 120 | "component-class-suffix": true, 121 | "contextual-lifecycle": true, 122 | "directive-class-suffix": true, 123 | "no-conflicting-lifecycle": true, 124 | "no-host-metadata-property": true, 125 | "no-input-rename": true, 126 | "no-inputs-metadata-property": true, 127 | "no-output-native": true, 128 | "no-output-on-prefix": true, 129 | "no-output-rename": true, 130 | "no-outputs-metadata-property": true, 131 | "template-banana-in-box": true, 132 | "template-no-negated-async": true, 133 | "use-lifecycle-interface": true, 134 | "use-pipe-transform-interface": true 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const libServer = require('./build/lib-server.config'); 2 | const libWeb = require('./build/lib-web.config'); 3 | const shellServer = require('./build/shell-server.config'); 4 | const shellWeb = require('./build/shell-web.config'); 5 | 6 | module.exports = [ 7 | libServer, 8 | libWeb, 9 | shellServer, 10 | shellWeb 11 | ]; 12 | --------------------------------------------------------------------------------