I have used purgecss cli command in my angular(version-13.2.2) application in post build phase. And after deploying the change to AWS server, the landing page shows distortion for a couple of seconds, before rendering the UI properly. This issue started coming up, only after introducing purgecss to the application.
-Note - The distortion issue doesn't comes up in local environment.
Firstly, I tried following command. purgecss --css dist/KF/.css --content dist/KF/index.html dist/KF/.js --output dist/KF/
But in one of the blogs related to using purgecss in angular, it stated that purgecss strips off any angular material, cdk classes that are being used at the run time. So, I added safelist option in command and put it all in a configuration file and ran the configuration file using CLI command as following- purgecss --config ./purgecss.config.js
Contents of purgecss.config.js -
module.exports = {
content: ['dist/KF/index.html','dist/KF/.js'],
css: ['dist/KF/.css'],
safelist:{
deep: [/^mat-/,/^cdk-/],
},
output: 'dist/KF/',
};
Contents of buildspec.yml look like this-
version: 0.2
phases:
install:
runtime-versions:
python: 3.x
nodejs: 16.x
commands:
- npm install -g @angular/cli
- npm install -g purgecss
- pip3 install awscli --upgrade --user
- rm -rf package-lock.json
- npm install --force
build:
commands:
- npm run build
post_build:
commands:
- purgecss --config ./purgecss.config.js
All of the above steps haven't been helpful with the distortion issue so far. Will highly appreciate any help on this.
