Merge branch 'main' of https://github.com/angular-architects/module-federation-plugin

Author: manfredsteyer

libs/mf-tools/src/lib/web-components/router-utils.ts

@@ -21,18 +21,20 @@ export function endsWith(prefix: string): UrlMatcher {
 }
 
 export function connectRouter(router: Router, useHash = false): void {
-  let url: string;
-  if (!useHash) {
-    url = `${location.pathname.substr(1)}${location.search}`;
-    router.navigateByUrl(url);
-    window.addEventListener('popstate', () => {
-      router.navigateByUrl(url);
-    });
-  } else {
-    url = `${location.hash.substr(1)}${location.search}`;
-    router.navigateByUrl(url);
-    window.addEventListener('hashchange', () => {
-      router.navigateByUrl(url);
-    });
-  }
+
+    let url: string;
+    if (!useHash) {
+        url = `${location.pathname.substring(1)}${location.search}`;
+        router.navigateByUrl(url);
+        window.addEventListener('popstate', () => {
+            router.navigateByUrl(url);
+        });
+    }
+    else {
+        url = `${location.hash.substring(1)}${location.search}`;
+        router.navigateByUrl(url);
+        window.addEventListener('hashchange', () => {
+            router.navigateByUrl(url);
+        });
+    }
 }

libs/mf-tools/src/lib/web-components/web-component-wrapper.ts

@@ -17,6 +17,7 @@ export type WebComponentWrapperOptions = LoadRemoteModuleOptions & {
 };
 
 @Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'mft-wc-wrapper',
   template: '<div #vc></div>',
 })

libs/mf/README.md

@@ -72,8 +72,8 @@ If you start from the scratch, `ng add` will take care of these settings.
 
 ### Nx
 
-1. `npm install @angular-architects/module-federation`
-2. `ng g @angular-architects/module-federation:init`
+1. `npm install --save-dev @angular-architects/module-federation`
+2. `nx g @angular-architects/module-federation:init`
 3. Adjust the generated `webpack.config.js` file
 4. Repeat this for further projects in your workspace (if needed)
 

libs/mf/src/server/colors.ts

@@ -1,6 +1,6 @@
-const crypt = require('crypto');
-const chalk = require('chalk');
-const wordWrap = require('word-wrap');
+import crypt = require("crypto");
+import chalk = require("chalk");
+import wordWrap = require("word-wrap");
 
 function correctColor(color: string): string {
   let result = '';
@@ -23,13 +23,19 @@ function correctColor(color: string): string {
   return result;
 }
 
-export function print(
-  prefix: string,
-  prefixSize: number,
-  message: string,
-  error = false
-): void {
-  const hash = crypt.createHash('sha256').update(prefix).digest('hex');
+export function print(prefix: string, prefixSize: number, message: string, error = false): void {
+    
+  const hash = crypt.createHash("sha256")
+        .update(prefix)
+        .digest("hex");
+    
+    const color = '#' + correctColor(hash.substring(6,6));
+    
+    prefix = prefix.padEnd(prefixSize);
+
+    if (message.endsWith('\n')) {
+        message = message.substring(0, message.length-1);
+    }
 
   const color = '#' + correctColor(hash.substr(6, 6));
 

libs/mf/src/server/task-queue.ts

@@ -1,7 +1,7 @@
 export type DoneFn = () => void;
 export type Task = (done: DoneFn) => void;
 
-let queue: Task[] = [];
+const queue: Task[] = [];
 
 // tslint:disable-next-line: no-shadowed-variable
 function peek<T>(queue: Array<T>): T {