Commit graph

21 commits

Author SHA1 Message Date
Alex Castle
f5c520b836 feat(common): add placeholder to NgOptimizedImage (#53783)
Add a automatic placeholder implementation supporting loader-based and data URL placeholders

PR Close #53783
2024-01-29 16:00:38 +00:00
Pawel Kozlowski
28a5925f53 fix(common): use === operator to match NgSwitch cases (#51504)
This change adjust the equality comparator used by NgSwitch - now it
defaults to === from previously used ==. This change is based on the
following reasoning:
- align behaviour with the built-in switch block);
- improve performance (avoid type coercion);
- enable better type-checking.

BREAKING CHANGE:

the NgSwitch directive now defaults to the === equality operator,
migrating from the previously used ==. NgSwitch expressions and / or
individual condition values need adjusting to this stricter equality
check. The added warning message should help pinpointing NgSwitch
usages where adjustements are needed.

Fixes #33873

PR Close #51504
2023-10-09 10:10:21 -07:00
Alex Castle
1837efb9da feat(common): Allow ngSrc to be changed post-init (#50683)
Remove thrown error when ngSrc is modified after an NgOptimizedImage image is initialized

PR Close #50683
2023-07-11 08:30:49 -07:00
Alex Castle
54b24eb40f feat(common): Add loaderParams attribute to NgOptimizedImage (#48907)
Add a new loaderParams attribute, which can be used to send arbitrary data to a custom loader, allowing for greater control of image CDN features.

PR Close #48907
2023-02-06 10:10:44 -08:00
Iván Navarro
a055196c55 fix(common): warn if using ngSrcset without a configured image loader (#48804)
Warn the user in the console in case the `ngSrcset` is present and no
loader is configured. In this case, the default loader is used and
it ignores this attribute.

PR Close #48804
2023-01-25 19:27:00 +00:00
Kara Erickson
ce5880f93f fix(common): warn if using supported CDN but not built-in loader (#47330)
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
2022-10-19 15:21:51 +02:00
jaybell
75e6297f09 feat(common): add <link> preload tag on server for priority img (#47343)
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
2022-10-10 20:48:10 +00:00
Pawel Kozlowski
2c8579f1b4 refactor(common): decouple preconnect checks from image loaders (#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
2022-09-29 16:39:35 -07:00
Kara Erickson
f81765b333 feat(common): warn if rendered size is much smaller than intrinsic (#47082)
This commit adds a console warning in development mode
if the ultimate rendered size of the image is much
smaller than the dimensions of the requested image.
In this case, the warning recommends adjusting the
size of the source image or using the `rawSrcset`
attribute to implement responsive sizing.

PR Close #47082
2022-08-16 17:36:54 +00:00
Andrew Kushnir
8106084679 refactor(common): throw an error if an absolute URL is passed to Image Loaders (#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
2022-08-16 17:36:53 +00:00
Andrew Kushnir
586274fe65 feat(common): provide an ability to exclude origins from preconnect checks in NgOptimizedImage (#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
2022-08-16 17:36:53 +00:00
Andrew Kushnir
7baf9a46cd feat(common): verify that priority images have preconnect links (#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
2022-08-16 17:36:53 +00:00
Kara Erickson
57f3386e5b feat(common): support custom srcset attributes in NgOptimizedImage (#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
2022-08-16 17:36:52 +00:00
Andrew Kushnir
37e3a6050b test(common): add e2e tests for LCP check logic of the NgOptimizedImage directive (#47082)
This commit adds e2e tests for the LCP check logic. Those tests are needed to verify the behavior in a real browser (vs relying on a Node environment).

PR Close #47082
2022-08-16 17:36:52 +00:00
Andrew Kushnir
4a01b204d3 refactor(common): throw an error if width or height inputs are missing or invalid (#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
2022-08-16 17:36:52 +00:00
Andrew Kushnir
2e0d09354f refactor(common): throw an error if NgOptimizeImage inputs change (#47082)
This commit updates the `NgOptimizeImage` directive to add asserts to make sure no inputs are changed after directive initialization.

PR Close #47082
2022-08-16 17:36:52 +00:00
Andrew Kushnir
86e77a5d55 feat(common): add Image directive skeleton (#45627) (#47082)
This commit adds Image directive skeleton as well as a set of basic tests.

PR Close #47082
2022-08-16 17:36:51 +00:00
Jessica Janiuk
606d94299a fix(core): Update ngfor error code to be negative (#46555)
This adds the fancy link to the error code documentation automatically

PR Close #46555
2022-06-28 12:59:07 -07:00
Jessica Janiuk
f86e0948f8 fix(core): Updates error to use RuntimeError code (#46526)
This updates the iterable differ error to use more up-to-date error
codes.

PR Close #46526
2022-06-28 00:29:54 -07:00
Ramesh Thiruchelvam
4307b82058 refactor(common): make the error messages tree shakable (#44663)
Make Long error messages tree-shakable in the production build with error codes.

fixes #40096

PR Close #44663
2022-01-18 10:31:44 -08:00
Andrew Kushnir
57d0ca18e7 ci: add golden files for runtime error codes (#44677)
Runtime error codes in the Core, Common and Forms packages were not included into the `public-api` group reviews. This commit creates the necessary golden files to keep track of further changes in the runtime codes.

This is a followup from https://github.com/angular/angular/pull/44398#issuecomment-1006910976.

PR Close #44677
2022-01-12 20:42:06 +00:00