feat: align with angular 15

Author: manfredsteyer

libs/mf-runtime/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@angular-architects/module-federation-runtime",
   "license": "MIT",
-  "version": "14.3.14",
+  "version": "15.0.0",
   "peerDependencies": {
-    "@angular/common": ">=14.0.0",
-    "@angular/core": ">=14.0.0"
+    "@angular/common": ">=15.0.0",
+    "@angular/core": ">=15.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

libs/mf-runtime/src/lib/loader/dynamic-federation.ts

@@ -164,16 +164,32 @@ export type LoadRemoteModuleManifestOptions = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function loadRemoteModule<T = any>(remoteName: string, exposedModule: string): Promise<T>;
+export async function loadRemoteModule<T = any>(options: LoadRemoteModuleOptions): Promise<T>
 export async function loadRemoteModule<T = any>(
-  options: LoadRemoteModuleOptions
+  optionsOrRemoteName: LoadRemoteModuleOptions | string,
+  exposedModule?: string
 ): Promise<T> {
   let loadRemoteEntryOptions: LoadRemoteEntryOptions;
   let key: string;
   let remoteEntry: string;
+  let options: LoadRemoteModuleOptions;
+
+  if (typeof optionsOrRemoteName === 'string') {
+    options = {
+      type: 'manifest',
+      remoteName: optionsOrRemoteName,
+      exposedModule: exposedModule
+    }
+  }
+  else {
+    options = optionsOrRemoteName;
+  }
 
   // To support legacy API (< ng 13)
   if (!options.type) {
-    options.type = 'script';
+    const hasManifest = Object.keys(config).length > 0;
+    options.type = hasManifest ? 'manifest' : 'script';
   }
 
   if (options.type === 'manifest') {
@@ -230,6 +246,15 @@ export function getManifest<T extends Manifest>(): T {
   return config as T;
 }
 
+export async function initFederation(manifest: string | ManifestFile, skipRemoteEntries = false): Promise<void> {
+  if (typeof manifest === 'string') {
+    return loadManifest(manifest, skipRemoteEntries);
+  }
+  else {
+    return setManifest(manifest, skipRemoteEntries);
+  }
+}
+
 export async function loadManifest(
   configFile: string,
   skipRemoteEntries = false
@@ -249,7 +274,7 @@ export async function loadManifest(
 
 function parseConfig(config: ManifestFile): Manifest {
   const result: Manifest = {};
-  for (let key in config) {
+  for (const key in config) {
     const value = config[key];
 
     let entry: RemoteConfig;
@@ -273,7 +298,7 @@ function parseConfig(config: ManifestFile): Manifest {
 async function loadRemoteEntries() {
   const promises: Promise<void>[] = [];
 
-  for (let key in config) {
+  for (const key in config) {
     const entry = config[key];
 
     if (entry.type === 'module') {

libs/mf-tools/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@angular-architects/module-federation-tools",
-  "version": "14.3.14",
+  "version": "15.0.0",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=14.0.0",
-    "@angular/core": ">=14.0.0",
-    "@angular/router": ">=14.0.0",
-    "@angular-architects/module-federation": "^14.3.14",
-    "@angular/platform-browser": ">=14.0.0",
+    "@angular/common": ">=15.0.0",
+    "@angular/core": ">=15.0.0",
+    "@angular/router": ">=15.0.0",
+    "@angular-architects/module-federation": "^15.0.0",
+    "@angular/platform-browser": ">=15.0.0",
     "rxjs": ">= 6.0.0"
   },
   "dependencies": {

libs/mf/README.md

@@ -12,7 +12,7 @@ Big thanks to the following people who helped to make this possible:
 
 ## Prequisites
 
-- Angular CLI 12 or higher (13, 14)
+- Angular CLI 12 or higher (13, 14, 15)
 
 ## Motivation 💥
 
@@ -39,6 +39,7 @@ Since Version 1.2, we also provide some advanced features like:
 - Angular 12: @angular-architects/module-federation: ^12.0.0
 - Angular 13: @angular-architects/module-federation: ~14.2.0
 - Angular 14: @angular-architects/module-federation: ^14.3.0
+- Angular 15: @angular-architects/module-federation: ^15.0.0
 
 Beginning with Angular 13, we had to add some changes to adjust to the Angular CLI. Please see the next section for this.
 
@@ -50,7 +51,7 @@ This library supports `ng update`:
 ng update @angular-architects/module-federation
 ```
 
-If you update by hand (e. g. via `npm install`), make sure you also install a respective version of ngx-build-plus (version 14 for Angular 14, version 13 for Angular 13, etc.)
+If you update by hand (e. g. via `npm install`), make sure you also install a respective version of ngx-build-plus (version 15 for Angular 15, version 14 for Angular 14, version 13 for Angular 13, etc.)
 
 ## Upgrade from Angular 12 or lower
 

libs/mf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/module-federation",
-  "version": "14.3.14",
+  "version": "15.0.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
@@ -17,7 +17,7 @@
   "schematics": "./collection.json",
   "builders": "./builders.json",
   "dependencies": {
-    "@angular-architects/module-federation-runtime": "14.3.14",
+    "@angular-architects/module-federation-runtime": "15.0.0",
     "word-wrap": "^1.2.3",
     "callsite": "^1.0.0",
     "node-fetch": "^2.6.7",

libs/mf/src/schematics/mf/schematic.ts

@@ -85,9 +85,9 @@ function makeMainAsync(main: string, options: MfSchematicSchema): Rule {
 
     let newMainContent = '';
     if (options.type === 'dynamic-host') {
-      newMainContent = `import { loadManifest } from '@angular-architects/module-federation';
+      newMainContent = `import { initFederation } from '@angular-architects/module-federation';
 
-loadManifest("/assets/mf.manifest.json")
+initFederation('/assets/mf.manifest.json')
   .catch(err => console.error(err))
   .then(_ => import('./bootstrap'))
   .catch(err => console.error(err));
@@ -386,11 +386,11 @@ export default function config(options: MfSchematicSchema): Rule {
 
     const dep = getPackageJsonDependency(tree, 'ngx-build-plus');
 
-    if (!dep || !semver.satisfies(dep.version, '>=14.0.0')) {
+    if (!dep || !semver.satisfies(dep.version, '>=15.0.0')) {
       addPackageJsonDependency(tree, {
         name: 'ngx-build-plus',
         type: NodeDependencyType.Dev,
-        version: '^14.0.0',
+        version: '^15.0.0',
         overwrite: true,
       });
 

libs/mf/src/server/colors.ts

@@ -29,22 +29,14 @@ export function print(prefix: string, prefixSize: number, message: string, error
         .update(prefix)
         .digest("hex");
 
-    const color = '#' + correctColor(hash.substring(6,6));
+    const color = '#' + correctColor(hash.substring(6,12));
 
     prefix = prefix.padEnd(prefixSize);
 
     if (message.endsWith('\n')) {
         message = message.substring(0, message.length-1);
     }
 
-  const color = '#' + correctColor(hash.substr(6, 6));
-
-  prefix = prefix.padEnd(prefixSize);
-
-  if (message.endsWith('\n')) {
-    message = message.substr(0, message.length - 1);
-  }
-
   const coloredPrefix = chalk.hex(color)(prefix) + ' | ';
   const lines = message.split('\n');
 

libs/mf/src/server/workspace.ts

@@ -1,7 +1,14 @@
 import * as fs from 'fs';
+import * as path from 'path';
 
 export type ProjectType = 'application' | 'library';
 
+export interface NxOrCliWorkspaceDef {
+  projects: {
+    [name: string]: Project | string;
+  };
+}
+
 export interface WorkspaceDef {
   projects: {
     [name: string]: Project;
@@ -49,7 +56,25 @@ export function readWorkspaceDef(): WorkspaceDef {
     throw new Error('This is not an Angular workspace!');
   }
   const content = fs.readFileSync(fileName, { encoding: 'utf-8' });
-  return JSON.parse(content);
+  const nxOrCliWorspaceDef = JSON.parse(content) as NxOrCliWorkspaceDef;
+  const worspaceDef = toCliWorkspaceDef(nxOrCliWorspaceDef);
+  return worspaceDef;
+}
+
+function toCliWorkspaceDef(def: NxOrCliWorkspaceDef): WorkspaceDef {
+  const result: WorkspaceDef = { projects: {} };
+  for(const key in def.projects) {
+    const project = def.projects[key];
+
+    if (typeof project === 'string') {
+      const def = path.join(project, 'project.json');
+      result.projects[key] = loadProjectDef(def);
+    }
+    else {
+      result.projects[key] = project;
+    }
+  }
+  return result; 
 }
 
 export function readProjectInfos(): ProjectInfo[] {
@@ -67,3 +92,17 @@ export function readProjectInfos(): ProjectInfo[] {
       } as ProjectInfo)
   );
 }
+
+function loadProjectDef(projectDef: string): Project {
+  try {
+    const def = JSON.parse(fs.readFileSync(projectDef, 'utf-8'));
+    if (!def.architect) {
+      def.architect = def.targets;
+    }
+    return def;
+  }
+  catch {
+    throw new Error(`File ${projectDef} not found. Please start this command from your workspace root.`);
+  }
+}
+

libs/mf/src/utils/share-utils.ts

@@ -132,9 +132,9 @@ function getSecondaries(
   includeSecondaries: IncludeSecondariesOptions,
   packagePath: string,
   key: string,
-  shareObject: SharedConfig
+  shareObject: SharedConfig,
+  exclude = [...DEFAULT_SECONARIES_SKIP_LIST],
 ): Record<string, SharedConfig> {
-  let exclude = [...DEFAULT_SECONARIES_SKIP_LIST];
 
   if (typeof includeSecondaries === 'object') {
     if (Array.isArray(includeSecondaries.skip)) {
@@ -192,7 +192,7 @@ function readConfiguredSecondaries(
       key != '.' &&
       key != './package.json' &&
       !key.endsWith('*') &&
-      exports[key]['default']
+      (exports[key]['default'] || typeof exports[key] === 'string')
   );
 
   const result = {} as Record<string, SharedConfig>;
@@ -216,7 +216,7 @@ function readConfiguredSecondaries(
 
 export function shareAll(
   config: CustomSharedConfig = {},
-  skip: string[] = DEFAULT_SKIP_LIST,
+  skip: string[] = [...DEFAULT_SKIP_LIST, ...DEFAULT_SECONARIES_SKIP_LIST],
   packageJsonPath = ''
 ): Config {
   if (!packageJsonPath) {
@@ -236,14 +236,18 @@ export function shareAll(
     share[key] = { ...config };
   }
 
-  return module.exports.share(share, packageJsonPath);
+  return module.exports.share(share, packageJsonPath, skip);
 }
 
 export function setInferVersion(infer: boolean): void {
   inferVersion = infer;
 }
 
-export function share(shareObjects: Config, packageJsonPath = ''): Config {
+export function share(
+  shareObjects: Config, 
+  packageJsonPath = '',
+  skip: string[] = DEFAULT_SECONARIES_SKIP_LIST): Config {
+
   if (!packageJsonPath) {
     packageJsonPath = cwd();
   }
@@ -283,7 +287,8 @@ export function share(shareObjects: Config, packageJsonPath = ''): Config {
         includeSecondaries,
         packagePath,
         key,
-        shareObject
+        shareObject,
+        skip,
       );
       addSecondaries(secondaries, result);
     }

libs/mf/src/utils/with-mf-plugin.ts

@@ -1,17 +1,25 @@
-import { findRootTsConfigJson, shareAll } from './share-utils';
+import { DEFAULT_SECONARIES_SKIP_LIST, DEFAULT_SKIP_LIST, findRootTsConfigJson, shareAll } from './share-utils';
 import { SharedMappings } from './shared-mappings';
 import { ModifyEntryPlugin } from './modify-entry-plugin';
 
-const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+import ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
 export function withModuleFederationPlugin(config: unknown) {
-  const sharedMappings = config['sharedMappings'];
+  const sharedMappings = config['sharedMappings'] || [];
   delete config['sharedMappings'];
 
+  const skip = [
+    ...DEFAULT_SKIP_LIST, 
+    ...DEFAULT_SECONARIES_SKIP_LIST,
+    ...(config['skip'] || [])
+  ];
+
+  delete config['skip'];
+
   const mappings = new SharedMappings();
-  mappings.register(findRootTsConfigJson(), sharedMappings);
+  mappings.register(findRootTsConfigJson(), sharedMappings.filter(m => !skip.includes(m)));
 
-  setDefaults(config, mappings);
+  setDefaults(config, mappings, skip);
   const modifyEntryPlugin = createModifyEntryPlugin(config);
 
   const isModule = config['library']?.['type'] === 'module';
@@ -45,7 +53,7 @@ export function withModuleFederationPlugin(config: unknown) {
   };
 }
 
-function setDefaults(config: unknown, mappings: SharedMappings) {
+function setDefaults(config: unknown, mappings: SharedMappings, skip: string[]) {
   if (!config['library']) {
     config['library'] = {
       type: 'module',
@@ -61,7 +69,7 @@ function setDefaults(config: unknown, mappings: SharedMappings) {
       singleton: true,
       strictVersion: true,
       requiredVersion: 'auto',
-    });
+    }, skip);
   }
 
   if (typeof config['shared'] === 'object') {
@@ -102,7 +110,7 @@ function createModifyEntryPlugin(config: unknown) {
     );
   }
 
-  let modifyEntryConfig = {};
+  const modifyEntryConfig = {};
   let modifyEntryPlugin = null;
   if (hasPinned) {
     modifyEntryConfig['main'] = { import: pinned };