This commit is a backport to 15.2 of #51960 and #50378
Throwing `SwCriticalError` allows the driver to fallback to `safeFetch` and ensure responseWith doesn't fail.
Fixes#50378
PR Close#51989
The original code uses clientWidth and clientHeight which returns the
width and height of the element including the padding. This results in
the aspect ratio being determined incorrectly and the image distortion
warning triggering. The new code uses getComputedStyle which returns
the width and height without padding.
Another advantage of using getComputedStyle is that, unlike clientWidth
and clientHeight, the number returned is a decimal which provides
greater accuracy. This could allow for lowering the ASPECT_RATIO_TOLERANCE.
PR Close#49889
Due to assertNoImageDistortion using clientWidth and clientHeight, and these properties returning integers, rounding errors occur that exceed the aspect ratio tolerance.
Increasing the tolerance could hide actual distortion so correcting the calculation to use floats would be best and could even allow for a lower tolerance.
PR Close#49889
The image distortion detection performed uses clientWidth/clientHeight which includes the padding.
This leads to images with padding being detected as distorted while they are not and distortion being masked by padding.
PR Close#49889
When binding an array to `class` like `[class]="['foo', 'bar']"`, the runtime treats it the same as a literal binding with all the values being `true`, e.g. `{foo: true, bar: true}`. While object literals can only have string keys, arrays can have any value which can lead to errors if the array contains non-string values.
These changes add some logic to stringify the keys and ignore invalid ones.
Fixes#48473.
PR Close#49924
The `canceledNavigationResolution: 'computed'` option does not correctly
assign page IDs or restore them when redirects result in navigating to
the current URL. This change ensures that the page IDs are still
incremented and restored correctly in this scenario.
PR Close#49793
Angular doesn't support IE anymore. We can remove the workarounds related to IE.
Some workarounds are keep because of the support of domino but the comments related to IE are removed.
PR Close#49763
Some libraries could use numbers in headers. this fix prevents Angular from
throwing an error by casting those numerical values into strings.
Fixes#49353
PR Close#49379
The compiler currently does not check to make sure that directives in
the host bindings are exported. These directives are part of the public
API of the component so they do have to be.
PR Close#49792
`ComponentRef.setInput` internally calls `markDirtyIfOnPush` which only marks
the given view as dirty but does not mark parents dirty like `ChangeDetectorRef.markForCheck` would.
https://github.com/angular/angular/blob/f071224720f8affb97fd32fb5aeaa13155b13693/packages/core/src/render3/instructions/shared.ts#L1018-L1024
`markDirtyIfOnPush` has an assumption that it’s being called from the parent’s template. That is, we don’t need to mark dirty to the root, because we’ve already traversed down to it.
The function used to only be called during template execution for input
bindings but was added to `setInput` later. It's not a good fit because
it means that if you are responding to events such as an emit from an `Observable`
and call `setInput`, the view of your `ComponentRef` won't necessarily get checked
when change detection runs next. If this lives inside some `OnPush` component tree
that's not already dirty, it only gets refreshed if you also call
`ChangeDetectorRef.markForCheck` in the host component (because it will be "shielded" be a non-dirty parent).
PR Close#49747
The previous fix for squashing empty children didn't quite work when the
existing route had segments. The result would be that the segments from
the existing route were dropped from the final URL.
PR Close#49691
In modern browsers, the 'javascript:' URL scheme is the only scheme that
can execute JavaScript when passed in a navigation URL context (e.g.
`a.href` value). Validate URL shemes to only contain characters allowed
in the URL specification ([a-zA-Z-+.]), and that are not javascript
(case insensitive). This is not a breaking change. The URL sanitization
is loosen.
PR Close#49659
The navigation transition clears the current navigation in the finalize
operator of the current navigation Observer. This commit both completes
the `bootstrapDone` observable and updates the transition to only take 1
emit from the completed navigation. Either of these changes on their own
would fix the issue. The latter is a preventative measure in case a
mistake like the former is made again.
fixes#49567
PR Close#49572
Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.
Example:
```html
<div style="width:"1px;""></div>
```
In the above case, `width` has an invalid value of `"1px"`, however the compiler will transform it to `1px` which makes it valid.
On the other hand, in the below case
```html
<div style="content:"foo""></div>
```
`content` has a valid value of `"foo"`, but since the compiler unwraps it to `foo` it becomes invalid. For correctness, we should not remove quotes.
```js
const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';
div.style.width; // ''
div.style.content; // ''
div.style.width='1px';
div.style.content='"foo"';
div.style.width; // '1px'
div.style.content; // '"foo"'
```
More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
PR Close#49460
Currently when the value of a styling property that has a unit is empty string a invalid value is generated.
Example:
`[style.width.px] = ""` will generate a value of `"px"`, when instead it should be `""`.
This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in https://github.com/angular/domino/commit/bfc9114d1eb5b7591c43a7c6aef6ad50d24e369f.
This commit fixes the issues and generate correct values.
PR Close#49460
The preloading strategy did not handle a `loadComponent` on a route with
a static `children`. It only preloaded children if they were also
`loadChildren` or both were not lazy loaded.
fixes#49558
PR Close#49571
This is based on some internal feedback. Adds logic to the standalone migration that attempts to preserve trailing commas when updating existing AST nodes. When creating new ones, it tries to infer whether to generate the trailing comma based on the surrounding code.
PR Close#49533
Showing a minimum app to reproduce the bug.
1. Create the app and add angular material.
```
ng new project
cd project
ng add @angular/material
```
1. Overwrite the src/app/app.component.html with minimal content.
```
<button mat-button *ngIf="true"><span *ngIf="true" class="{{'a'}}"></span></button>
```
1. Run the app. The button is not shown because of an exception.
```
main.ts:6
ERROR TypeError: item.toLowerCase is not a function
at isCssClassMatching (core.mjs:8726:35)
at isNodeMatchingSelector (core.mjs:8814:22)
at isNodeMatchingSelectorList (core.mjs:8931:13)
at matchingProjectionSlotIndex (core.mjs:14179:13)
at Module.ɵɵprojectionDef (core.mjs:14222:49)
at MatButton_Template (button.mjs:113:99)
at executeTemplate (core.mjs:10534:9)
at renderView (core.mjs:10356:13)
at renderComponent (core.mjs:11529:5)
at renderChildComponents (core.mjs:10216:9)
```
Because isCssClassMatching() function does not take care if the value is not string, while attrs[] may contain AttributeMarker which is actually numbers, item.toLowerCase() throws the exception.
Just inserted a check if the item is string.
Created a testcase for the original fix. It causes an exception without the fix.
fix(core): add a check code to avoid an exception inside isCssClassMatching
Showing a minimum app to reproduce the bug.
1. Create the app and add angular material.
```
ng new project
cd project
ng add @angular/material
```
1. Add `import { MatButtonModule } from '@angular/material/button'`,
and also MatButtonModule inside @NgModule imports in src/app/app.module.ts to use MatButtonModule.
1. Overwrite the src/app/app.component.html with minimal content.
```
<button mat-button *ngIf="true"><span *ngIf="true" class="{{'a'}}"></span></button>
```
1. Run the app. The button is not shown because of an exception.
```
main.ts:6
ERROR TypeError: item.toLowerCase is not a function
at isCssClassMatching (core.mjs:8726:35)
at isNodeMatchingSelector (core.mjs:8814:22)
at isNodeMatchingSelectorList (core.mjs:8931:13)
at matchingProjectionSlotIndex (core.mjs:14179:13)
at Module.ɵɵprojectionDef (core.mjs:14222:49)
at MatButton_Template (button.mjs:113:99)
at executeTemplate (core.mjs:10534:9)
at renderView (core.mjs:10356:13)
at renderComponent (core.mjs:11529:5)
at renderChildComponents (core.mjs:10216:9)
```
Because isCssClassMatching() function does not take care if the value is not string, while attrs[] may contain AttributeMarker which is actually numbers, item.toLowerCase() throws the exception.
Just inserted a check if the item is string.
PR Close#48888
This PR adds missing documentation for `@angular/localize` package and fixes a tiny one-word typo in the `README.md` file for `@angular/localize schematic`.
Fixes#49219.
PR Close#49393
When having a recursive circle of imports on standalone components, `queueTypesFromModulesArrayRecur` triggered a `Maximum call stack size exceeded` error.
This commit fixes this.
Fixes#49469
PR Close#49473
The below error is displayed during some tests
```js
ERROR: 'Unhandled Promise rejection:', 'Cannot read properties of null (reading 'markForCheck')', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', TypeError: Cannot read properties of null (reading 'markForCheck')
TypeError: Cannot read properties of null (reading 'markForCheck')
at AsyncPipe2._updateLatestValue (http://angular-ci.local:9876/base/dist/legacy-test-bundle.spec.js?49174f830d8743d5c8a9551b77550b859b934291:51947:19)
```
This is caused by the fact that `ref` in `AsyncPipe` is initialized with a value of `null` which causes `_updateLatestValue` to fail since it is not expected to be `null`.
This change ensures that a `ref` is always provided and that all subscriptions are disposed off after each test.
PR Close#49433
Before this change `ɵɵdefineDirective` called `ɵɵdefineComponent` under the hood. This is problematic for the consistent component id generation as it could result in hash collisions for certain directives. Directives however do not require an id.
This changes moves common definition generation logic into a separate function that is re-used in `ɵɵdefineDirective` and `ɵɵdefineComponent`.
PR Close#49350
The decorator downlevel transform is never used for actual class
decorators because Angular class decorators rely on immediate execution
for JIT. Initially we also supported downleveling of class decorators
for View Engine library output, but libraries are shipped using partial
compilation output and are not using this transform anymore.
The transform is exclusively used for JIT processing, commonly for
test files to help ease temporal dead-zone/forward-ref issues. We can
remove the class decorator downlevel logic to remove technical debt.
PR Close#49351
Matthieu Riegler