ModuleManager

This component loads and initializes each module. It works with moduleCatalog and ModuleLoader to download modules if there are remote, then it loads the module's assemblies into the application domain.

Sometimes there are dependencies between modules, and they should be initialized in a specific order. The ModuleManager keeps track of these dependencies and initializes accordingly.

Module structure. Take it from Silverlight documentation

ModuleManager in Typescript

The framework has an implementation that mimics the ModuleManager. This class has a reference to the moduleCatalog to have access to the modules. In addition, it contains a reference to the DependencyContainer to instance each module when is required.

@injectable()
export class ModuleManager implements IModuleManager {
    constructor(
        @inject(moduleCatalogInjectionToken) private moduleCatalog: IModuleCatalog,
        @inject(containerInjectionToken) private diContainer: DependencyContainer) {
    }
    
    ...
}

load module from the startup Application

Loading a Module in Typescript

loading at application startup

When the application starts in Angular, the application modules are registered in the ModuleCatalog, then the Bootstrapper calls the run method of the ModuleManager and initializes the application's module.

/**
     * Executes the module manager initialization
     *
     * @memberof ModuleManager
     */
    Run(): void {
                
        ...

         else {
            this.loadQueue();
        }
    }
    
    /** 
     * Try to start the module
     **/
    private loadQueue(): void {
        if (this.modulesQueue?.length > 0) {
            while (this.modulesQueue.length > 0) {
                const module = this.getFirstModuleInQueue();
                if (module.module.State === ModuleState.NotStarted) {
                    if (this.tryToStartModuleLoad(module)) {
                        return;
                    }
                }
                else if(module.module.State === ModuleState.Initializing) {
                    if (this.promisesDictionary[module.name]) {
                        this.promisesDictionary[module.name].then(() => { this.loadQueue(); });
                        return;
                    }
                } else {
                    console.log('Skipping loading for ' + this.modulesQueue[0]);
                }
            }
        }
        
        ...
    }

Examining the TryToStartModuleLoad method in some point, the loadModule is called. The loadModule method tries to initialize the module. There are three cases to initialize it.

The first case uses the file generated in the migration process called ExternalModelConfig.ts with all the module path and imports, then it tries to Initialize the module.

private loadModule(moduleInfo: ModuleInfo): (Promise<unknown> | null) {
        moduleInfo.State = ModuleState.Initializing;
        if (moduleInfo.Ref) {
            const importfunc = ExternalFragmentRegistry.registrations[moduleInfo.ModuleName]
                ?? ExternalFragmentRegistry.registrations[moduleInfo.Ref.replace(/^.*\/([^/]+)\.xap$/, '$1')]
                ?? ExternalFragmentRegistry.registrations[moduleInfo.Ref.replace(/^([^/]+)\.xap$/, '$1')];
            if (importfunc) {
                return importfunc().then((m) => {
                    console.log('Initializing module: ' + moduleInfo.ModuleType);
                    const theClass = m[moduleInfo.ModuleType.replace(/^[^,]*\.([^\.,]+)\,.*$/, '$1')];
                    if (!theClass) {
                        console.error('Could not resolve class name for module type: ' + moduleInfo.ModuleType);
                    }
                    const moduleInstance = this.diContainer.resolve(theClass) as any;
                    moduleInstance.Initialize();
                    moduleInfo.State = ModuleState.Initialized;
                    delete this.promisesDictionary[moduleInfo.ModuleName];
                });
            } else {
                console.error(`Unable to find module registration for ${moduleInfo.ModuleName}, type: ${moduleInfo.ModuleType}, ref: ${moduleInfo.Ref}`);
            }
        }
        ...
    }

The second case tries to initialize it using the RuntimeTypeInfo. it will search in the container for any type register with that type and tries to instance.

private loadModule(moduleInfo: ModuleInfo): (Promise<unknown> | null) {
        moduleInfo.State = ModuleState.Initializing;
        
        ...
        
        else if (moduleInfo.RuntimeTypeInfo) {
            const moduleInstance = this.diContainer.resolve(moduleInfo.RuntimeTypeInfo.JSType) as any;
            moduleInstance.Initialize();
            moduleInfo.State = ModuleState.Initialized;
            delete this.promisesDictionary[moduleInfo.ModuleName];
        } 
        
        ...
    }

The third case tries to initialize it using the ModuleType.

private loadModule(moduleInfo: ModuleInfo): (Promise<unknown> | null) {
        moduleInfo.State = ModuleState.Initializing;
        
        ...
        
        else if (!moduleInfo.RuntimeTypeInfo && moduleInfo.ModuleType){
            const theClassName = moduleInfo.ModuleType.split(',')[0]; 
            const theClass = TypeResolver.getClassType(theClassName);
            if (!theClass) {
                console.error('Could not resolve class name for module type: ' + moduleInfo.ModuleType);
                return null;
            }
            const moduleInstance = this.diContainer.resolve(theClass) as any;
            moduleInstance.Initialize();
            moduleInfo.State = ModuleState.Initialized;
            delete this.promisesDictionary[moduleInfo.ModuleName];
        }
        
        ...
    }

Look the next diagram to see the complete process to load a module:

Loading manually

After a module is specified as on demand, the application can then ask the module to be loaded.

A Silverlight C# sample:

private void OnLoadModuleCClick(object sender, RoutedEventArgs e)
{
 moduleManager.LoadModule("ModuleC");
}

The framework in Typescript provides the same method to call and load a module.

/**
     * Loads the specified module
     * @param {string} moduleName    
     */
    public LoadModule(moduleName: string): void {
        let locatedModuleInfo: ModuleLoadingNode = null;
        this.initializeModulesDictionary(this.moduleCatalog.Modules);
        locatedModuleInfo = this.modulesDictionary[moduleName];

        if (locatedModuleInfo && locatedModuleInfo.module.State === ModuleState.NotStarted) {
            this.modulesQueue = this.modulesQueue ?? [];
            addToQueue(locatedModuleInfo, this.modulesQueue);
            this.loadQueue();
        }
    }