Deploying Pre-rendered Angular Application to a CDN

Provide steps to deploy a pre-rendered Angular application onto a CDN to leverage edge caching for improved load times, which enhances SEO.
// Step 1: Install Angular Universal
npm install @nguniversal/express-engine --save
Installs Angular Universal, which adds server-side rendering to your app.
// Step 2: Add Angular Universal to your application
ng add @nguniversal/express-engine
Using the Angular CLI to add the necessary Universal server-side rendering modules to your project.
// Step 3: Build your Angular application for production with pre-rendering
ng run <your-project-name>:prerender
Pre-renders the app by building static application pages that will be served by the CDN.
// Step 4: Install your preferred CDN provider's CLI for deployment
// Example with AWS CLI
npm install -g aws-cli
Installs the Command Line Interface (CLI) for the CDN provider, in this case, AWS.
// Step 5: Configure your CDN's CLI with necessary credentials and settings
// Example for AWS
aws configure
Prompts you to enter your AWS credentials, region, and output format.
// Step 6: Deploy the pre-rendered Angular application to your CDN
// Example with AWS S3
aws s3 sync ./dist/<your-project-name> s3://<your-s3-bucket-name> --acl public-read
Syncs the pre-rendered Angular application files to an S3 bucket, setting files to be publicly readable.
// Step 7: Invalidate cache to ensure fresh content delivery after new deployment
// Example with AWS CloudFront
aws cloudfront create-invalidation --distribution-id <YourDistributionId> --paths "/*"
Creates a cache invalidation request for your CloudFront distribution, ensuring that the latest deployed version gets served.