Angular如何动态加载编译期未知的组件？

Great question! This is absolutely achievable in Angular—you can dynamically load and use user-uploaded components without rebuilding or restarting your app. Here are the most practical, production-ready approaches to make this work:

Angular's Module Federation (via the @angular-architects/module-federation plugin) is my go-to solution here. It’s robust, production-ready, and lets you load independently compiled Angular components/modules as remote resources directly into your main app, no restarts required.

• How it works:

  • Guide users to package their components as pre-built remote modules (or build a tool to handle this packaging automatically for them)
  • Store these remote module bundles (like remoteEntry.js) in a file storage service (e.g., a simple Node.js server, cloud storage)
  • In your main app, dynamically fetch the remote entry and load the component using loadRemoteModule, then render it with Angular’s dynamic component APIs

• Quick code example:

  import { loadRemoteModule } from '@angular-architects/module-federation';
  import { ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
  
  constructor(
    private viewContainerRef: ViewContainerRef,
    private cfr: ComponentFactoryResolver
  ) {}
  
  async loadUserUploadedComponent(remoteEntryUrl: string) {
    try {
      const remoteModule = await loadRemoteModule({
        type: 'module',
        remoteEntry: remoteEntryUrl,
        exposedModule: './UploadedComponent' // Matches what the remote module exposes
      });
  
      const componentFactory = this.cfr.resolveComponentFactory(remoteModule.UploadedComponent);
      this.viewContainerRef.createComponent(componentFactory);
    } catch (err) {
      console.error('Failed to load remote component:', err);
    }
  }
  

Package user-uploaded components as standard Web Components using Angular Elements. This turns Angular components into framework-agnostic custom elements that your main app can render like any native HTML tag.

• How it works:

  • Users compile their components into a single JS file using @angular/elements (this wraps the Angular component into a Web Component)
  • Your main app dynamically loads this JS file via a <script> tag, then can either add the custom tag directly to the template or create it dynamically with document.createElement

• Heads up: Make sure the uploaded component uses the same major Angular version as your main app to avoid dependency conflicts. Web Components offer basic sandboxing, but you still need to validate uploaded code for security risks.

Before Angular 9’s default AOT compilation, JIT (Just-in-Time) compilation allowed compiling components at runtime. You can still enable this, but it’s less performant and not ideal for production.

• How it works:

  • Enable JIT in your main app by importing @angular/compiler and adjusting your Angular config
  • Users upload component metadata (the component class, template string, styles, etc.)
  • Your app compiles the component on the fly using Compiler.compileModuleAndAllComponentsSync, then renders it dynamically

• Example snippet:

  import { Compiler, NgModule } from '@angular/core';
  
  constructor(private compiler: Compiler, private viewContainerRef: ViewContainerRef) {}
  
  compileAndRenderComponent(componentClass: any, template: string) {
    // Create a dynamic module for the component
    @NgModule({
      declarations: [componentClass]
    })
    class DynamicComponentModule {}
  
    // Compile the module and component
    const moduleFactory = this.compiler.compileModuleAndAllComponentsSync(DynamicComponentModule);
    const componentFactory = moduleFactory.componentFactories.find(f => f.componentType === componentClass);
    
    // Render the component
    this.viewContainerRef.createComponent(componentFactory);
  }
  

Critical Considerations #

• Security: User-uploaded code poses a huge risk. Always sanitize, audit, or sandbox components (e.g., using iframes) to prevent malicious code execution.
• Dependency Management: Ensure uploaded components don’t bring conflicting versions of Angular or other libraries. You can enforce shared dependencies via Module Federation.
• Cleanup: Don’t forget to destroy dynamically loaded components when they’re no longer needed to avoid memory leaks.

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