Angular跨服务器动态加载模块失败：LazyModule未定义

这个报错的核心原因很明确：你加载了远程脚本，但脚本里的LazyModule并没有按照你期望的方式暴露出来，导致代码尝试访问一个不存在的属性。结合你提到的Webpack 2打包方案，我给你梳理几个关键排查点和解决办法：

1. 先确认远程模块的Webpack配置是否正确暴露全局变量 #

Webpack打包独立模块时，必须显式配置让模块挂载到浏览器的全局作用域（比如window），否则Angular无法获取到模块。你需要在远程Node.js服务器上的模块webpack配置里，修改output项：

// 远程模块的webpack.config.js
module.exports = {
  // ...其他配置
  output: {
    filename: 'lazy-module.bundle.js',
    library: 'RemoteLazyBundle', // 自定义全局变量名，比如叫RemoteLazyBundle
    libraryTarget: 'window', // 指定挂载到window对象上
    libraryExport: 'LazyModule' // 明确指定要导出的模块名称
  }
};

同时，远程模块的入口文件（比如index.ts）要明确导出你的懒加载模块：

// 远程模块的index.ts
export { LazyModule } from './lazy.module';

2. 调整Angular侧加载脚本后的模块引用逻辑 #

你现在的代码可能直接尝试访问window.LazyModule，但实际Webpack打包后，模块会被包裹在你配置的全局变量里。比如按照上面的配置，模块会在window.RemoteLazyBundle下。修改你的加载回调：

// app.module.ts或负责加载的组件里
const script = document.createElement('script');
script.src = 'http://你的Node服务器地址/lazy-module.bundle.js';
script.onload = () => {
  // 这里要匹配Webpack导出的全局变量结构
  const remoteModule = window['RemoteLazyBundle'];
  if (!remoteModule) {
    console.error('远程模块未正确挂载到全局作用域');
    return;
  }
  // 使用Angular的Compiler动态编译模块
  this.compiler.compileModuleAndAllComponentsAsync(remoteModule)
    .then(result => {
      const moduleFactory = result.ngModuleFactory;
      // 动态添加路由配置
      this.router.config.push({
        path: 'lazy',
        loadChildren: () => moduleFactory
      });
      // 导航到懒加载路由
      this.router.navigate(['/lazy']);
    })
    .catch(err => console.error('编译模块失败:', err));
};
document.body.appendChild(script);

3. 确保Angular项目已正确注入Compiler服务 #

要动态编译模块，必须在AppModule中导入CompilerModule，并在组件中注入Compiler和Router：

// app.module.ts
import { NgModule, CompilerModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    // ...其他模块
    RouterModule.forRoot([]),
    CompilerModule // 必须导入这个才能使用Compiler服务
  ]
})
export class AppModule {}

// 负责加载的组件
import { Compiler } from '@angular/core';
import { Router } from '@angular/router';

@Component({...})
export class AppComponent {
  constructor(private compiler: Compiler, private router: Router) {}
}

4. 最后检查CORS配置（虽然脚本加载成功，但以防万一） #

如果你的Angular应用和Node服务器不在同一个域名下，要确保Node服务器配置了CORS允许脚本访问：

// Node.js服务器代码
const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors()); // 允许所有域名访问，生产环境可以指定具体域名
app.use(express.static('dist')); // 托管打包后的懒加载模块脚本

app.listen(3000, () => console.log('服务器运行在3000端口'));

按照上面的步骤调整后，应该就能正确获取到LazyModule并完成路由导航了。

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