14 Commits

Author SHA1 Message Date
Alex Castle 37bbc61cfe feat(common): Backport NgOptimizedImage to Angular 14.
Add files and tests from Angular 15 NgOptimizedImage to Angular 14 as a special project by Chrome Aurora
2023-03-08 17:31:31 +01: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