Building a Custom AMD Loader in Angular

Many web applications leverage asynchronous module definitions (AMD) for efficient loading of JavaScript modules. While Angular has its own robust module system, there are scenarios where integrating or mimicking AMD behavior within an Angular application can be beneficial, such as incorporating legacy libraries or specific architectural patterns. This challenge focuses on creating a foundational AMD loader service within your Angular application.

Problem Description

Your task is to develop a TypeScript service in Angular that can load JavaScript modules asynchronously using a simplified AMD-like loading mechanism. This service should allow you to define modules with their dependencies and then request these modules, ensuring that all dependencies are loaded before the module itself is executed.

Key Requirements:

1. Module Definition: Implement a way to register modules with their unique names, a factory function (which defines the module's content), and an array of their dependencies (other module names).
2. Dependency Resolution: The loader must be able to resolve the dependency tree for any requested module.
3. Asynchronous Loading: Modules should be loaded asynchronously. The service should handle fetching the module's code (simulated in this challenge) and executing its factory function only after all its dependencies are ready.
4. Caching: Once a module is loaded and executed, its instance (the return value of its factory function) should be cached to avoid re-loading or re-executing.
5. Error Handling: The loader should gracefully handle cases where a module cannot be found or a dependency is missing.

Expected Behavior:

• When a module is requested, the loader checks if it's already loaded.
• If not loaded, it checks if its dependencies are loaded.
• If dependencies are not loaded, it recursively requests them.
• Once all dependencies are loaded and available, the module's factory function is executed with its dependencies as arguments.
• The result of the factory function is cached and returned.

Important Edge Cases:

• Circular dependencies (though for this simplified challenge, we can assume no circular dependencies or implement basic detection).
• Modules that have no dependencies.
• Attempting to load a module that has not been defined.

Examples

Example 1:

// Module Definitions
loader.define('utils', [], () => {
  return {
    add: (a, b) => a + b
  };
});

loader.define('math', ['utils'], (utils) => {
  return {
    subtract: (a, b) => a - b,
    multiply: (a, b) => utils.add(a, b) * 2 // Using a dependency
  };
});

// Requesting a module
loader.load('math').subscribe(mathModule => {
  console.log(mathModule.subtract(10, 5)); // Expected: 5
  console.log(mathModule.multiply(3, 4)); // Expected: 26 (3+4)*2
});

Output: 5 26

Explanation: The math module is requested. It depends on utils. The loader first loads utils. utils has no dependencies and its factory returns an object with an add function. This is cached. Then, math is loaded. Its factory receives the cached utils object and returns an object with subtract and multiply functions. The math module is then cached and the subscriber receives it.

Example 2:

// Module Definitions
loader.define('config', [], () => {
  return {
    apiUrl: '/api/v1'
  };
});

loader.define('dataService', ['config'], (config) => {
  return {
    getData: () => fetch(config.apiUrl).then(res => res.json())
  };
});

// Requesting a module with no dependencies
loader.load('config').subscribe(configModule => {
  console.log(configModule.apiUrl); // Expected: '/api/v1'
});

// Requesting a module that depends on config
loader.load('dataService').subscribe(dataServiceModule => {
  console.log('Data service loaded:', dataServiceModule);
});

Output: /api/v1 Data service loaded: { getData: [Function: getData] }

Explanation: config is defined with no dependencies. dataService depends on config. When config is requested, it loads immediately and is cached. When dataService is requested, it sees config is loaded and then executes its factory, returning a dataService object.

Example 3 (Edge Case: Module Not Found):

// Module Definition
loader.define('myModule', [], () => ({ message: 'Hello' }));

// Attempting to load an undefined module
loader.load('nonExistentModule').subscribe({
  next: (module) => console.log('Loaded:', module),
  error: (err) => console.error('Error:', err.message) // Expected: Error: Module 'nonExistentModule' not found.
});

Output: Error: Module 'nonExistentModule' not found.

Explanation: The nonExistentModule has not been defined using loader.define. When loader.load is called for it, the loader throws an error indicating the module is not found.

Constraints

• The loader should be implemented as an Angular service.
• The service should use RxJS Observable or Subject to manage the asynchronous loading and notification of module readiness.
• The factory functions will receive their resolved dependencies as arguments in the order they are listed in the dependency array.
• For this challenge, you do not need to implement actual network fetching. You can simulate module loading by assuming that once define is called, the module's code is "available" and the factory can be called. The core logic is the dependency resolution and execution flow.
• The maximum depth of the dependency chain to consider for complexity is 10.
• The number of modules defined should not exceed 100.

Notes

Consider using a Map or an object to store defined modules and another Map or object to store already loaded and executed module instances. RxJS forkJoin or combineLatest might be useful for handling multiple dependencies loading concurrently. Think about how to manage the state of each module (e.g., 'pending', 'loaded', 'error'). The focus is on the logic of AMD loading within an Angular context.