基于ASP.NET Core 2与Angular 5的SPA动态模块化扩展方案咨询

Hey there! Let's break down how to implement dynamic module loading for your ASP.NET Core 2 + Angular 5 SPA project, where you can drop extension DLLs (and their Angular modules) into a subfolder and have the main app auto-load everything—APIs, navigation, and UI components included.

1. Backend: Dynamic API Controller Loading (ASP.NET Core) #

First, ASP.NET Core doesn't automatically scan external DLLs for controllers, so we need to explicitly load those assemblies and register them as application parts.

Step-by-Step Implementation #

• Create a helper service to scan your target extensions folder (e.g., ./Extensions) and load valid .NET assemblies:

  public class DynamicModuleLoader
  {
      public IEnumerable<Assembly> LoadExtensions(string extensionsPath)
      {
          var assemblyPaths = Directory.GetFiles(extensionsPath, "*.dll");
          var loadContext = new AssemblyLoadContext(null, isCollectible: true);
          
          foreach (var path in assemblyPaths)
          {
              using var stream = new FileStream(path, FileMode.Open);
              var assembly = loadContext.LoadFromStream(stream);
              yield return assembly;
          }
      }
  }
  

• In your Startup.cs, register these assemblies with the MVC/Controllers pipeline:

  public void ConfigureServices(IServiceCollection services)
  {
      var loader = new DynamicModuleLoader();
      var extensionAssemblies = loader.LoadExtensions(Path.Combine(Environment.ContentRootPath, "Extensions"));
      
      services.AddControllers()
              .AddApplicationParts(extensionAssemblies);
      // Rest of your service configuration...
  }
  

This will make the Web API recognize controllers from your extension DLLs automatically.

2. Frontend: Dynamic Angular Module Loading #

Angular 5 supports lazy loading, but dynamic loading of external modules requires a bit more work since Webpack's default setup is static. Here are two practical approaches:

Approach 1: Precompiled UMD Modules (Best for Loosely Coupled Extensions) #

Each Angular extension module (like your Contact module) should be compiled into a standalone UMD bundle, which you'll place in a static folder of the main app (e.g., wwwroot/extensions).

Key Steps:

• Compile Extension Modules: Configure your extension's Angular project to output a UMD bundle (update angular.json to set outputPath to a shared extensions folder, and set format to umd in your tsconfig.json).
• Dynamic Loading Service: Build a service in your main Angular app to fetch and load the UMD bundles:

  import { Injectable, Compiler, Injector, NgModuleRef } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class DynamicModuleLoaderService {
    constructor(private http: HttpClient, private compiler: Compiler, private injector: Injector) {}
  
    async loadModule(moduleUrl: string): Promise<NgModuleRef<any>> {
      // Fetch the UMD bundle
      const response = await this.http.get(moduleUrl, { responseType: 'text' }).toPromise();
      // Create a script element to load the module
      const script = document.createElement('script');
      script.textContent = response;
      document.body.appendChild(script);
  
      // Assume the module exposes a global variable (e.g., window.ContactModule)
      const moduleFactory = await this.compiler.compileModuleAndAllComponentsAsync(window.ContactModule);
      return moduleFactory.create(this.injector);
    }
  }
  

• Dynamic Navigation & Routing: Have each extension module expose a configuration class (e.g., ContactNavigationConfig) that defines menu items and routes. After loading the module, extract this config and inject it into your main app's navigation service and router:

  // Example: After loading the Contact module
  const moduleRef = await this.dynamicLoader.loadModule('/extensions/contact/contact.umd.js');
  const navConfig = moduleRef.injector.get(ContactNavigationConfig);
  
  // Add menu items to main navigation
  this.mainNavService.addItems(navConfig.menuItems);
  // Add routes to main router
  this.router.config.push(...navConfig.routes);
  

Approach 2: Angular CLI Multi-Project Setup (Best for Co-Managed Extensions) #

If your extensions are part of the same codebase as the main app, use Angular CLI's multi-project setup:

• Define each extension as a separate project in angular.json.
• Use Angular's standard lazy loading, but dynamically fetch route configurations from your backend (which knows which extensions are loaded). The backend can return a list of extension route paths, and your main app can add these routes to the router at runtime.

3. End-to-End Workflow Example #

Let's walk through how your Contact module would work:

1. Build the Extension:
   • Backend: Compile your Contact API project into a DLL, drop it into the main app's ./Extensions folder.
   • Frontend: Compile the Contact Angular module into a UMD bundle, drop it into wwwroot/extensions/contact.
2. Main App Startup:
   • Backend scans ./Extensions, loads the Contact DLL, and registers its controllers.
   • Frontend calls a backend API to get the list of loaded extensions, then loads each corresponding Angular UMD bundle.
   • The main app injects the Contact module's menu items into the navigation bar and adds its routes to the router.

Critical Notes #

• Version Compatibility: Ensure your extension modules use the same ASP.NET Core and Angular versions as the main app to avoid dependency conflicts.
• Security: Add validation steps to verify the integrity of loaded DLLs and JS bundles to prevent malicious code injection.
• Error Handling: Implement fallback logic for failed module loads—don't let one broken extension take down the entire app.

内容的提问来源于stack exchange，提问作者Hamix