Add dynamic module federation to build

- Re-setup karma / jasmine tests
-- Fix tsconfig paths
-- Remove no longer needed view and field test imports
-- Add test app-shell specific test command
-- Add karma/jasmine specific webpack configuration

angular.json

@@ -93,7 +93,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "SuiteCRM:build"
+            "browserTarget": "shell:build"
           }
         },
         "test": {
@@ -111,7 +111,7 @@
             "assets": [
               "core/app/shell/src/themes"
             ],
-            "extraWebpackConfig": "core/app/shell/webpack.config.js"
+            "extraWebpackConfig": "core/app/shell/webpack.config.spec.js"
           }
         },
         "lint": {
@@ -153,5 +153,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "packageManager": "yarn"
   }
 }

core/app/shell/karma.conf.js

@@ -17,7 +17,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/angular-testing'),
+      dir: require('path').join(__dirname, '../../coverage/shell'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },

core/app/shell/src/bootstrap.ts

@@ -0,0 +1,13 @@
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from '@app/app.module';
+import {environment} from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+    .catch(err => console.error(err));
+

core/app/shell/src/test.ts

@@ -34,10 +34,7 @@ import 'zone.js/dist/jasmine-patch';
 import 'zone.js/dist/async-test';
 import 'zone.js/dist/fake-async-test';
 import {getTestBed} from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare const __karma__: any;
@@ -57,15 +54,5 @@ const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
 
-// Then we find all the tests.
-const context_views = require.context('../views', true, /\.spec\.ts$/);
-// And load the modules.
-context_views.keys().map(context_views);
-
-// Then we find all the tests.
-const context_fields = require.context('../fields', true, /\.spec\.ts$/);
-// And load the modules.
-context_fields.keys().map(context_fields);
-
 // Finally, start Karma to run the tests.
 __karma__.start();

core/app/shell/src/views/list/components/list-header/list-header.component.spec.ts

@@ -34,7 +34,7 @@ import {ApolloTestingModule} from 'apollo-angular/testing';
 import {ListHeaderComponent} from './list-header.component';
 import {ModuleTitleModule} from '@components/module-title/module-title.module';
 import {ActionMenuModule} from '@views/list/components/action-menu/action-menu.module';
-import {SettingsMenuModule} from 'views/list/components/settings-menu/settings-menu.module';
+import {SettingsMenuModule} from '@views/list/components/settings-menu/settings-menu.module';
 import {ImageModule} from '@components/image/image.module';
 import {ThemeImagesStore} from '@store/theme-images/theme-images.store';
 

core/app/shell/tsconfig.spec.json

@@ -1,7 +1,7 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/spec",
+    "outDir": "../../../out-tsc/spec",
     "types": [
       "jasmine",
       "node"

core/app/shell/webpack.config.js

@@ -0,0 +1,42 @@
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const mf = require("@angular-architects/module-federation/webpack");
+const path = require("path");
+
+const sharedMappings = new mf.SharedMappings();
+sharedMappings.register(
+  path.join(__dirname, '../../../tsconfig.json'),
+  []);
+
+module.exports = {
+  output: {
+    uniqueName: "shell"
+  },
+  optimization: {
+    // Only needed to bypass a temporary bug
+    runtimeChunk: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+
+      remotes: {},
+
+      shared: {
+        "@angular/core": {singleton: true},
+        "@angular/common": {singleton: true},
+        "@angular/router": {singleton: true},
+
+      }
+
+    }),
+  ],
+};

core/app/shell/webpack.config.spec.js

@@ -0,0 +1,20 @@
+module.exports = {
+  output: {
+    uniqueName: "shell"
+  },
+  optimization: {
+    // Only needed to bypass a temporary bug
+    runtimeChunk: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false
+        }
+      },
+    ]
+  },
+  plugins: [],
+};

core/app/shell/webpack.prod.config.js

@@ -0,0 +1 @@
+module.exports = require('./webpack.config');

package.json

@@ -3,14 +3,22 @@
   "version": "8.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
+    "start": "npm run start:shell",
+    "start:shell": "ng serve shell  -o --port 5000",
+    "start:all": "concurrently \"npm run start:shell\"",
+    "build:shell": "ng build shell --prod",
+    "test:shell": "ng test shell",
+    "serve:dist": "concurrently \"serve dist/shell -l 5000 -s\"",
+    "build": "npm run build:shell",
+    "test": "npm run test:shell",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "postinstall": "ngcc"
   },
   "private": true,
+  "resolutions": {
+    "webpack": "^5.0.0"
+  },
   "engines": {
     "node": ">= 10.0.0"
   },
@@ -18,17 +26,20 @@
     "defaults"
   ],
   "dependencies": {
-    "@angular/animations": "^11.1.2",
+    "@angular-architects/module-federation": "^1.1.0",
+    "@angular/animations": "11.0.0",
     "@angular/cdk": "^10.2.7",
-    "@angular/common": "^11.1.2",
-    "@angular/compiler": "^11.1.2",
-    "@angular/core": "^11.1.2",
-    "@angular/forms": "^11.1.2",
-    "@angular/localize": "^11.1.2",
+    "@angular/common": "11.0.0",
+    "@angular/compiler": "11.0.0",
+    "@angular/core": "11.0.0",
+    "@angular/forms": "11.0.0",
+    "@angular/localize": "11.0.0",
     "@angular/material": "^10.2.7",
-    "@angular/platform-browser": "^11.1.2",
-    "@angular/platform-browser-dynamic": "^11.1.2",
-    "@angular/router": "^11.1.2",
+    "@angular/platform-browser": "11.0.0",
+    "@angular/platform-browser-dynamic": "11.0.0",
+    "@angular/router": "11.0.0",
+    "@nrwl/workspace": "^10.3.0",
+    "concurrently": "^5.3.0",
     "@apollo/client": "^3.3.7",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@ng-bootstrap/ng-bootstrap": "^9.0.2",
@@ -54,11 +65,11 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1101.4",
+    "@angular-devkit/build-angular": "^0.1100.0",
     "@angular-eslint/builder": "0.0.1-alpha.18",
-    "@angular/cli": "^11.2.0",
-    "@angular/compiler-cli": "^11.2.0",
-    "@angular/language-service": "^11.2.0",
+    "@angular/cli": "11.0.0",
+    "@angular/compiler-cli": "11.0.0",
+    "@angular/language-service": "11.0.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.6",
     "@types/lodash-es": "^4.17.4",
@@ -66,6 +77,7 @@
     "@types/node": "^12.19.15",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
+    "codelyzer": "^6.0.0",
     "eslint": "^6.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^2.3.0",
@@ -86,6 +98,6 @@
     "prettier": "^1.16.1",
     "protractor": "~7.0.0",
     "ts-node": "^8.10.1",
-    "typescript": "^4.0.7"
+    "typescript": "~4.0.5"
   }
 }

tslint.json

@@ -0,0 +1,152 @@
+{
+  "extends": "tslint:recommended",
+  "rulesDirectory": [
+    "codelyzer"
+  ],
+  "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
+    "array-type": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "eofline": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
+    "typedef": [
+      true,
+      "call-signature"
+    ],
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ]
+  }
+}