@trellisorg/serverless-sharp-loader

Demo

yarn nx serve-ssr serverless-sharp-loader-demo

1. Create AWS Resources

Follow this guide to set up a Lambda + API Gateway + CloudFront distribution to get your CDNs url.

https://venveo.github.io/serverless-sharp/index.html

2. Adding to project

Install

yarn add @trellisorg/serverless-sharp-loader
#OR
npm i --save @trellisorg/serverless-sharp-loader

In AppModule or in your bootstrapApplication function call add the following provider

import { provideServerlessSharpLoader } from '@trellisorg/serverless-sharp-loader';
import { NgModule } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

// AppModule
@NgModule({
    providers: [
        provideServerlessSharpLoader({
            baseUrl: '<CloudFront Distribution endpoint>',
            parameters: {
                auto: 'compress,format',
            },
        }),
    ],
})
class AppModule {}

// OR

// bootstrapApplication in main.ts (standalone components)
bootstrapApplication(AppComponent, {
    providers: [
        provideServerlessSharpLoader({
            baseUrl: '<CloudFront Distribution endpoint>',
            parameters: {
                auto: 'compress,format',
            },
        }),
    ],
});

Configuration also takes additional properties to configure how the URLs are requested from your sharp CDN.

See them here

If wanting to use a security key with your deployed CDN then you need to have the md5 package installed as a dependency in your project.

3. Usage

Use the NgOptimizedImage directive as you normally would.

If you want to use the s security parameter then you need to provide a hashFn when providing the config. This can be any function that will return a unique hash two libraries that work here are: md5 and ts-md5. Check to see if your repo already has a hashing library installed, if so just use that one instead of adding another dependency.

4. Usage with Universal

One benefit of using Angular Universal with this Image Loader is that it will automatically add link[rel=preload] tags to the <head> of your document so that priority images can be loaded ahead of time to help with LCP.

There are some caveats here:

The preload link tag will only be added if your image's rawSrc value ends with #preload. This is a hack to get around the fact that it is not yet built into the NgOptimizedImage directive. Hopefully after this PR is released this functionality will be built into the directive and appending #preload will not be needed. In your template this would look something like <img [rawSrc]="src + '#preload'" height="something" width="something">.
There is an issue with the NgOptimizedImage directive right now in SSR where it is trying to access document directly due to there being an internal check that queries tags in the <head>. This can be avoided by either: Running in prod mode with by calling enableProdMode() in your main.ts or, not adding the priority attribute to your images (although this goes against the suggested usage). Another option for this caveat is to always call enableProdMode() when rendering in Angular Universal by not conditionally calling it in your main.server.ts. This will be a moot point when this PR is released. (Note: As of Angular v14.2.1 this is no longer an issue as the PR was released as part of v14.2.1)
There is slightly less validation of the URL happening in this IMAGE_LOADER than in the default provided loaders in @angular/common because it is not being created the same way. This will be fixed after this PR