javascript - 由于 CSP，Angular 动画无法在 Firefox 上运行（在 polyfills.ts 中使用 web-animations-js）

问题描述

我在 Firefox（和 Safari）上应用 Angular 动画时遇到问题。是的，我知道有很多答案说你可以简单地添加它web-animations-js，polyfills.ts它应该可以解决问题。不幸的是，它不适用于我的情况。对于您的上下文，这是我们正在使用的 CSP 策略default-src 'self'; img-src: *。

这是动画代码：

    animations: [
        trigger('toggleCommunicationPanel', [
            state('close', style({
                maxWidth: '64px',
                width: '4vw'
            })),
            state('open', style({
                width: '25vw',
                minWidth: '480px'
            })),
            transition('open=>close', animate('250ms')),
            transition('close=>open', animate('250ms'))
        ])
    ]

这是一大块polyfills.ts

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

我已将 Angular 配置extract scss为一个大.css文件（以避免 CSP 问题）。因为默认情况下，Angular CLI 不会将您的样式提取到样式表文件中，而是会使用元素将样式注入到 DOM 中<style>，这是针对每个组件样式完成的。因此，您最终将在<style>元素中拥有很多<head>元素。这当然违反了上面的 CSP 规则。

我注意到，在 Chrome、IE 和 Edge 中，动画的 css 是按预期提取的，所以它工作正常。但是，在 Firefox 中，它是使用<style>element 注入的。

<style>@keyframes gen_css_kf_2 {
 0% {
  width: 492px;
  min-Width: 0px;
  max-Width: none;
  }
 100% {
  width: 4vw;
  min-Width: 0px;
  max-Width: 64px;
  }
}
</style>

所以我怀疑是因为这个，动画在 Firefox 上不起作用。解决方案可能是更改配置，以便 Angular CLI 为动画提取 css（即使我们使用的是 Firefox 或 Safari）。

这是的配置production，您可以看到extractCss已打开。

"configurations": {
    "production": {
        "fileReplacements": [{
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [{
                "type": "initial",
                "maximumWarning": "2mb",
                "maximumError": "5mb"
            },
            {
                "type": "anyComponentStyle",
                "maximumWarning": "6kb",
                "maximumError": "10kb"
            }
        ]
    },
    "es5": {
        "tsConfig": "./tsconfig.es5.json"
    }
}

标签： javascriptangularangular-animations

javascript - 由于 CSP，Angular 动画无法在 Firefox 上运行（在 polyfills.ts 中使用 web-animations-js）

问题描述

解决方案

推荐阅读