Angular运行时从其他服务器/CDN动态加载loadChildren的实现方法

Hey there! Let’s tackle your questions about splitting your Angular main app (Server A) and lazy modules (Server B) without compiling the entire project together. I’ve worked through similar setups using Module Federation, so I’ll break this down clearly:

1. Do I need to compile the entire project (including lazy modules) together? #

Nope, you don’t. The whole point of this setup is to treat your lazy modules as independent units. You can build the main app and each lazy module completely separately—no need to have them in the same monorepo or compile them in one go. The main app only needs to know the runtime location of the remote modules to load them.

2. Can I compile only the lazy modules and link them to the main module via loadChildren? #

Absolutely—that’s the core of what you’re trying to do! But a heads-up: you can’t just point loadChildren directly to a raw HTTP URL like your initial example shows. Angular needs a way to resolve and load the remote module correctly at runtime. That’s where Angular Module Federation comes in—it’s the official tool for handling remote module sharing in Angular apps.

3. How to bundle the main project and lazy modules separately? #

Here’s a practical step-by-step approach using the @angular-architects/module-federation package (it simplifies webpack config for Module Federation):

• Set up the main app (Host):

  1. Add Module Federation to your main app with ng add @angular-architects/module-federation --project main-app --port 4200 (adjust the project name and port as needed).
  2. In the generated webpack.config.js, configure the remote modules you want to load. For example:

     module.exports = withModuleFederationPlugin({
       remotes: {
         m1: "m1@http://server-b.com/m1/remoteEntry.js",
         m2: "m2@http://server-b.com/m2/remoteEntry.js",
       },
     });
     

• Set up each lazy module (Remote):

  1. Create a new Angular project for each lazy module (e.g., m1, m2).
  2. Add Module Federation to each remote project with ng add @angular-architects/module-federation --project m1 --port 4201 --type remote.
  3. In the remote’s webpack.config.js, expose the lazy module you want to share:

     module.exports = withModuleFederationPlugin({
       name: "m1",
       exposes: {
         "./FirstLazyModule": "./src/app/first-lazy/first-lazy.module.ts",
       },
     });
     

  4. Build the remote module with ng build m1—this generates a bundle you can deploy to Server B.

• Update main app routes:
  Now you can reference the remote modules in your routes using the alias you defined:

  const routes: Routes = [
    { 
      path: 'M1', 
      loadChildren: () => import('m1/FirstLazyModule').then(m => m.FirstLazyModule),
      canActivate: [m1Guard]
    },
    { 
      path: 'M2', 
      loadChildren: () => import('m2/SecondLazyModule').then(m => m.SecondLazyModule),
      canActivate: [m2Guard]
    }
  ];
  

4. After separating, do lazy modules need platformBrowserDynamic().bootstrapModule(FirstLazyModule)? #

Definitely not. That line is for bootstrapping the root module of a full Angular application. Your lazy modules are just feature modules—they only need the @NgModule decorator (like your example code) to define their components, routes, and imports. The main app’s root module handles bootstrapping the entire app, and the remote modules are loaded on demand as feature modules.

A quick note on your original example: Directly using a raw HTTP URL in loadChildren won’t work because Angular can’t resolve the module’s exports from a plain JS file. Module Federation handles the underlying module resolution and loading, so it’s essential for this setup.

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