Fix the function stripping the base path from the URL, as the current implementation uses the base path as part of a regex, which wrongly makes paths fails that contain characters such as a parenthesis (example: C:/Users/MyUser(Test)/project).
Fixes#49179
PR Close#49181
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
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
This commit represents rewrite of the NgClass directive to address
severe performance problem (excessive DOM mutation). The modified
algorithm removes all the known performance clifs and has number of
desirable properties:
- it is shorter and (arguably) easier to follow;
- drops usage of existing differs thus limiting dependencies on other
part of the code without increasing size of the directive;
- doesn't degrade any other performance metrics.
Fixes#25518
PR Close#48433
```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#48489
* removing guard as console.warn is now widely supported
* Couldn't remove non-null assertion, waiting for TS support of getters with different types (microsoft/typescript#43662)
PR Close#48476
There is no need to parse clientWidth/clientHeight/naturalWidth/naturalHeight on HTMLImageElement as there is no sign of other types being returned on everygreen browers.
PR Close#48527
`PlatformLocation` is already part of the public API so developers can
create their own. This means that developers would already be able to
access the existing `BrowserPlatformLocation` at runtime by injecting
it. The motivation for adding `BrowserPlatformLocation` to the public
API is because of those facts, but driven more by the fact that we are
looking to include `MockPlatformLocation` by default in TestBed.
Developers would need a way to revert back to the current behavior for
some tests that rely directly on browser interaction.
PR Close#48488
```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
There have been/are several bugs related to base href handling in
Angular (#45744, #48175, #19296).
These all stem from the attempted custom handling of base href
in the `Location` class. This logic does not really make an attempt
to be fully compliant with the spec.
PR Close#48422
Previously, this check looked like this: `/^(https?:)?\/\//.test(baseHref)`,
but that resulted in syntactically incorrect code after Closure Compiler minification.
This was likely caused by a bug in Closure Compiler, but for now, the check is rewritten
to use `new RegExp` instead.
PR Close#48406
This commit adds extra e2e tests for the fill mode checks in the NgOptimizedImage directive to make
sure a warning is logged in a console.
PR Close#48036
Add a warning if a fill-mode image is rendered without height. This is a common occurence if the user doesn't properly set the 'position' attribute of the parent element.
PR Close#48036
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
The image distortion warning (when rendered aspect ratio is noticeably different than intrinsic) doesn't make sense with fill mode, where the user may want the image to stretch, crop or letterbox.
PR Close#47824
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
In v14.2, we've introduced a new directive to help developers to configure images for better performance. The directive was initially released in the "developer preview" mode. We've collected the feedback, made several improvements and we are happy to announce that the NgOptimizedImage APIs are promoted to stable!
This commit updates vast majority of APIs to drop the `@developerPreview` label, which effectively documents them as stable.
There are few APIs though that retained the `@developerPreview` annotations:
- the `IMAGE_CONFIG` token
- the `ImageConfig` type
- the `fill` @Input of the directive
We plan to collect some additional feedback for the mentioned APIs and drop the `@developerPreview` annotation after that.
PR Close#47794
This is a small commit to:
- clarify that loaders aren't mandatory
- remove outdated preconnect option from docs
- clarify how width/height should be set for fixed size images
- minor structural changes for clarity
PR Close#47796
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
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
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
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
`PreconnectLinkChecker` checks to see if preconnect links have been added to the `<head>` element but uses `document` directly which does not exist when rendering in Angular Universal. This PR switches the `PreconnectLinkChecker` to use the `DOCUMENT` token instead so that the query works when SSR'ing
PR Close#47353
This is a tiny fix to add paragraph breaks in
image distortion warnings to make them a bit
easier to read. With this change, the intrinsic
and rendered image sizes are printed on their
own lines instead of mid-paragraph.
PR Close#47299
The NgOptimizedImage directive was previously trying to use an
already destroyed injector in the ngOnDestroy callback. This fix
pre-injects necessery tokens so no injector calls are done
in the destroy process.
PR Close#47243
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
Vincent