This commit updates the NgOptimizedImage directive to:
- drop a deprecated selector (the `rawSrc` one)
- drop corresponding input getter
The `rawSrc` was replaced by the `ngSrc` one during the developer preview phase.
PR Close#47798
This commit adds a missing warning if the image directive
detects that you're hosting your image on one of our
supported image CDNs but you're not using the built-in loader
for it. This excludes applications that are using a custom
loader.
PR Close#47330
Add a new boolean attribute to NgOptimizedImage called `fill` which does the following:
* Removes the requirement for height and width
* Adds inline styling to cause the image to fill its containing element
* Adds a default `sizes` value of `100vw` which will cause the image to have a responsive srcset automatically generated
PR Close#47738
This commit adds a logic that generates preload tags for priority images, when rendering happens on the server (e.g. Angular Universal).
PR Close#47343
Add a feature to automatically generate the srcset attribute for images using the NgOptimizedImage directive. Uses the 'sizes' attribute to determine the appropriate srcset to generate.
PR Close#47547
Add a test to ensure that optimized image loaders can be configured at any
level of the DI hierarchy, including component's node injector.
PR Close#47565
Previously the built-in image loaders for the optimized image directive
were tightly coupled to the preconnect checks infrastructure. This was
creating a problem when developers were trying to provide a loader on
a component level (or, more generally, deeper in the DI hierarchy):
- PreconnectLinkChecker is the application-level service, provided in root;
- it makes sense to provide loaders in different parts of the DI hierarchy;
This refactoring removes the PreconnectLinkChecker configuration from
the loaders infrastructure and makes it application-wide config. The
PRECONNECT_CHECK_BLOCKLIST is also a simple provider (it was a
multi-provider previously) which should make the overall configuration
easier.
PR Close#47565
As an ongoing effort to stabilize the NgOptimizedImage API before existing the Developer Preview, this commit renames the `rawSrc` attribute used for the NgOptimizedImage selector matching to `ngSrc`. The `rawSrcset` is also renamed to `ngSrcset` for consistency.
The motivation for this change is to align the attribute name better with other built-in directives, such as `ngFor`, `ngIf`, `ngClass`, `ngStyle`, etc.
Note: this is technically a breaking change, but since the NgOptimizedImage directive is in the Developer Preview mode, we land the change in a patch branch.
PR Close#47362
This commit adds a re-export of the `NgForOf` class as `NgFor` to improve the DX for cases when the directive is used as standalone. Developers can import `NgFor` class, which better matches the `ngFor` attribute used in a template.
PR Close#47309
Valid density descriptors used in the NgOptimizedImage can contain multiple
digits (ex. 1.25x, 25x). This change fixes the issue where density descriptors
with multiple digits (ex. 25x) where considered invalid.
Please note that a valid density descriptor might still be rejected by the
directive's validation logic if the supplied value is too big.
PR Close#47230
This commit fixes a bug where `rawSrcset` in the image
directive would allow density descriptors like `1.5x`
but not like `1.25x`. Now descriptors with 2+ digits
after the decimal point should work.
PR Close#47197
This commit fixes a bug in NgOptimizedImage where
if you bound the width or height attribute (e.g.
`[width]=width`), the attribute would only be
reflected as "ng-reflect-x". The actual "width" or
"height" attribute would not be set on the host
element. This is a problem because the exact named
attribute must be set on the element for the
browser to detect it and use it to reserve space
for the image (and thus prevent CLS).
PR Close#47082
With this commit, the NgOptimizedImage directive will throw
a runtime error if it detects that one of the density descriptors
in rawSrcset is higher than 3x. It's generally not recommended
to use density descriptors higher than ~2, as it causes image to
download at very large sizes on mobile screens (thus slowing down
LCP). The density max is set conservatively to 3 in case apps
expect users to zoom in.
In future commits, we may want to throw even at densities >
than 2 and provide a configuration override for the zoom case.
PR Close#47082
This commit updates the logic of Image Loaders to throw an error in case an absolute URL is provided an an input to the loader function. The loaders can construct URLs based on image paths relative to the bas URL configured for a loader.
PR Close#47082
This reverts commit a0fdb8c7e9.
The `src` and `srcset` attributes don't pose security threats in modern browser, so sanitization is not really necessary.
PR Close#47082
This commit applies a sanitization to values produced by a loader, before they are used for the `src` and `srcset` image element properties.
PR Close#47082
This commit updates the image loader tests to avoid creating the TestBed environment, since it's not really needed for the tests. Instead, the loader functions are invoked directly and the output is verified.
PR Close#47082
This commit adds an extra logic to add an ability to exclude origins from preconnect checks in NgOptimizedImage by configuring the `PRECONNECT_CHECK_BLOCKLIST` multi-provider.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to add a logic to detect whether an image, marked with the "priority" attribute has a corresponding `<link rel="preconnect">` tag in the `document.head` for better performance.
PR Close#47082
This commit adds a built-in Imgix loader for the
NgOptimizedImage directive. If you provide the
desired Imgix hostname, an ImageLoader will be
generated with the correct options.
Usage looks like this:
```ts
providers: [
provideImgixLoader('https://some.imgix.net')
]
```
It sets the "auto=format" flag by default, which
ensures that the smallest image format supported
by the browser is served.
This change also moves the IMAGE_LOADER, ImageLoader,
and ImageLoaderConfig into a new directory that will
be shared by all built-in image loaders.
PR Close#47082
This commit updates the error codes used in the `NgOptimizedImage` tests. The error codes got u[dated recently in a PR that got merged earlier.
PR Close#47082
This commit adds a `rawSrcset` attribute as a replacement for the
`srcset` attribute. The `srcset` attribute cannot be set statically
on the image directive because it would cause images to start
downloading before the "loading" attribute could be set to "lazy".
Changing the name to `rawSrcset` allows the directive to control
the timing of image loading. It also makes it possible to support
custom loaders for `srcset` file names. Rather than having to repeat
the image origin for each image, the existing `rawSrc` value and
image loader can be composed to generate each full URL string. The
developer must only provide the necessary widths for the `srcset`.
For example, the developer might write:
```markup
<img rawSrc="hermes.jpg" rawSrcset="100w, 200w" ... />
```
with a loader like:
```js
const loader = (config) => `path/${config.src}?w=${config.width}`;
```
and the img tag will ultimately be set up as something like:
```markup
<img src="path/hermes.jpg?w=100" srcset="path/hermes.jpg?w=100 100w, path/hermes.jpg?w=200 200w" .../>
```
PR Close#47082
Currently if you use a static `srcset` with the image directive,
lazy loading no longer works because the image would start to
load before the loading attribute could be set to "lazy". This
commit throws an error if you try to use `srcset` this way.
In a follow-up commit, a new attribute will be added to support
responsive images in a lazy-loading-friendly way.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to drop the `standalone` flag and create a new NgModule which declares and exports it, so that the directive can be used in apps that use pre-v14 version of Angular.
PR Close#47082
The CI failed to run on the last PR, so we didn't catch
that there were web tests failing due to absolute/relative
URL issues. This commit should fix the issue.
PR Close#47082
Previously NgOptimizedImage would default to requesting
an image at the width matching the width attribute in
the image HTML. While this works for width attrs that
match the intrinsic size of the image (e.g. responsive
images or images sized with CSS), this can be a sharp
edge for developers who use the width/height attributes
to set rendered size (i.e. instead of CSS, which one can
do for a fixed size image). In this case, defaulting to
the width attribute for the requested image would mean
requesting always at 1x quality, so screens with a DPR
of 2+ get an image that is too small. Without a default
request width, the image served by the CDN would likely
be at intrinsic size, so 2x images would look correct.
This PR also updates the NgOptimizedImage sandbox and tests.
PR Close#47082
This commit updates the `NgOptimizeImage` directive to add asserts to make sure the `width` and `height` inputs are set and have correct values (numbers only).
PR Close#47082
This commit updates the `NgOptimizedImage` directive as standalone, so it's easier to import it in
an app (without importing any NgModules). The `NgOptimizedImageModule` is removed as no longer needed.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to drop the `loader` input. Component-specific loaders can still be configured via `IMAGE_LOADER` token and the `loader` input was only useful in case different loaders have to be present in a single template, which doesn't seem to be a common case. We'll be able to re-introduce the input later if needed.
PR Close#47082
We want it to be clear what benefits the image directive
confers over a normal <img> tag, and the `NgImage` name
didn't provide much information. `NgOptimizedImage` makes
it obvious that the new directive is intended to improve
performance.
PR Close#47082
This brings the typing of ngStyle into parity with ngClass since commit
e2ab99b95e. Should help with some strict template checking edge cases.
PR Close#47069
With strict template type checking, a null/undefined value will raise an
error. However the implementation is completely fine with it, and it
would be pointless to "fix" it at the callsite and convert to e.g. an
empty string. Allow all of the "supported types" to be passed in
directly to ngClass.
Fixes#39280
PR Close#46906
This commit updates the directives presents in the `CommonModule` and annotates them with the `standalone: true` flag. With that flag, the directives can now be imported individually, as well as imported via the `CommonModule`.
PR Close#46469
Adds support for passing in an optional injector when creating an embedded view through `ViewContainerRef.createEmbeddedView` and `TemplateRef.createEmbeddedView`. The injector allows for the DI behavior to be customized within the specific template.
This is a second stab at the changes in #44666. The difference this time is that the new injector acts as a node injector, rather than a module injector.
Fixes#14935.
PR Close#45156
