Angular 5企业级应用架构咨询：动态组件与Shell加载问题

Great questions! Let's break down each one with practical solutions and best practices tailored for enterprise-grade applications:

The short answer is yes—you absolutely can load components dynamically without adding them to entryComponents, and there are several approaches depending on your Angular version:

Ivy Compiler (Angular 9+) #

Starting with Angular 9, the Ivy compiler eliminates the need for entryComponents entirely. Ivy can automatically detect components that are loaded dynamically (even via lazy imports) and compile them on demand. Here's a quick example using dynamic imports and ViewContainerRef:

// In your host component
import { ViewContainerRef, Component } from '@angular/core';

@Component({
  template: '<button (click)="loadWidget()">Load Widget</button><div #widgetContainer></div>'
})
export class DashboardComponent {
  @ViewChild('widgetContainer', { read: ViewContainerRef }) widgetContainer!: ViewContainerRef;

  async loadWidget() {
    // Dynamically import the component (bundled as a separate chunk)
    const { WeatherWidgetComponent } = await import('./widgets/weather.widget.component');
    // Create the component in the container
    this.widgetContainer.createComponent(WeatherWidgetComponent);
  }
}

This approach keeps your initial bundle small because the widget component is only loaded when the user triggers the action.

Standalone Components (Angular 14+) #

If you're on Angular 14 or newer, standalone components are the cleanest solution. These components don't require a NgModule at all, so you skip entryComponents and module declarations entirely:

// Standalone widget component
import { Component } from '@angular/core';

@Component({
  standalone: true,
  template: '<div class="weather-widget">🌡️ {{ temperature }}°C</div>'
})
export class WeatherWidgetComponent {
  temperature = 22;
}

// Loading it in the host component
async loadStandaloneWidget(vcr: ViewContainerRef) {
  const { WeatherWidgetComponent } = await import('./widgets/weather.widget.component');
  vcr.createComponent(WeatherWidgetComponent);
}

Dynamic NgModules (Pre-Ivy/Angular <9) #

For older Angular versions without Ivy, you can dynamically create a temporary NgModule that includes your component, then compile it on the fly. This avoids polluting your main module's entryComponents:

import { Compiler, NgModule, ViewContainerRef } from '@angular/core';

async loadLegacyDynamicComponent(vcr: ViewContainerRef, compiler: Compiler) {
  const { LegacyWidgetComponent } = await import('./widgets/legacy.widget.component');

  // Create a dynamic module with the component
  const dynamicModule = NgModule({
    declarations: [LegacyWidgetComponent],
    entryComponents: [LegacyWidgetComponent]
  })(class {});

  // Compile the module and create the component
  const moduleFactory = await compiler.compileModuleAndAllComponentsAsync(dynamicModule);
  const componentFactory = moduleFactory.componentFactories.find(f => f.componentType === LegacyWidgetComponent);
  vcr.createComponent(componentFactory!);
}

All these approaches ensure your initial bundle doesn't bloat with unused components—they're loaded only when needed.

Building an Angular Shell (host app) that loads separate Angular applications is a classic microfrontend use case. The most robust, enterprise-friendly approach is using Module Federation (built on Webpack 5, supported natively in Angular via the @angular-architects/module-federation package). Here's a step-by-step breakdown:

1. Set Up the Shell Application #

• Create a new Angular app as your shell, with a fixed Header, Footer, and a content outlet (either a router outlet or a ViewContainerRef for direct component loading).
• Install Module Federation:

  ng add @angular-architects/module-federation --project shell --port 4200
  

2. Configure Remote Applications #

For each Angular app you want to load into the shell:

• Create the app, then add Module Federation:

  ng add @angular-architects/module-federation --project remote-app --port 4201
  

• In the remote app's webpack.config.js, configure which modules/components to expose to the shell:

  // remote-app/webpack.config.js
  module.exports = withModuleFederationPlugin({
    name: 'remoteApp',
    exposes: {
      './DashboardModule': './src/app/dashboard/dashboard.module.ts',
      './UserWidget': './src/app/widgets/user.widget.component.ts'
    },
    shared: {
      ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' })
    }
  });
  

3. Load Remote Modules/Components in the Shell #

Option A: Router-Based Loading #

Integrate remote modules into the shell's routing system for seamless navigation:

// shell/app-routing.module.ts
import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'remote-dashboard',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './DashboardModule'
      }).then(m => m.DashboardModule)
  }
];

Option B: Direct Component Loading #

Load a remote component directly into a view container (great for your widget placeholder use case):

// shell/app.component.ts
import { ViewContainerRef, Component } from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';

@Component({
  template: '<header>Shell Header</header><div #widgetContainer></div><footer>Shell Footer</footer>'
})
export class ShellComponent {
  @ViewChild('widgetContainer', { read: ViewContainerRef }) widgetContainer!: ViewContainerRef;

  async loadRemoteWidget() {
    const remoteModule = await loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:4201/remoteEntry.js',
      exposedModule: './UserWidget'
    });

    this.widgetContainer.createComponent(remoteModule.UserWidget);
  }
}

4. Key Considerations for Enterprise Use #

• Dependency Sharing: Use the shared option in Module Federation to share common dependencies (like @angular/core, RxJS) between the shell and remotes. This reduces bundle size and avoids version conflicts.
• Version Compatibility: Ensure all remotes use the same major Angular version as the shell to avoid runtime errors.
• Inter-App Communication: Use RxJS Subjects, custom DOM events, or a shared state management library (like NgRx) to handle communication between the shell and remote apps.
• Error Handling: Add fallback UI for failed remote loads, and implement loading states for better user experience.

Alternative: Angular Elements #

If you need simpler integration (or support for non-Angular apps), you can package remote Angular apps as Web Components using Angular Elements. The shell can then use these components like regular HTML tags:

<!-- In the shell's template -->
<remote-dashboard-widget></remote-dashboard-widget>

This works well for isolated widgets but is less flexible than Module Federation for full application integration.

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