In a previous refactor, the `RootContext` was update to only contain a reference to a component. This commit perform further refactoring to get rid of the `RootContext` altogether, while storing component reference directly on the root view (without the `RootContext` wrapper).
PR Close#47056
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
PR Close#47396
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
prior to this change the stagger timing was being built during the
ast building instead of dynamically when visiting the stagger animation,
thus it could not handle params correctly, this change makes it so that
during ast building a timing ast is built instead and that ast is used
dynammically to build animations which can handle params correctly
resolves#19786
PR Close#47208
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
This commit adds the docs for the NgOptimizedImage directive.
As a part of this commit, we also remove an export of directive-related symbols previously exposed as public APIs (i.e. APIs can not be used directly).
PR Close#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
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
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
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
Currently if you use a static `srcset` with the image directive,
lazy loading no longer works because the image would start to
load before the loading attribute could be set to "lazy". This
commit throws an error if you try to use `srcset` this way.
In a follow-up commit, a new attribute will be added to support
responsive images in a lazy-loading-friendly way.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to drop the `standalone` flag and create a new NgModule which declares and exports it, so that the directive can be used in apps that use pre-v14 version of Angular.
PR Close#47082
Previously NgOptimizedImage would default to requesting
an image at the width matching the width attribute in
the image HTML. While this works for width attrs that
match the intrinsic size of the image (e.g. responsive
images or images sized with CSS), this can be a sharp
edge for developers who use the width/height attributes
to set rendered size (i.e. instead of CSS, which one can
do for a fixed size image). In this case, defaulting to
the width attribute for the requested image would mean
requesting always at 1x quality, so screens with a DPR
of 2+ get an image that is too small. Without a default
request width, the image served by the CDN would likely
be at intrinsic size, so 2x images would look correct.
This PR also updates the NgOptimizedImage sandbox and tests.
PR Close#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
This commit adds the necessary e2e testing infrastructure to the `NgOptimizedImage` test app, so that the test coverage can be extended and extra scenarios can be tested in a browser.
PR Close#47082
This commit updates the `NgOptimizedImage` directive as standalone, so it's easier to import it in
an app (without importing any NgModules). The `NgOptimizedImageModule` is removed as no longer needed.
PR Close#47082
We want it to be clear what benefits the image directive
confers over a normal <img> tag, and the `NgImage` name
didn't provide much information. `NgOptimizedImage` makes
it obvious that the new directive is intended to improve
performance.
PR Close#47082
This commit creates and exposes the APIs required to use the Angular Router without importing `RouterModule`.
The newly added APIs are tree-shakable and you can add features using special functions rather than using `ExtraOptions` to control the providers via an internal switch in Router code.
```
const appRoutes: Routes = [];
bootstrapApplication(AppComponent,
{
providers: [
provideRouter(appRoutes,
withDebugTracing(), // enables debug tracing feature
withInMemoryScrolling() // enables scrolling feature
]
}
);
```
This "features" pattern allows for router behavior to evolve in a backwards compatible and tree-shakable way in the future. This approach also makes features more discoverable.
The newly added APIs can be used in any application today (doesn't require an application to be bootstrapped using standalone-based APIs).
Note: APIs added in this commit are released in the "Developer Preview" mode, read more about this mode in Angular docs: https://angular.io/guide/releases#developer-preview
PR Close#47010
Some versions of rxjs cause the algorithm used in the Router to not recognize Route configs correctly.
This commit updates the algorithm to be compatible in the same way as other code locations internally.
Context:
https://github.com/angular/angular/commit/1160b8194f78141b40d1d4885ec182d033ff2659fixes#47089
Note: This does not have a test because I was unable to identify the
version of rxjs that would cause a failure here.
PR Close#47098
We used to track all modules in a top-level constant called `autoRegisterModuleById` which was used by `getRegisteredNgModuleType`. As of #45024 the constant isn't being used anymore so we can remove it.
PR Close#47066
The current Router APIs require guards/resolvers to be present in the DI tree. This is because we want to treat all guards/resolvers equally and some may require dependencies. This requirement results in quite a lot of boilerplate for guards. Here are two examples:
```
const MY_GUARD = new InjectionToken<any>('my_guard');
…
providers: {provide: MY_GUARD, useValue: () => window.someGlobalState}
…
const route = {path: 'somePath', canActivate: [MY_GUARD]}
```
```
@Injectable({providedIn: 'root'})
export class MyGuardWithDependency {
constructor(private myDep: MyDependency) {}
canActivate() {
return myDep.canActivate();
}
}
…
const route = {path: 'somePath', canActivate: [MyGuardWithDependency]}
```
Notice that even when we want to write a simple guard that has no dependencies as in the first example, we still have to write either an InjectionToken or an Injectable class.
With this commit router guards and resolvers can be plain old functions.
For example:
```
const route = {path: 'somePath', component: EditCmp, canDeactivate: [(component: EditCmp) => !component.hasUnsavedChanges]}
```
Additionally, these functions can still use Angular DI with `inject` from `@angular/core`.
```
const route = {path: 'somePath', canActivate: [() => inject(MyDependency).canActivate()]}
```
PR Close#46684
The `RootContext` implementation contained a number of fields that were needed to support an experimental `renderComponent` function. The `renderComponent` function was removed, which allows us to cleanup the `RootContext` further.
The only field that remains on the `RootContext` is the list of bootstrapped components. This list is presumably mostly unused right now (it just contains the current component) and further refactoring can happen in a followup PR.
PR Close#46806
The dev-infra build tooling is now decoupled from `ng-dev`. This will
make it easier to update `ng-dev` without necessarily needing to upgrade
the whole build system, Bazel etc. This is useful when e.g. new release
tool features have been added and should also be ported to active LTS
branches.
PR Close#46976
On MacOS, pressing the alt key and another key turns into symbols, and
doesn't match the intended behavior. For example, `keydown.alt.s`
reports instead as `keydown.alt.ß`. We rely on the `key` field and not
the `code` field, which properly reports the code for S in this case.
This change adds support to allow users to specify they want to look at
the `code` field instead of the `key` field within their event string.
Example: `keydown.code.alt.leftshift` would only match the LeftShift and
not the right shift based on code values. It would also allow the user
to specify `keydown.code.alt.keys` to match S instead of ß when alt /
option is pressed on MacOS and would also work on Windows.
Fixes#45992
PR Close#46030
The new `FormRecord` entity introduced in Angular v14 does not have its builder method.
This commit adds it, allowing to write:
```
const fb = new FormBuilder();
fb.record({ a: 'one' });
```
This works for both the `FormBuilder` and the `NonNullableFormBuilder`
PR Close#46485
This commit makes the router directives standalone and refactors some of
the Router injectables to be `providedIn: 'root'` along with factory
functions for initialization.
PR Close#46758
This commit refactors the code to move some functions around to avoid circular dependencies in TS imports. The newly added functions are now located in the `packages/core/src/render3/component.ts` file (instead of `packages/core/src/render3/component_ref.ts`), which is a better place for them anyway.
PR Close#46685
The JS size-tracking logic has been moved into the dev-infra repository
and the rule has been updated to work better with Bazel labels. The
Starlark target is updated accordingly in this commit.
PR Close#46802
This change adds the setInput method to the ComponentRef.
Previously users had to call `componentRef.instance['inputName']`
to change inputs of a dynamically created component. This had
several problems:
* OnPush components were not marked for check and thus very
difficult to test;
* input aliasing was not take into account - a property name
on a component could have been different from the actual input
name so setting input properties was fragile;
* manually setting input propertie would NOT trigger the
`NgOnChanges` lifecycle hook.
This modifications unifies `@Input` accross dynamically created
components and the ones referenced in templates. This also opens
doors to other changes: as an example router could use this new
method to set `@Input`s from router params.
Closes#12313Closes#22567
PR Close#46641
The test apps are bundled using their production ESM JS output using
`esbuild`. ESBuild warns about any CJS usages, like `module.exports.`
```
INFO: From Bundling Javascript packages/core/test/bundling/todo_i18n/index.ts [esbuild]:
▲ [WARNING] The CommonJS "module" variable is treated as a global variable in an ECMAScript module and may not work as expected
bazel-out/k8-fastbuild/bin/packages/core/test/bundling/todo_i18n/index.mjs:494:0:
494 │ module.exports = {
╵ ~~~~~~
This file is considered to be an ECMAScript module because the file name ends in ".mjs".
```
Some bundling tests currently use `module.exports` to make
functions/symbols available to specs later requiring the bundle (in
order to run the bundle). Instead of using the CJS global here, the
logic can be attached consistently to `window` (there is currently a
mismatch of window vs. module.exports anyway..).
PR Close#46642
This commit removes the `Renderer3` experiment which attempted to use the
real DOM API as Angular's renderer. As shown in the diff, having this
experiment around added real code complexity to Angular that could not be
removed by an optimizer.
Since we no longer feel this experiment is worth continuing, we're removing
the `Renderer3` concept and all supporting code.
PR Close#46605
Previously, when instantiating a component, Angular would look in the DI
hierarchy for `RendererFactory2`. Any DI tree which rolls up through an
application injector (that is, one created with `BrowserModule`) should be
able to provide this interface. If not found, Angular would switch to the
experimental `Renderer3` mechanism. This switch was designed this way,
because it allowed for the creation of experimental applications where
`RendererFactory2` was not included in the bundle at all.
In this commit, instead of automatically falling back on `Renderer3`-style
rendering, an error is raised instead if `RendererFactory2` is missing from
the DI hierarchy.
PR Close#46605
This commit converts the remaining bundling tests which were using
`renderComponent` to use regular bootstrapping instead.
Since `renderComponent` is synchronous and regular bootstrapping is not,
some test adjustments were necessary to wait for bootstrapping before test
assertions could run.
Additionally, debug servers were adjusted in some cases where they'd broken
(likely some time ago).
PR Close#46559
The deleted r3 versions of these tests had symbol tests, but their r2
equivalents did not. This commit adds symbol tests to the r2 variants.
PR Close#46559
Andrew Kushnir