Prior to this change component styles generated on the server where removed prior to the client side component being rendered and attached it's own styles. In some cases this caused flickering. To mitigate this `initialNavigation: enabledBlocking'` was introduced which allowed the remove of server styles to be defer to a latter stage when the application has finished initialization.
This commit changes the need for this, by not removing the server generated component styles and reuse them for client side rendering.
PR Close#48253
Prior to this change the component IDs where generated based on a counter. This is problematic as there is no guarantee that a component will get the same ID that was assigned on the server when generated on the client side.
This is paramount to be able to re-use the component styles generated on the server.
PR Close#48253
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 private util `isObservable` was actually just testing the same thing as`isSubscribable()`. As the implementation is closer to the function's name, let's only keep ``isSubscribable`.
PR Close#49295
This commit incrementally builds on top of https://github.com/angular/angular/pull/49271 and adds the logic to hydrate elements and text nodes that don't have any Angular features (like *ngIf/*ngFor, etc) and are not content-projected.
The subsequent commits will extend the logic further to support more complex scenarios.
Co-authored-by: Jessica Janiuk <jessicajaniuk@google.com>
Co-authored-by: Andrew Kushnir <akushnir@google.com>
PR Close#49285
Close#45698
KeyEventsPlugin now has different behavior with EventsPlugin, it will
always run inside ngZone with ngZone.runGuarded() no matter the
component is initialized inside or outside of NgZone, this PR
make sure KeyEventsPlugin bahave the same with other events.
PR Close#49330
Previously (at the early days of Ivy) a TNode used to keep an array of TViews, but the logic was changed since that time, but the `tViews` field remained on TNode interface (+ corresponding typings).
This commit renames TNode.tViews to TNode.tView and cleans up typings.
PR Close#49313
**Important note**: this is a first commit in a series of commits that will be needed
to support non-destructive hydration. Stay tuned for further updates!
This commit lays the foundation on top of which more hydration logic will be
added in follow up PRs. This PR includes:
* Initial serialization of hydration data
* Data transfer of hydration annotations from server side to client
* Accessing hydration info and populating internal data structures
* Initial APIs (currently private) that enable hydration (in a tree-shakable manner)
* Cleanup of annotations post hydration
* Initial test infrastructure and basic test cases
This commit does **not** expose any public APIs. They'll be exposed later, when
more hydration logic is implemented to a state when it can cover most common
use-cases.
Co-authored-by: Jessica Janiuk <jessicajaniuk@google.com>
Co-authored-by: Andrew Kushnir <akushnir@google.com>
PR Close#49271
* With tsc improvements some types can be refined.
* Removing unnecessary non-null assertions.
* Using std native methods instand of custom functions
* Using @ts-expect-error instead of `any` type assertion to keep code navigation.
PR Close#49206
This commits add a utility method to merge multiple `ApplicationConfiguration` into one from left to right. This is useful for server rendering were an application might have several configurations.
Usage Example:
```ts
const config = mergeApplicationConfig(appConfig, appServerConfig);
```
PR Close#49253
DestroyRef represents a concept of lifecycle scope where destroy
callbacks can be registered. Such callbacks are automatically
executed when a given scope ends it lifecycle.
In practice the most common lifecycle scopes would be represented by:
- a component or en embedded view;
- instance of `EnvironnementInjector`.
PR Close#49158
This change makes the `createUrlTreeFromSnapshot` added in #45877 the
default and only behavior in the Router. This now addreses #42191, #38276, #22763,
and #48472 without needing to create custom handling to
call `createUrlTreeFromSnapshot` (since it's now called by `Router.createUrlTree`).
BREAKING CHANGE: Tests which mock `ActivatedRoute` instances may need to be adjusted
because Router.createUrlTree now does the right thing in more
scenarios. This means that tests with invalid/incomplete ActivatedRoute mocks
may behave differently than before. Additionally, tests may now navigate
to a real URL where before they would navigate to the root. Ensure that
tests provide expected routes to match.
There is rarely production impact, but it has been found that relative
navigations when using an `ActivatedRoute` that does not appear in the
current router state were effectively ignored in the past. By creating
the correct URLs, this sometimes resulted in different navigation
behavior in the application. Most often, this happens when attempting to
create a navigation that only updates query params using an empty
command array, for example `router.navigate([], {relativeTo: route,
queryParams: newQueryParams})`. In this case, the `relativeTo` property
should be removed.
PR Close#48508
This commit moves the `TransferState` class implementation to `@angular/core`. This class will be needed in core in followup changes and `core` can not depend on `platform-browser` package.
The `core` package does **not** export those symbols into public API surface.
The `platform-browser` package re-exports the symbols under same names for backwards-compatibility.
PR Close#49222
This commit updates the `TNode` to include a reference to the previous sibling node. Currently, TNode has references to the next sibling and parent nodes, but in followup changes we'd need to have access to previous TNodes (to determine position of the current node).
PR Close#49223
This commit exposes `signal`, `computed`, `effect` and various helpers from
the `@angular/core` entrypoint.
These APIs are marked as `@developerPreview` and are still prototypes in
active development. Their final shapes will be subject to our internal
design reviews as well as one or more community RFCs. We're exporting them
now to allow for experimentation using 16.0.0 next and RC releases.
PR Close#49150
This commit checks in (but does not export) a prototype implementation of
Angular Signals, along with its unit test suite and a README explaining the
algorithms used.
Signals are not a new concept in the framework space, but there are many
different flavors of implementations. These differ radically both in terms
of public API as well as behavioral details (such as eager vs lazy
computation, batching behavior, equality, cleanup, nesting, etc).
This commit comprises a bespoke implementation that we've designed to best
meet Angular's needs, especially when it comes to compatibility and
flexibility of use within existing applications.
Many of the API features of this implementation of signals, as well as the
larger direction of reactivity in Angular, will be discussed in future RFCs.
Co-Authored-By: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
PR Close#49091
While unlikely, prior to this change it was possible to provide a nested array of styles to the render. This required the framework to handle this by doing a flatten operation. This change also renames the `flattenStyles` method as it no longer flattens the styles.
BREAKING CHANGE: `RendererType2.styles` no longer accepts a nested arrays.
Closes#48317
PR Close#49072
Currently style of components using `encapsulation`, `None` or `Emulated` will not be removed from the DOM once the component get destroyed.
This change addresses this by keeping track of the number of times a component is rendered, when the component is destroyed the counter is decreased and once this reaches zero the style element is removed from the DOM.
Currently, this new behaviour is on opt-in bases, but it will be changed in the next major version.
To opt-in, set the `REMOVE_STYLES_ON_COMPONENT_DESTROY` DI token to `true`.
Example
```ts
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule
],
providers: [
{ provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Closes#16670
PR Close#48298
The terser update included various changes, including changes to the
inline optimizations. Constants like for the bloom filter are no longer
inlined multiple times, but instead the constant is preserved and used
with a shortened/mangled name.
Note this also applies to other symbols like `SimpleChanges` too.
This means that such new variables now show up in the symbols goldens.
Concrete examples of inlined & no-longer inlined constants can be
seen in the PR description: https://github.com/angular/angular/pull/49000#issue-1576416106
PR Close#49000
v16 will have a breaking change to the way `UrlTree`s are constructed.
This change is actually a bug fix that makes `UrlTree` creation correct
in more scenarios (see #48508). However, this can affect applications that are
relying on the current incorrect behavior. This commit adds a dev mode
warning when the target of a navigation will change once #48508 is
submitted.
PR Close#48688
the easing "prop" used to specify the easing function to
apply to animations isn't a valid css property, it is thus
considered not animatable but different values for such
property shouldn't cause non-animatable warnings
resolves#48571
PR Close#48583
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
Fixes that the expression converter was producing code that throws a runtime error if a non-null assertion is used as a part of a safe read, write or call.
Fixes#48742.
PR Close#48801
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
`makeEnvironmentProviders` constructs the wrapped `EnvironmentProviders`
type, which can only be used in environment injectors (not element
injectors). It makes sense that `makeEnvironmentProviders` should be able
to accept existing `EnvironmentProviders`-wrapped providers, since it will
be providing the same guarantee, but the current types do not allow this.
This commit fixes the typings to allow nesting `EnvironmentProviders` and
adds a test to verify that it will work.
PR Close#48720
Allows for self-closing tags to be used for non-native tag names, e.g. `<foo [input]="bar"></foo>` can now be written as `<foo [input]="bar"/>`. Native tag names still have to have closing tags.
Fixes#39525.
PR Close#48535
- update `errors.ts` to annotate the error NG0403, so that the runtime can add a link to that guide when an error is thrown
- update `application_ref_spec.ts` to include the new link of the error
- update `errors.md` as a result of running `yarn bazel test packages/core/test`
Fixes#47985
PR Close#48483
* Switches all remaining targets (even if not tested and failing as per
build) away from `ts_devserver` to the canonical `http_server` from
dev-infra.
PR Close#48521
* Switches to the canonical dev-infra http server
* Uses the bundle for serving.
* Switches app_bundle to simple `esbuild` since the test relies
on `ngDevMode` which `app_bundle` elides as optimization.
PR Close#48521
Since Karma with Bazel does not support ESM natively, we bundle the
tests using ESBuild into a single AMD file. This not only solves the
ESM issue until we can run browser ESM tests natively (also pending
in the components repo - the esbuild generation follows ESM semantics
but since collapsed we don't rely on the real module system).
A benefit of bundling is also faster and more reliable Karma browser
tests since only a single file needs to be loaded- compared to hundreds
of individual files.
PR Close#48521
If tests are bundled using e.g. esbuild, the `ee` symbols may
be rewritten to `\u0275\u0275`. This breaks assertions that
rely on `Function.toString`. We can avoid this string comparison
and make it more future proof by just comparing the symbols directly.
PR Close#48521
The `packages/core/test` test code was relying on non-ESM
compatible features like untyped `require` calls.
We switch these to ESM `import` statements/expressions and
make it strongly typed. It's a trade-off between type-safety
and the dependency graph- but it feels more reasonable typing
this properly to actually benefit from the type system provided
by using TypeScript.
Additionally, we align the IDE tsconfigs to use `esnext` as module
because that is what we use in Bazel and it allows us to use
top-level await.
PR Close#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
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
This commit adds a swappable provider for an upcoming change to the
implementation of `Router#createUrlTree`. This will be a breaking change
and is planned to be included in V16.
PR Close#47988
fix the issue of camel-case properties not being handled correctly in
state transition causing them not to be applied to the element
resolves#48246
PR Close#48436
TestBed.overrideProvider should include `multi` support in its type. The
underlying implementation already supports it, as documented by the
tests which are currently casting the override to `any` to get around
the bad type.
PR Close#48424
When injecting the `ChangeDetectorRef` into a node that matches a component, we create a new ref using the component's LView. This breaks down for host directives, because they run before the component's LView has been created.
These changes resolve the issue by creating the LView before creating the node injector for the directives.
Fixes#48249.
PR Close#48355
Alan Agius