I have issue applying Angular animations on Firefox (and Safari).
Yes I know that there are a lot of answers out there saying you can simply adding web-animations-js in polyfills.ts and it should do the trick. Unfortunately, it's not working in my case. For your context, this is the CSP policy that we're using default-src 'self'; img-src: *.
This is the animation code:
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'))
])
]
This is a chunk of 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`.
I have configured Angular to extract scss into a single big .css file (to avoid CSP issue). Because by default, Angular CLI will not extract your styles into a stylesheet file, instead it will inject the styles into the DOM using <style> element, this is done for each component style. Hence, you will end up having a lot of <style> element in the <head> element. This of course violates the CSP rule above.
I've noticed that, in Chrome, IE and Edge, the css of the animation is extracted as expected, so it's working fine. However, in Firefox, it is injected using <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>
So I suspect it is because of this, the animation will not work on Firefox. The solution might be to change configuration so that Angular CLI will extract css for animations (even we're using Firefox or Safari).
This is the configuration for production, as you can see extractCss has been turned on.
"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"
}
}
