Commit graph

255 commits

Author SHA1 Message Date
Paul Gschwendtner
c9415e4d75 build: ensure bootstrap transitive runfiles are made available (#48521)
Since we generate a `.mjs` file as entry-point for jasmine tests,
a couple of issues prevented the transitive dependencies from
bootstrap targets to be brought in (causing resolution errors):

1. The `_files` (previously `_esm2015`) targets are no longer needed,
   and they also miss all the information on runfiles.
2. The aspect for computing linker mappings does not respect the
   `bootstrap` attribute from the `spec_entrypoint` so we manually
   add the extract ESM output targets (this rule works with the aspect
   and forwards linker mappings).

PR Close #48521
2022-12-19 19:50:41 +00:00
Paul Gschwendtner
20551503fa build: replace _es2015 shorthand with more flexible _files suffix (#48521)
For every `ts_library` target we expose a shorthand that grants
access to the JS files because `DefaultInfo` of a ts library
only exposes the `.d.ts` files.

We rename this away from `es2015` since in practice it's a much
higher target these days. Additionally we no longer use the devmode
output but rather use the prodmode output which has the explicit
`.mjs` output- compatible with ESM.

PR Close #48521
2022-12-19 19:50:41 +00:00
Jessica Janiuk
e0d62cb734 Revert "fix(common): Update Location to get a normalized URL valid in case a represented URL starts with the substring equals APP_BASE_HREF" (#48461)
This reverts commit ae0efb6a09.

PR Close #48461
2022-12-12 16:18:46 -08:00
Konstantin Kharitonov
d87285c363 fix(common): Update Location to get a normalized URL valid in case a represented URL starts with the substring equals APP_BASE_HREF (#48394)
```ts
@NgModule({
  imports: [RouterModule.forRoot([{path: '/enigma', component: EnigmaComponent}])],
  providers: [{provide: APP_BASE_HREF, useValue: '/en'}]
})
export class AppModule {}
```

Navigating to `/enigma` will redirect to `/en/igma` not to `/en/enigma` as it expects

Fixes: #45744

PR Close #48394
2022-12-12 09:37:35 -08:00
Konstantin Kharitonov
f8ecc194e9 fix(common): Update Location to support base href containing origin (#48327)
In case `APP_BASE_HREF` is set including `origin` the further usage of it might cause failure

e.g.
If an app is placed on `https://example.com` and bundles are on `https://cdn-example.com` you have to set `APP_BASE_HREF` up as `https://example.com/` and build the app with `--base-href` as `https://cdn-example.com/` but it does not work because of the bug

Fixes #48175

PR Close #48327
2022-12-07 09:18:00 -08:00
Alex Castle
8e52ca2714 fix(common): Don't generate srcsets with very large sources (#47997)
Fix an issue where users could inadvertently generate very large source images in ngOptimizedImage

PR Close #47997
2022-12-05 12:12:13 -08:00
Alex Castle
1d1e33e8d0 fix(common): Add fetchpriority to ngOptimizedImage preloads (#48010)
Add fetchpriority='high' to ngOptimizedImage preloads to so their priority matches the priority of the image element itself

PR Close #48010
2022-11-10 17:36:39 +00:00
Andrew Kushnir
ec43991665 refactor(common): improve the NgOptimizedImage error message related to changing inputs (#47926)
This commit updates the error message thrown by the NgOptimizedImage directive, when it detects a situation
when inputs change after initial rendering.

The list of inputs was also updated to include all inputs added recently.

PR Close #47926
2022-11-03 17:50:22 -07:00
Alex Castle
38ec1565ad fix(common): don't generate srcset if noopImageLoader is used (#47804)
Do not generate a srcset if the loader being used is the default noopImageLoader. This loader does not take width into account, so it does not make sense to use it with srcsets.

PR Close #47804
2022-10-19 23:08:01 +02:00
Kara Erickson
1ebc0fad0e fix(common): update size error to mention 'fill' mode (#47797)
The current error that is thrown when the "width" or
"height" attributes is missing doesn't mention that
"fill" mode is another option. This commit updates
the error with that option.

PR Close #47797
2022-10-19 15:23:38 +02:00
Andrew Kushnir
bdd4d14db9 refactor(common): drop deprecated selector from the NgOptimizedImage directive (#47798)
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
2022-10-19 15:23:03 +02: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
Alex Castle
9483343ebf feat(common): Add fill mode to NgOptimizedImage (#47738)
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
2022-10-12 15:56:56 +00: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
Andrew Kushnir
c0c7efaf7c feat(common): add provideLocationMocks() function to provide Location mocks (#47674)
This commit adds the `provideLocationMocks()` function that returns mocks for the `Location` and `LocationStrategy` classes. This function can be used in tests to configure an environment where it's possible to fire simulated location events (helpful when testing Router configuration).

PR Close #47674
2022-10-10 19:42:11 +00:00
Alex Castle
4fde292bb5 feat(common): Add automatic srcset generation to ngOptimizedImage (#47547)
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
2022-10-10 16:21:08 +00:00
Matthias Weiß
bdb5371033 feat(common): add injection token for default DatePipe configuration (#47157)
This commit introduces a new `DATE_PIPE_DEFAULT_OPTIONS` token, which
can be used to configure default DatePipe options, such as date
format and timezone.

DEPRECATED:

The `DATE_PIPE_DEFAULT_TIMEZONE` token is now deprecated in favor
of the `DATE_PIPE_DEFAULT_OPTIONS` token, which accepts an object
as a value and the timezone can be defined as a field (called `timezone`)
on that object.

PR Close #47157
2022-10-07 09:16:00 -07:00
Pawel Kozlowski
d3c25f20a3 test(common): demonstrate that image loaders are configurable on a component level (#47565)
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
2022-09-29 16:39:35 -07: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
Andrew Kushnir
ca7bf65933 fix(common): rename rawSrc -> ngSrc in NgOptimizedImage directive (#47362)
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
2022-09-09 14:25:37 -07:00
Andrew Kushnir
710d1da4ed refactor(common): create an NgFor alias for NgForOf directive (#47309)
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
2022-09-09 14:04:54 -07:00
Pawel Kozlowski
4fdbd85d26 fix(common): consider density descriptors with multiple digits as valid (#47230)
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
2022-08-23 16:21:14 -07:00
Kara Erickson
b3879dbf14 fix(common): support density descriptors with 2+ decimals (#47197)
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
2022-08-22 10:49:46 -07:00
Pawel Kozlowski
0f6b30bdc9 refactor(common): address review feedback for NgOptimizedImage (#47082)
Addresses part of the review feedback for the NgOptimizedImage directive.

PR Close #47082
2022-08-16 17:36:54 +00:00
Andrew Kushnir
213f57cb3d refactor(common): various NgOptimizedImage directive updates (#47082)
This commit contains a set of small changes based on the feedback received in https://github.com/angular/angular/pull/47082.

PR Close #47082
2022-08-16 17:36:54 +00:00
Kara Erickson
aa254244f4 refactor(common): clean up util.ts and preconnect_link_checker files (#47082)
This commit cleans up some stylistic nits and
moves functions out of util.ts into files that
are more specifically named (url.ts and error.ts).

PR Close #47082
2022-08-16 17:36:54 +00:00
Kara Erickson
d71dfe931f fix(common): set bound width and height onto host element (#47082)
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
2022-08-16 17:36:54 +00:00
Andrew Kushnir
45cc85f3b8 refactor(common): use quotes instead of backticks in missing width/height error message (#47082)
This commit updates the error message thrown at runtime when an `<img>` doesn't contain width and/or height attributes.

PR Close #47082
2022-08-16 17:36:54 +00:00
Andrew Kushnir
d3c6c37a12 refactor(common): make NgOptimizedImage directive standalone (#47082)
This commit updates the NgOptimizedImage directive to become standalone and removes no longer needed NgOptimizedImageModule class.

PR Close #47082
2022-08-16 17:36:54 +00:00
Andrew Kushnir
f995f9fad1 refactor(common): update error messages of NgOptimizedImage directive (#47082)
This commit updates error messages that the NgOptimizedImage directive throws or logs into a console.

PR Close #47082
2022-08-16 17:36:54 +00:00
Katie Hempenius
451b85ca17 feat(common): explain why width/height is required (#47082)
Update error message text to explain why width & height are required
attributes.

PR Close #47082
2022-08-16 17:36:54 +00:00
Andrew Kushnir
244ad766c0 test(common): add parent injector to the createEnvironmentInjector calls in tests (#47082)
This commit updates the `createEnvironmentInjector` calls to pass parent injector, which became required as an argument.

PR Close #47082
2022-08-16 17:36:54 +00:00
Kara Erickson
b380fdd59e feat(common): add a density cap for image srcsets (#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
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
2ee4654546 Revert "fix(common): sanitize rawSrc and rawSrcset values in NgOptimizedImage directive" (#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
2022-08-16 17:36:53 +00:00
Pawel Kozlowski
768a310b6e refactor(common): unify url error reporting in image loaders (#47082)
This refactoring pulls url-related error reporting into one place.
It also makes sure that error messages and the related error
reporting logic are tree-shakable.

PR Close #47082
2022-08-16 17:36:53 +00:00
Pawel Kozlowski
bd76ad6fa6 refactor(common): properly configure PRECONNECT_CHECK_BLOCKLIST (#47082)
Refactoring tests made me realise that we are misinterpreting the
ensurePreconnect option - in fact it should configure the
PRECONNECT_CHECK_BLOCKLIST provider _only_ if the ensurePreconnect
is set to false.

PR Close #47082
2022-08-16 17:36:53 +00:00
Pawel Kozlowski
3b17d4c011 test(common): remove unneeded describe block (#47082)
This commit removes a nested describe block as it
does't add any value this point. Also moved the
utils tests to the bottom of the file as those are
less important as compared to the other tests.

PR Close #47082
2022-08-16 17:36:53 +00:00
Katie Hempenius
8d3701cb4c feat(common): add warnings re: image distortion (#47082)
Checks whether image is visually distorted. Also adds a check to verify that width and height are set to a non-zero number.

PR Close #47082
2022-08-16 17:36:53 +00:00
Katie Hempenius
bff870db61 feat(common): add cloudflare loader (#47082)
Closes #46315

PR Close #47082
2022-08-16 17:36:53 +00:00
Andrew Kushnir
3836ebbbdf refactor(common): move loader util functions to a common location (#47082)
This commit refactors the code to avoid an extra utils file and instead, all extra helpers are moved to a common location.

PR Close #47082
2022-08-16 17:36:53 +00:00
Andrew Kushnir
dde5b9bff0 refactor(common): allow Cloudinary and ImageKit loaders to specify the ensurePreconnect option (#47082)
This commit modifies the provideCloudinaryLoader and provideImageKitLoader functions to support an additional ensurePreconnect option, similar to the Imgix loader functions.

PR Close #47082
2022-08-16 17:36:53 +00:00
Katie Hempenius
4e952ba216 feat(common): add loaders for cloudinary & imagekit (#47082)
This commit adds loaders for cloudinary and imagekit.

PR Close #47082
2022-08-16 17:36:53 +00:00
Andrew Kushnir
1cf43deb18 fix(common): sanitize rawSrc and rawSrcset values in NgOptimizedImage directive (#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
2022-08-16 17:36:53 +00:00
Andrew Kushnir
3774d84cfb test(common): optimize image loader tests of the NgOptimizedImage directive (#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
2022-08-16 17:36:53 +00:00
Pawel Kozlowski
98f20436ec refactor(common): allow loaders to specify the ensurePreconnect option (#47082)
This commit modifies the provideImgixLoader function to support
an additional ensurePreconnect option. Other loaders could follow
the same pattern to support a similar option as well.

As more loaders get developed we will refactor code to streamline
the loader authoring and enforce consistency.

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
7ce497e5bc feat(common): add built-in Imgix loader (#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
2022-08-16 17:36:52 +00:00
Andrew Kushnir
e34e48c91e test: update error codes used in the NgOptimizedImage tests (#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
2022-08-16 17:36:52 +00:00