Angular 在'；不安全评估'；错误

应用内容安全策略后，在angular应用程序的index.html文件中，应用程序出现“不安全评估”控制台错误，如下所示-

core.js:4442 ERROR Error: Uncaught (in promise): EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".

    at new Function (<anonymous>)
    at JitEvaluator.evaluateCode (compiler.js:6740)
    at JitEvaluator.evaluateStatements (compiler.js:6714)
    at CompilerFacadeImpl.jitExpression (compiler.js:19300)
    at CompilerFacadeImpl.compileNgModule (compiler.js:19238)
    at Function.get (core.js:25864)
    at getNgModuleDef (core.js:1853)
    at new NgModuleFactory$1 (core.js:24270)
    at Compiler_compileModuleSync__POST_R3__ (core.js:27085)
    at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (core.js:27090)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27483)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

这是routes.json，我试图在其中构建loadChildren中编写的配置-

{
路径：“”，
组件名称：“dummy”，
儿童：[
{
路径：“”，
路径匹配：“已满”，
重定向到：“设置焦点操作”，
},
{
路径：“设置焦点操作”，
装载儿童：{
路线：[
{
路径：“”，
组件名称：“dynamicType1”，
},
],
},
},
],
}

下面是构建模块的代码-

---

privatefeaturemodule（loadChildren:string）：可观察不幸的是，没有直接的解决方法。角度JIT编译器需要使用
新函数
，要生成动态模块，需要JIT编译器

因此，您有两个选项，添加
safe eval
作为内容源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval';" />



或者回到绘图板，重新评估您对动态模块的需求。一般来说，建议不要使用JIT，因为它会带来尺寸增加和速度降低。例如，最新的angular版本默认使用AOT，即使在
ng serve
模式下也是如此。
出现此问题的原因似乎是

这是问题的关键。我们只需将CSP meta标记添加到标准stackblitz应用程序的页面标题：

<meta http-equiv="Content-Security-Policy" content="default-src 'self';" />



CSP的支持将由

webpack能够向其加载的所有脚本添加
nonce

然而，这是：

提前（AOT）
编译（又名ng build--prod）分离出所有JavaScript代码
从index.html文件。不幸的是，CSS的处理不是很好
因为整洁和样式在所有组件中保持内联（有关跟踪信息，请参见）。所以，我们不得不忍受令人不快的风格
“不安全内联”

至于脚本，如果我们需要，“不安全内联”也是必需的
插件工作。会有办法的
虽然：基于nonce的CSP与严格的动态
指令。因此，如果使用nonce信任的脚本创建新的
脚本运行时，此新脚本也将被视为合法脚本

因此，根据Angular团队的建议，当前使用CSP标头的唯一方法是使用
“不安全的内联”
，并进行一些重构（即不使用延迟加载的模块？？？恐怖…）
您的问题太长了。。。你把你的文章剪下来怎么样？谢谢@TheFabio的回复。我已经在下面的链接中创建了我的问题的剪贴-如果你转到index.html文件，你会注意到那边的CSP策略，如果你试图删除CSP策略，它将正确呈现。这就是我所说的冗长。。。您可能想从这场stackblitz中删除90%的代码，没有多少人会热衷于查看这么多文件Sure@TheFabio，我已经删除了额外的代码和文件。现在，它是一个在呈现动态延迟加载路由时重现此问题的最低版本。请重新阅读-显然有一种方法可以解决CSP标记限制中的“元组件”。但它看起来很黑。。。如果你想试一试，我就把它放在这儿