如何通过<script>标签将Webpack构建的Angular 4组件嵌入静态网站？

绝对可以做到！我之前帮团队做过类似的Angular4组件嵌入静态页的需求，用Webpack打包成UMD模块就能通过<script>标签直接用，完全不用SystemJS。下面是一步步的实现方案：

1. 调整Webpack配置，打包成UMD格式 #

UMD（Universal Module Definition）格式兼容全局变量、AMD和CommonJS，刚好适合通过<script>标签直接引入。

如果你用Angular CLI（Angular4版本） #

修改.angular-cli.json（Angular4的配置文件）里的defaults.build字段，添加UMD相关配置：

"defaults": {
  "build": {
    "outputPath": "dist",
    "outputHashing": "all",
    "sourceMap": true,
    "extractCss": true,
    "namedChunks": false,
    "aot": false,
    "extractLicenses": true,
    "vendorChunk": true,
    "commonChunk": true,
    "baseHref": "",
    "deployUrl": "",
    "i18nFile": "",
    "i18nFormat": "xlf",
    "locale": "",
    "target": "umd", // 这里设置为umd格式
    "library": "MailWidget" // 全局变量名，后续静态页会用到
  }
}

如果你手动配置Webpack #

在Webpack的output字段里指定UMD格式和全局变量：

module.exports = {
  // ...其他配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'mail-widget.umd.js',
    library: 'MailWidget', // 全局变量名
    libraryTarget: 'umd',
    globalObject: 'this' // 确保在浏览器环境下正常运行
  }
};

2. 导出组件的初始化函数 #

在你的邮件窗口组件的入口模块（比如mail-widget.module.ts）里，编写一个全局可调用的初始化函数，用来手动启动Angular组件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { MailWidgetModule } from './mail-widget.module';
import { MailWidgetComponent } from './mail-widget.component';

// 定义初始化函数，接收挂载元素的ID
export function initMailWidget(elementId: string) {
  // 启动Angular模块
  platformBrowserDynamic().bootstrapModule(MailWidgetModule)
    .then(moduleRef => {
      // 获取组件实例，可以在这里传递参数（比如初始邮件内容）
      const appRef = moduleRef.injector.get(MailWidgetComponent);
      // 示例：给组件的输入属性赋值
      // appRef.mailSubject = '新消息提醒';
    })
    .catch(err => console.error('邮件组件初始化失败:', err));
}

// 把初始化函数挂载到window全局对象上
(window as any).MailWidget = { init: initMailWidget };

3. 打包组件 #

运行打包命令（Angular CLI用ng build，手动Webpack用webpack --mode production），得到打包后的mail-widget.umd.js和对应的CSS文件（如果组件有自定义样式）。

4. 在静态网站中嵌入组件 #

在目标静态页面的</body>前添加以下代码：

<!-- 先引入Angular4的核心依赖（版本要和你的项目完全一致！） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular/4.4.7/angular.min.js"></script>

<!-- 引入你的组件打包文件 -->
<script src="/path/to/mail-widget.umd.js"></script>
<!-- 引入组件样式 -->
<link rel="stylesheet" href="/path/to/mail-widget.css">

<!-- 准备挂载组件的DOM容器 -->
<div id="mail-widget-container"></div>

<!-- 初始化组件 -->
<script>
  // 调用全局初始化函数，传入容器ID
  MailWidget.init('mail-widget-container');
</script>

5. 关键注意事项 #

• 版本匹配：静态页引入的core-js、zone.js、Angular版本必须和你的Angular4项目依赖版本完全一致，否则会出现奇怪的兼容性问题。
• 样式隔离：如果组件样式污染了静态页的样式，可以给组件添加唯一的CSS类前缀，或者在组件中设置encapsulation: ViewEncapsulation.Native（Angular4对Shadow DOM的支持有限，需要测试）。
• 体积优化：可以用Webpack的externals配置把Angular核心依赖排除在打包文件外，让静态页通过CDN引入，大幅减小打包体积：

  // Webpack配置中的externals字段
  externals: {
    '@angular/core': 'ng.core',
    '@angular/common': 'ng.common',
    '@angular/platform-browser': 'ng.platformBrowser',
    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic'
  }
  

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