Angular 18启用--optimization=true构建Angular Elements产物异常

问题背景 #

构建Angular 18的Angular Elements模块时，使用--optimization=false参数可正常完成编译，Web Component功能也能正常使用；但切换为--optimization=true后，构建过程无报错，不过引用该构建产物的应用会出现崩溃。

可能的原因 #

Angular的生产优化包含Tree Shaking、代码压缩混淆等操作，容易出现以下情况导致崩溃：

• 自定义元素注册逻辑被误判为无用代码而移除
• 组件类中的枚举LinkType因模板引用方式被Tree Shaking删除
• 代码压缩过程中类名、属性名被混淆，导致模板与组件类的绑定失效

解决方案 #

1. 调整Terser压缩配置，保留关键类名 #

在angular.json的项目构建配置中，修改优化选项，确保Terser不混淆枚举和组件类的名称：

"architect": {
  "build": {
    "options": {
      // ... 其他配置
      "optimization": {
        "scripts": true,
        "styles": true,
        "fonts": true,
        "terserOptions": {
          "keep_classnames": true,
          "keep_fnames": true
        }
      }
    }
  }
}

2. 显式保留枚举的引用 #

组件模板中直接使用了类属性LinkType，优化时可能被判定为未使用代码。在组件类中添加一个空方法，强制保留该枚举的引用：

export class LinkComponent {
  @Input() public href = '';
  @Input() public label = '';
  @Input() public type: LinkType = LinkType.INACTIVE;

  LinkType = LinkType;
  value = 0;

  handleButtonClick() {
    this.value = Math.random();
  }

  // 防止LinkType被Tree Shaking移除
  private _preserveLinkType(): LinkType {
    return this.LinkType.ACTIVE;
  }
}

3. 确保自定义元素注册逻辑不被优化 #

在注册代码中添加/*#__PURE__*/注释，告诉编译器这段代码有副作用，不能被移除：

createApplication()
 .then((app) => {
   /*#__PURE__*/
   const Link = createCustomElement(LinkComponent, {
    injector: app.injector,
   });
   customElements.define('app-link', Link);
})
.catch((err) => console.error(err));

4. 验证构建产物 #

构建完成后，检查dist目录下的主bundle文件（如main.js），确认customElements.define('app-link', ...)代码存在，且LinkType相关定义未被删除。

验证步骤 #

1. 应用上述修改后，执行ng build --optimization=true重新构建
2. 将构建产物引入测试应用，检查Web Component的以下功能：
   • 链接的类绑定（active状态）
   • 按钮点击后随机值的更新
   • *ngIf条件渲染的显示/隐藏

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