Angular 4/5组件中使用new Function()报错，求解决指导

你遇到的问题是Angular的AOT（提前编译）机制导致的——ngc就是Angular的AOT编译器，它会对代码进行静态分析，而new Function()属于动态生成代码的方式，AOT编译器无法解析这种动态逻辑，因此抛出了编译错误。

解决方案分两种情况： #

1. 无需动态执行字符串代码（推荐）

如果你的代码逻辑是固定的，完全不需要把代码写成字符串再用new Function()执行，直接把逻辑写在方法里即可，这也是Angular推荐的写法：

public clickEvent() {
  setTimeout(() => {
    alert('Time Out fired');
  }, 100);
  alert('Hello');
  return false;
}

这种写法不仅能通过AOT编译，还更易读、易维护，也避免了动态代码带来的安全风险。

2. 必须动态执行字符串代码（不推荐，谨慎使用）

如果你的代码字符串是动态获取的（比如从后端接口返回），确实需要执行它，可以用eval()替代new Function()，但要注意**eval()存在XSS攻击风险和性能问题**，使用前一定要确保代码来源安全：

public clickEvent() {
  const myString = "setTimeout(function() {alert('Time Out fired')}, 100); alert('Hello'); return false;";
  // 借助window对象绕过AOT的静态检查
  (window as any).eval(myString);
}

为什么new Function()不行？ #

Angular AOT编译的核心是提前把组件、模板等编译成浏览器可直接运行的代码，它需要在编译期就能确定所有代码逻辑。new Function()是在运行时动态生成函数，编译器无法提前分析这段代码的内容，因此会直接报错阻止编译。

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