add a link to the community-driven Turkish translation of Angular
documentation to make it easier for Turkish-speaking developers to
discover localized docs.
The translation project is maintained by the community and hosted at:
https://github.com/erkamyaman/angular-tr
Providing documentation in developers' native languages helps lower
the barrier to entry and supports wider Angular adoption in the
Turkish-speaking developer community.
(cherry picked from commit 03465360bd)
Fix browser-specific styles infrastructure. PR #62786 cleans up part of the code, but there are still services that attempt to load these stylesheets on `main`.
(cherry picked from commit ed3dc10fea)
This is a follow-up to #67381 which introduced a subtle bug where depending on the type checking configuration, we may put an object literal directly in the TCB body which the TS compiler ends up interpreting as a block. These changes resolve the issue by always wrapping the literal in parentheses.
TypeScript has functionality that automatically escapes quotes in string literals. These changes update the places where we may need to do the same ourselves.
Expands the `debounce` rule configuration to accept `'blur'`. When this option
is provided, the rule will delay model synchronization until the field loses
focus (is touched). This introduces a debouncer that defers resolution
until the framework automatically aborts pending debounces upon touch events.
(cherry picked from commit c767d678cf)
This commit updates the github.mjs configuration to set requireReleaseModeForRelease to false, removing the requirement to use release mode for releases in the angular/angular repository.
(cherry picked from commit a6941adce8)
The Angular compiler unconditionally adds a debug name transform for signals
which generates a conditional on `ngDevMode` (e.g., `ngDevMode ? { debugName: "xyz" } : []`).
During testing, `ngDevMode` is true, so the true branch executes but the
false branch is never executed. Consequently, coverage tools report the
false branch as an untested line/branch, preventing 100% test coverage.
This commit adds a synthetic `/* istanbul ignore next */` comment to the
generated false branch so that Istanbul ignores it. We only include the
istanbul comment (instead of additionally including c8) to focus on the
established standard for Angular CLI/Karma coverage while maintaining
compatibility with modern Vitest setups, since @vitest/coverage-v8 now
natively respects the fallback istanbul comment.
Fixes#64583
(cherry picked from commit dc4cf649b6)
RecursiveVisitor.visitIfBlockBranch was permanently mutating the children array by pushing the expressionAlias into it. This change clones the array before pushing to avoid this side effect.
(cherry picked from commit 72a17afaf3)
When routing between two different routes, child animations were not finishing, causing elements to be left behind in the dom. The fix ensures the proper fallback is handled to avoid automatically cancelled custom events. This ensures the animation-fallback cancelling the animation actually completes, and ensures the element is removed.
fixes: #67400
(cherry picked from commit 9e64147b73)
Partially rolls back to using TypeScript 5.9 for the builds on the patch branch, because we bundle our TypeScript version with the language service which can introduce unexpected breakages for users.
Note that we still allow users to install TypeScript 6.
Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data
PR Close#67002
Use feature detection for `Uint8Array.prototype.toBase64` and
`Uint8Array.fromBase64`, falling back to the existing implementation
when native support is not available
PR Close#67002
This updates the state manager to allow intercepting and deferring commits of traversal navigations.
The issues that were encountered in the past appear to be resolved in Chrome.
The behavior of redirect is still undefined in this case, so there is an added TODO.
(cherry picked from commit 778b748694)
This ensures that when calculating longest animations, we completely ignore infinite animations. This will prevent mistakes with using the API and hopefully catch any unexpected bugs.
fixes: #67350
(cherry picked from commit 9758ea9ee9)
This addresses a reported issue where elements were being fully removed from the DOM during drag and drop operations.
fixes: #67257
(cherry picked from commit 0b59cba85d)
Same as ADEV, currently the CLI prompts for another port if 4200 is busy but the toolchain doesn't support prompts.
By defaulting to 4201 we avoid regular CLI apps from preventing to run the dev-app
(cherry picked from commit 9bb4f02bef)
The repositories for `rules_sass`, `rules_angular`, and `rules_browsers`
were recently transferred from devversion to the angular organization.
This commit updates the internal bazel module rules to rely on
the new repository locations.
(cherry picked from commit b4f68acaa1)
Improved wording to clarify how beginners can verify their environment and IDE are correctly set up after running the app.
(cherry picked from commit bdbb7cc7af)
Translators are not allowed to write HTML which creates URI attributes. I opted to ban any values going into an attribute at all, to prevent even links to malicious content, rather than just sanitizing URIs.
I also converted this blocklist into an allowlist. Now, we only allowing setting known attributes (while sanitizing URI attributes). This significantly reduces risk of missing a vulnerable attribute and does not require an exhaustive list of all potential attributes.
BREAKING CHANGE: Angular now only applies known attributes from HTML in translated ICU content. Unknown attributes are dropped and not rendered.
(cherry picked from commit 306f367899)
Replaces referenced doc blocks with inline documentation,
cleans up unused referenced code, and fixes broken list formatting
(cherry picked from commit 8739a22d28)
Removes extra padding applied to the update page so its layout
matches the rest of the documentation where no padding exists
between the title and content.
(cherry picked from commit 15b51d0777)
This commit extracts the heading ID generation logic into a shared utility
and updates both the route generation script and the markdown pipeline to use it.
This ensures consistency between the generated routes and the rendered
documentation, and fixes an issue where custom heading IDs (`{#id}`)
were ignored during route generation.
Fixes#67200
(cherry picked from commit bedfcb5644)
Aligns the errors returned from the `parse` function in
`transformedValue` to use the same convention as the rest of signal
forms (a property called `error` that can contain a single error or list
of errors)
(cherry picked from commit 23fd8fa586)
Addresses an issue where the LCP image observer incorrectly identified LCP elements when the same image URL was used multiple times on a page
Fixes#53278
(cherry picked from commit 38749698d0)
This updates the pullapprove to remove the auto labeling of requires: TGP and instead moves it to the ng-dev config for pr updates.
(cherry picked from commit d7ddebca90)
Add help link to extended template diagnostic messages to provide
users with additional guidance and documentation resources. This
enhancement improves developer experience by making it easier to
understand and resolve complex template issues through direct
access to relevant Angular documentation with detailed examples
and explanations for each diagnostic type.
(cherry picked from commit 66b472e2bc)
The JsonPipe does not unwrap signals and `JSON.stringify` will return `undefined` for signals.
To avoid confusion, we log a warning when a signal is passed to the pipe.
(cherry picked from commit 0d652ba4da)
Wrap `@defer` trigger expressions (`when`, `prefetch when`, `hydrate when`)
in a conditional context within the TCB to enable TypeScript's TS2774
diagnostic for detecting functions used without invocation.
Previously, signals and functions passed to `when` triggers without
parentheses would silently evaluate to truthy, causing unexpected behavior.
Now the compiler reports an error when a function is used as a condition
without being called.
(cherry picked from commit f90e5565e0)
avoid per-file semantic diagnostics work when warming up a newly loaded project.
add ensureProjectAnalyzed() to the language-service API and use it from the server startup path.
implement warmup through public compiler API access with existing perf tracing, and add legacy test coverage for the new warmup flow.
(cherry picked from commit 39f62fa408)
The tokenizer regex pattern `[^<]*` was consuming all non-`<` content
before custom HTML tags, causing lost content.
Changed to `\s*` which only allows leading whitespace, letting marked
properly tokenize preceding content.
(cherry picked from commit bc473cf60f)
When Zone patches Promise, it uses ZoneAwarePromise. The new Promise.try API was undefined on ZoneAwarePromise, making it unavailable when zone was present. This change gracefully passes through Promise.try to the native Promise implementation, if available, without patching it to execute in the right zone (our stance is not to add new patches but avoid destructively making new APIs unavailable).
Fixes#67057
Angular requires TypeScript >=5.9, making TODO comments that reference TypeScript 2.1 features obsolete. These comments existed in keyvalue_differs.ts and ng_for_of.ts and referenced type improvements that were deferred until TS 2.1, which has long since been surpassed.
Removes the switch for compatibility mode from the template pipeline since we never got around to removing it and at this point it causes a bunch of runtime errors.
native controls and custom controls (via transformedValue) use similar
parsing logic but it needs to be hooked up differently. This commit
extracts the common bits into a shared piece.
PR Close#66917
Supports binding `null` to a `<input type=number>`.
- Binding in `null` clears the input
- Binding in `NaN` also clears the input
- When the user clears the input, the model is set to `null`
- The model is _never_ set to `NaN` based on user interaction. It is
either set to `null` if the user cleared the input, or is unchanged
and a parse error added if the user entered an invalid number like
"42e"
PR Close#66917
Integrates native inputs with the new parseErrors API so that they can
report parse errors when the user types an un-parsable value (e.g. "42e"
in a number field).
When a user types an un-parsable value, the model does not update. It
retains its previous value and a parse error is added for the control
that received the un-parsable value.
PR Close#66917
Changes `parsedErrors` to a `linkedSignal` based on the model value.
This ensures that the parse errors are reset if the model changes from
outside the control.
PR Close#66917
The purpose for this change is to add nodes to the signal graph to make it clear when producer nodes, especially those that aren't consumed in the component being inspected, are passed to child components for consumption.
The first agent skill is a workflow for building a new Angular app from scratch. Using this skill agents will use Angular tooling for code generation where appropriate. Also includes important hints.
The `isTypeOnly` property was deprecated in TypeScript and replaced by `phaseModifier`.
Updates the check to use `phaseModifier`, which is the recommended API for detecting type-only imports.
Additionally, removes the unused `metadata` parameter from the `NgModuleExtractor`
Fixes#67051
Store custom control focus callbacks in a wrapper so method invocation keeps the original object context. Without this, custom focus methods that access instance members throw at runtime when focusBoundControl() is called.
When using ViewContainerRef to rapidly toggle animated elements in
zoneless mode (e.g. CDK Overlay menus), multiple copies of the element
could appear in the DOM. This happened because leave animations were
queued but not yet executed, and the existing `cancelLeavingNodes`
mechanism could not find the leaving element to cancel it — it ran
during template execution before the new element was in the DOM, and
used the declaration container's anchor which doesn't work for
overlay/portal patterns where elements are moved to separate
containers.
Due to explicit injector type checks, inspecting nodes that have type !== `environment` but at the same time are rendered in the Environment Injector tree, opening their details used to break the app. This change fixes this.
Antigravity does not support AGENTS.md, instead it has "workspace rules" (antigravity.google/docs/rules-workflows). This commit adds a symlink for the workspace rule.
In signal forms, it is up to the user to guard hidden fields from being
rendered in the template. To help catch instances where it is
accidentally not guarded, this commit introduces a warning in dev mode.
Removes the use of the private Protractor builder (`@angular-devkit/build-angular:private-protractor`)
from all integration test projects. Projects that still require E2E tests
now invoke Protractor directly via NPM scripts using `concurrently` to
manage the development server.
`FieldTree` was an unnecessarily specific type for the `[formField]`
input. It forced the directive to care about what _kind_ of `FieldTree`
was bound–specifically whether it was Reactive Forms compatible or not.
This made it difficult to author forms system-agnostic components with
passthrough `[formField]` inputs.
Animation runner functions (runEnterAnimation, runLeaveAnimations,
runLeaveAnimationFunction) execute asynchronously from the animation
queue via afterNextRender. By that time the lView injector may have
been destroyed, causing lView[INJECTOR].get(NgZone) to throw NG0205.
Move the NgZone and MAX_ANIMATION_TIMEOUT lookups into the setup
instructions (ɵɵanimateEnter, ɵɵanimateLeave, ɵɵanimateLeaveListener)
which run synchronously during template processing when the injector
is guaranteed to be valid, and pass them through the closures.
The dynamic component has `[value]` in its selector and this has always been reflected as a DOM attribute on the dynamically created host element, which is now also synced into the component instance.
fixes#60157
Adds an option (`ngTemplateOutletInjector="outlet"`) that instructs the ngTemplateOutlet to inherit its injector from the outlet's place in the instantiated DOM.
The `SkipSelf` flag is intended for the current injection context. When delegating to an embedded view injector, we are traversing to a parent/fallback scope, so the 'Self' has already been skipped.
Removes the `e2e` architect target from the `legacy-animations` integration test
project as it does not have actual E2E tests and was using a placeholder script.
Removes the `e2e` architect target from several integration test projects
that do not have Protractor as a dependency and are not executing E2E tests.
Affected projects:
- cli-hello-world
- cli-hello-world-lazy
- defer
- legacy-animations-async
- standalone-bootstrap
Introduces an optional `height` property in `ImageLoaderConfig`, allowing
built-in image loaders to generate URLs with explicit height parameters.
This improves layout control and enables better support for loaders that
require height-based transformations.
Closes#51723
The `action` and `onInvalid` handlers now recevie two pieces of
information:
1. The form that is being submitted
2. The specific field that the submit was triggered on
Remove the `submit()` method on field state - supporting this is complex
from a typing perspective, since the `FieldState` only knows its
`TValue` type, not the `TModel` type of its owning `FieldTree`. Rather
than try to pack additional generics on to `FieldState`, we'll just
leave the `submit` function as a standalone importable function.
Removes usages of zone-based helpers such as `fakeAsync` , `tick`
`waitForAsync` as part of the migration to zoneless tests.
Completes the transition to zoneless.
Encodes arraybuffer and blob response bodies as base64 when storing in the transfer cache, ensuring correct retrieval and usage on the client side.
Fixes#66827
The `fieldTree` property of `FieldState` returns its associated
`FieldTree`.
Note that the round trip from `FieldTree` to `FieldState` and back will
lose type information. This is because `FieldState` intentionally does
not know whether it came from a pure Signal Forms field tree, or a
Reactive Forms compatible field tree:
```ts
// Pure Signal Forms:
const x: FieldTree<string>;
x(); // FieldState<string>;
x().fieldTree; // FieldTree<unknown>
// Reactive Forms compatibility:
const y: FieldTree<FormControl<string>>;
y(); // FieldState<string>;
y().fieldTree; // FieldTree<unknown>;
```
Reoves the `parseErrors` property on `FormUiControl` and instead
introduces a new utility `transformedValue` that automatically handles
synchronizing the raw value and model value using the given `parse` and
`format` functions. It also automates the reporting of `parseErrors` to
the `FormField`, simplifying the API surface
Adds a Gemini CLI custom command (`/explain`) to generate skills for
working with code packages in this repo. Usage:
1. Add skill for a new package:
`/explain packages/common`
2. Update the skill for a package:
`/explain Update the skill for packages/core`
3. Add supplemental information:
`/explain Add supplemental info to the signal forms skill about how
schema logic is implemented`
Also adds a few skills for working with some of the packages I commonly
interact with, including:
- packages/forms/signals
- packages/core
- packages/compiler-cli
Now if there's a leave animation nested within a template, those will animate before the parent element is removed. This makes animating leaving elements a bit easier than before and adds a lot more flexibility to how animations can be structured.
fixes: #66476
Allow `validateStandardSchema()` to consume a computed schema so
validation rules stay in sync when the schema changes over time.
This supports schemas stored in computed signals (e.g. zod schemas that
depend on input signals) and ensures the effective schema updates after
initialization instead of being captured once.
Fixes#66867
Based on the discussion in #66294: now that we support arrow functions in event listeners, developers may write out something like `(click)="() => expr"` which will be a no-op. These changes update the existing diagnostic for uninvoked expressions in listeners to account for it.
Standardize on `import type ts from 'typescript'` across several files
in the language-service package.
This ensures that these files do not have a runtime dependency on a
specific version of the TypeScript module, instead relying on the
instance provided by the host during initialization.
Note: This change is not comprehensive. Several files still require
runtime access to the TypeScript module and will require further
refactoring to fully decouple the dependency.
Replace `field: any` with proper SchemaPath typing in Signal Forms custom
validation examples to match built-in validator patterns.
fixes: #66887
Update adev/src/content/guide/forms/signals/validation.md
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
This feature enables synchronized editing of opening and closing HTML tag pairs
in Angular inline templates. When the cursor is on an element tag name, editing
it will automatically update the corresponding tag.
Implementation:
- Add getLinkedEditingRangeAtPosition method to NgLanguageService interface
- Implement linked editing range detection for opening and closing tags
- Handle edge cases: self-closing elements, void elements, cursor detection
- Export through ts_plugin wrapper to override TypeScript JSX-only implementation
- For external HTML templates, VS Code built-in HTML support handles linked editing
Update `ts_plugin.ts` to use the TypeScript instance provided by the
editor during initialization instead of a local import. This prevents
potential issues caused by version mismatches between the plugin's
internal TypeScript dependency and the version used by the host.
Removes usages of zone-based helpers such as `fakeAsync` , `tick`
`waitForAsync` as part of the migration to zoneless tests.
Completes the transition to zoneless.
Updates FormOptions to accept a submission configuration object.
This allows defining default submit options (action, validation behavior, etc.)
when creating the form, which can be overridden when calling submit().
Changes the `submit` function signature to accept a `FormSubmitOptions` object instead of a direct action callback.
This allows for more flexibility, including:
- `action`: The standard submit action to perform with the data.
- `onInvalid`: A callback to execute when the submit action is not triggered due to failing validation
- `ignoreValidators`: Controls whether pending validators or invalid validators should be ignored
Also updates the return value of `submit` to a `Promise<boolean` to indicate submission success.
Replaces “one of two ways” with “one of the following ways” to avoid
hardcoding the number of supported approaches and keep the
documentation accurate if options change.
fixes: #66861
In many JS runtimes all closures created in the same scope share a context
this means that data held in one of the closures is not collected until all of the closures are collected.
This change prevents the returned promise from holding a reaction that holds the entire `Router` object in memory.
- Add registerOnChange, _unregisterOnChange for value change callbacks
- Add registerOnDisabledChange, _unregisterOnDisabledChange for disabled callbacks
- Add disabled changes effect to notify registered callbacks
- Call onChange callbacks from updateValue with emitModelEvent flag
- Add CachingWeakMap utility for memoization
- Add wrapFieldTreeForSyncUpdates Proxy wrapper
- Intercept fieldTree().value.set() calls to sync parent immediately
- Cache wrapped trees and states to preserve identity
- Add ValueUpdateOptions type with onlySelf, emitEvent options
- Add parent notification on value changes via effect
- Add parent notification helpers: scheduleParentUpdate, notifyParentUnlessPending
- Propagate dirty/touched/pristine/untouched to parent
- Support onlySelf option to prevent parent propagation
- Add valueChanges EventEmitter that emits when source signal changes
- Add statusChanges EventEmitter that emits when status changes
- Set up effects to emit to observables
- Add reset() method with optional value parameter
- Support FormControlState unboxing ({value, disabled} format)
- Add isFormControlState helper function
This commit introduces `SignalFormControl`, a bridge implementation that allows Signal-based forms to interoperate with existing Reactive Forms infrastructure. It extends `AbstractControl` with standard methods and reactive observables while handling state propagation to parent containers.
Unlike a normal `signal()`, a `linkedSignal()` can be in an error state when
its computation fails. Currently, there's a bug where `linkedSignal.update`
does not account for this error state, and will pass the internal `ERRORED`
`Symbol` as the current value to the updater function.
This commit fixes the issue by having `update()` check and throw the error
instead of calling the updater function.
Enables specifying a custom browser URL for router links via a new input,
allowing navigation to use an explicit browser URL in navigation options.
Closes#66805
Updates the plugin factory to directly invoke the 'initialize' function from the
Angular Language Service bundle. This replaces manual proxying and lazy-loading
logic with direct delegation, unifying the instantiation process within the bundle.
Previous the router tree was an opt-in feature that required manual enablement in settings.
Now the router tree is enabled by default whenever the application supports it and routes are detected.
Adds `ChangeDetectionStrategy.Eager` as an explicit alias for `ChangeDetectionStrategy.Default`. This improves readability when contrasting with `OnPush`, clarifying that the component will be checked eagerly when traversal reaches it.
Compiler findings:
- The compiler resolves `ChangeDetectionStrategy` enum members by value in `resolveEnumValue` (see `packages/compiler-cli/src/ngtsc/annotations/common/src/evaluation.ts`).
- Since `Eager` has usage value `1` (same as `Default`), it is correctly interpreted during static analysis.
- At runtime, `defineComponent` (in `packages/core/src/render3/definition.ts`) checks `changeDetection === ChangeDetectionStrategy.OnPush` (0). Any other value, including `1` (Eager/Default), results in eager checking behavior (`onPush: false`).
This commit introduces a JSON schema for angularCompilerOptions in the
Angular Language Service extension. It provides validation and autocompletion
for Angular-specific options in tsconfig.json files.
Remove `setControlValue()` from `FieldState` and convert `controlValue` to a
`WritableSignal` whose setter implements the debounced syncing behavior
of `setControlValue()`.
This commit converts the typescript import in api.ts to a type-only import
and updates the plugin factory to utilize standard TypeScript server types.
Internal interfaces and specific service types are replaced with general
types to decouple the factory wrapper from internal implementations.
Refactors the `ɵɵcontrolCreate` and `ɵɵcontrol` instructions to delegate control logic to the forms package via new `ɵngControlCreate` and `ɵngControlUpdate` lifecycle hooks. Previously, the logic for binding form state to native elements and custom controls was hardcoded within `@angular/core`.
**Compiler Changes:**
- Introduces a new compilation phase `specializeControlProperties` (in `control_directives.ts`).
- This phase detects properties named `formField` and specializes them into `ControlCreate` and `Control` IR opcodes.
- These opcodes emit `ɵɵcontrolCreate` and `ɵɵcontrol` instructions, respectively.
**Runtime Changes:**
- `ɵɵcontrolCreate` acts as the creation phase. It locates the control directive and invokes its `ɵngControlCreate` method.
- `ɵɵcontrol` acts as the update phase, and invokes the control directive's `ɵngControlUpdate` method (if present).
- Introduces a `passThroughInput` configuration in `ControlFeature`. This specifies the input name (e.g., `formField`) that triggers the control. If the runtime detects that this input is bound to multiple targets (e.g., the `FormField` directive *and* the host component), the control is flagged as "pass-through". In this state, `ɵngControlCreate` returns a no-op update function, deferring responsibility to the other consumer (e.g., the component managing the field itself).
**Forms Changes:**
- `FormField` directive implements `ɵngControlCreate` and `ɵngControlUpdate`.
- Inside this hook, `FormField` determines the type of control it is attached to (Native, CVA, or Custom Signal Control) and delegates to the appropriate handler (`nativeControlCreate`, `cvaControlCreate`, or `customControlCreate`).
- Consolidates all form binding logic within `@angular/forms/signals`, enabling support for new `FormValueControl` and `FormCheckboxControl` interfaces.
- Reorganizes the codebase by moving `FormField` from `api/` to `directive/` and splitting the binding logic into semantic pieces:
- `control_native.ts`, `control_cva.ts`, and `control_custom.ts` contain the specific handlers for each control type.
- `native.ts` and `select.ts` provide helpers for native element discovery and select-specific synchronization.
- `bindings.ts` manages the tracking and application of property/attribute bindings.
Consolidating the standard schema support into `standard_schema.ts` will
cut down on unnecessary g3 patch changes whenever we change
`validation_errors.ts`.
The standalone build.sh script for the language service is no longer
required as the vscode-ng-language-service repository has been merged
into this monorepo. Local development and testing of the extension
can now be handled via the integrated build system.
When dynamic components are rapidly added and removed with animate.leave and animate.enter, a leave animation might fire before the enter animation could, causing an element to be retained. This fix prevents that from occuring by clearing the enter animations in this case.
fixes: #66794
This commit updates the @angular/localize ng-add schematic to support
the @angular/build:unit-test builder. It ensures that @angular/localize
is added to the types array in the TypeScript configuration file
associated with the unit-test target. If no tsConfig is specified in
the target options, it defaults to tsconfig.spec.json in the project root.
Deeply nested parentheses in URLs (e.g. `(a/(b/(c...)))`) trigger recursive calls in `UrlParser`, which can lead to a `RangeError: Maximum call stack size exceeded`. While such errors are generally caught by the framework, relying on the runtime's stack limit is unpredictable across different environments and engine states (e.g. varying stack sizes in different browsers or Node.js versions).
The deeply nested parentheses can cause a stack overflow. While such URLs can be valid (e.g., `(a/(b/(c...)))`) and serialize to simple paths (e.g., /a/b/c), excessive nesting is unreasonable and likely malicious or accidental.
Linear paths (e.g. /a/b/c/d) are parsed iteratively and do NOT trigger recursion. Only parentheses trigger recursion.
This commit introduces a recursion depth limit of 50. If parsing exceeds this depth, the router will now throw a specific `UNPARSABLE_URL` error with the message "URL is too deep". This ensures a deterministic failure mode that is easier for applications to handle than a crash or generic RangeError.
The limit of 50 is chosen as it should accommodate any reasonable application URL structure (including complex named outlets) while providing a safe upper bound against abusive payloads.
This is essentially a refactor of the error state:
* Before: RangeError (System says "I'm out of stack memory")
* After: RuntimeError (Validator says "Input is invalid")
This provides:
* Semantic Correctness: The error now correctly blames the input ("URL too deep"), not the environment ("Stack full").
* Cross-Platform Consistency: The limit is the same in Chrome, Firefox, Node, and Deno, regardless of their internal recursion limits.
* Fast Failure: We stop at depth 50 instead of depth ~15,000, saving those cycles (though CPU cost is negligible either way).
"wide" URLs are now theoretically more expensive than "deep" URLs (because deep ones fail fast), but both are well within safe bounds for any reasonable input size.
This updates `RouterLinkActive`, `Router.isActive`, and the standalone
`isActive` function to accept `Partial<IsActiveMatchOptions>` which uses
the current default values as the base (paths and queryParams are
subset, fragment and matrix params are ignored).
fixes#53326
This commit refactors the `ts_plugin.ts` implementation to use a new `withFallback` helper function. This helper encapsulates the common logic of delegating requests to either the Angular language service directly (for non-TS files or when `angularOnly` is true) or trying the TypeScript language service first before falling back to the Angular language service.
Don't touch hidden, disabled, or readonly fields on submit, since they
don't contribute to form validity. This also prevents errors from
appearing immediately if they're later made interactive.
Fix#66344
Ensure `submit()` behaves as expected while a form is pending.
- Submission is not blocked by pending validation.
- Submission errors prevent pending validation errors from appearing
after they resolve on the same field.
- Submission errors don't prevent pending validation errors from
appearing after they resolve on subfields.
This updates the language service to use the detected version of angular
core in the given project on load rather than the minimum detected
version in the workspace
Updates the form documentation to link to the API reference for the `form()` function.
Also removes unused `HttpClient` import from the async validation example.
PR Close#66732
Update how dev preview, experimental and deprecated labels are visualized in the API list to avoid ambiguity with the current design on larger screens.
This commit prevents the Router from intercepting reload navigations
in the navigate event listener. This would convert hard page reloads
to SPA navigations.
fixes#66746
Update the Genkit Angular integration documentation link from the old path
/docs/angular/ to the current correct path /docs/frameworks/angular/
This ensures developers are directed to the correct and up-to-date
documentation for integrating Genkit with Angular applications.
Adds dedicated `LocationStrategy` subclasses: `NoTrailingSlashPathLocationStrategy` and `TrailingSlashPathLocationStrategy`.
The `TrailingSlashPathLocationStrategy` ensures that URLs prepared for the browser always end with a slash, while `NoTrailingSlashPathLocationStrategy` ensures they never do. This configuration only affects the URL written to the browser history; the `Location` service continues to normalize paths by stripping trailing slashes when reading from the browser.
Example:
```typescript
providers: [
{provide: LocationStrategy, useClass: TrailingSlashPathLocationStrategy}
]
```
This approach to the trailing slash problem isolates the changes to the
existing LocationStrategy abstraction without changes to Router, as was
attempted in two other options (#66452 and #66423).
From an architectural perspective, this is the cleanest approach for several reasons:
1. Separation of Concerns and "Router Purity": The Router's primary job is to map a URL structure to an application state (ActivatedRoutes). It shouldn't necessarily be burdened with the formatting nuances of the underlying platform unless those nuances affect the state itself. By pushing trailing slash handling to the LocationStrategy, you treat the trailing slash as a "platform serialization format" rather than a "router state" concern. This avoids the "weirdness" in #66423 where the UrlTree (serialization format) disagrees with the ActivatedRouteSnapshot (logical state).
2. Tree Shakability: If an application doesn't care about trailing slashes (which is the default "never" behavior), they don't pay the cost for that logic. It essentially becomes a swappable "driver" for the URL interaction.
3. Simplicity for the Router: #66452 (consuming the slash as a segment) bleeds into the matching logic, potentially causing issues with child routes or wildcards effectively "eating" a segment that should be invisible. This option leaves the matching logic purely focused on meaningful path segments by continuing to strip the trailing slash on read.
4. Consistency with Existing Patterns: Angular already uses LocationStrategy to handle Hash vs Path routing. Adding "Trailing Slash" nuances there is a natural extension of that pattern—it's just another variation of "how do we represent this logic in the browser's address bar?"
fixes#16051
This implements `onDidChangedWatchedFiles` in the language server, which
allows the client to communicate changes to files rather than having the
server create system file/directory watchers.
This option is enabled in the extension via the
`angular.server.useClientSideFileWatcher` setting.
When enabled, the extension registers a FileSystemWatcher for .ts, .html, and package.json files and forwards events to the server. The server completely disables its internal native file watchers (via a new 'ServerHost' implementation that stubs watchFile/watchDirectory).
This is significantly more performant and reliable than native watching for several reasons:
- Deduplication: VS Code already watches the workspace. Piggybacking on these events prevents the server from duplicating thousands of file watchers.
- OS Limits: Since the server opens zero watcher handles, it is impossible to hit OS limits (ENOSPC), no matter how large the repo is.
- Optimization: VS Code's watcher uses highly optimized native implementations (like Parcel Watcher in Rust/C++) which handle recursive directory watching far better than Node.js's 'fs.watch'.
- Debouncing: The client aggregates extremely frequent file events (e.g., during 'git checkout'), reducing the flood of processing requests to the server.
This option was tested in one very large internal project and observed
~10-50x improvement of initialization times.
fixes#66543
Parse errors allow a custom control to communicate that it is currently
unable to produce a valid value.
Parse errors are reported by implementing the optional `parseErrors`
property on the `FormUiControl`. The property should be a signal of the
current parse errors.
Also renames several `*Field` types to `*FieldTree`. This aligns with the new naming of the concept after `Field` was renamed
to `FieldTree`.
Previously, ng_package applied version stamping to all source files, which corrupted binary files like SQLite databases.
This change ignores text substitution for files passed to the `data` attribute, ensuring binary assets are preserved intact in the final package.
fixes#66637
When synthesizing an import corresponding with a .tsx file, the extension
would not be removed unlike regular .ts files. Adjust the import generators
to also drop any .tsx extension from module specifiers.
Closes#66262
When producing a listener, the template pipeline does the following in separate phases:
1. Generates all the variables available within its scope.
2. Adds `restoreView` and `resetView` calls if there are any referenced to local variables (e.g. `@let` or local refs).
3. Optimizes away the variables that aren't used.
This means that we can end up in a situation where the references to the variables in the scope no longer exist, but we still enter and leave the view as if they're there which is unnecessary.
These changes add a simple optimization pass that looks specifically for the pattern of a `restoreView` followed by a `return resetView(expr)`. Furthermore, by changing the order of some optimizations, we're able to drop the `getCurrentView` variable as well.
Fixes#66286.
Add support for `@defer`-only blocks (previously, they weren't rendered in the component tree at all); Fix declared blocks section in the details
PR Close#66546
Add the host/container comment node to the `DeferBlockData`. This node can be used as a `@defer` block locator in the DOM tree in the absence of root nodes.
PR Close#66546
Previously our system only found the first matching symboling to link to within a code block on each line, now we set up a link for all of the discovered symbols on each line
Fixes#65403
Update the skip-to-main-content behavior to focus the <main> element when present, with a fallback to the first heading for legacy layouts without a main landmark.
There has been a bunch of confusion as to how `animate.leave` works on child nodes when the non-animated parent is removed. This section addition should clarify that.
Extends the `focus` method of form fields and custom controls to accept and propagate `FocusOptions`.
This enables developers to control focus behavior more precisely, for example, preventing scrolling when focusing an element.
The Zone.js build was depending on the `--outFile` flag from TypeScript which is deprecated. These changes switch to using `--outDir` and copying the files out of the directory instead.
Previously we were unconditionally setting the control value back into
the value, regardless of if it had actually been changed. This PR
changes the logic to flush the pending sync on touch if there is one, or
just skip it if there isn't.
Currently migrating from `[ngClass]` to `[class]` isn't entirely supported, because `[ngClass]` supports `Set` values while `[class]` ignores them.
These changes add a bit of logic to bring them closer together and make the migration easier.
This PR adds the ability to manually register a binding with the
`FormField` directive. This is useful for a lower-level implementation
that takes the field tree as an `input()` rather than relying on the
automatic binding from `FormUiControl`.
```ts
@Component(...)
class Outer {
constructor() {
@Component(...)
class Inner {}
}
}
```
previous behavior was that IVy transformation was only applied to `Inner`, thus breaking `Outer` transformation.
Fixes an issue where a trailing slash was sometimes added to the end of URLs in the sitemap, causing unnecessary redirects.
Example of problematic URL:
```xml
<loc>https://angular.dev/</loc>
```
- Ensure there is a GITHUB_TOKEN environment variable at the start so we can push the release
- More robust handling for finding releaser's fork if it's not 'origin'
Updates the syntax definition to handle arrow functions. The definition is largely based on TypeScript's own syntax highlighting since it's quite complex.
We had some reports of LLMs claiming that `ngOnChanges` does not include
changes for signal-based inputs. This is wrong (and the LLMs just made
it up), but we can update the docs at least to demonstrate `ngOnChanges`
with signal-based inputs.
Previously, the API reference used a real test as a code example, but
updating the test to a signal-based input is more involved than this
change needs to call for.
Convert the signal graph to a Devtools-FE-specific signal graph that supports clusters; Add support for `resource` clusters; Introduce some improvements to the signal graph viz
- Fetch tags explicitly to ensure local availability.
- Implement `getPreviousTag` to reliably determine the base for changelog generation, falling back to the latest `vsix-*` tag if the specific previous version tag is missing.
- Filter changelog commits by subject to exclude duplicates (e.g. cherry-picks) that are already present in the previous release history but have different hashes.
This builds off of #66197 by retaining the original navigateEvent across redirects
so the NavigateEvent can more accurately track the lifecycle of a navigation,
which may span across several NavigationStart events due to redirects
* Define `ResourceSnapshot<T>` as a type union of possible states for a
`Resource<T>`.
* Add `Resource.snapshot()` to convert a `Resource` to a signal of its
snapshot.
* Add `resourceFromSnapshots` to convert a reactive snapshot back into a
`Resource`.
By converting resources from/to `Signal<ResourceSnapshot>`s, full
composition of resources is now possible on top of signal composition APIs
like `computed` and `linkedSignal`.
For example, a common feature request is to have a `Resource` which retains
its value when its reactive source (params) changes. This can now be built
as a utility, leveraging `linkedSignal`'s previous value capability:
```ts
function withPreviousValue<T>(input: Resource<T>): Resource<T> {
const derived = linkedSignal({
source: input.snapshot,
computation: (snap, previous) => {
if (snap.status === 'loading' && previous?.value) {
// When the input resource enters loading state, we keep the value
// from its previous state, if any.
return {status: 'loading', value: previous.value.value};
}
// Otherwise we simply forward the state of the input resource.
return snap;
},
});
return resourceFromSnapshots(derived);
}
// In application code:
userId = input.required<number>();
user = withPreviousValue(httpResource(() => `/user/{this.userId()}`));
// if `userId()` switches, `user.value()` will keep the old value until
// the new one is ready!
```
Prior to this change, binding to radio value was sensitive to the order in which `value` & `formField` where binding in the template.
The compiler change makes that order non-important.
fixes#66402
Add comprehensive test cases to validate behavior when multiple
pattern validators are applied to the same field.
These tests clarify that multiple patterns operate with AND logic,
where each pattern is validated independently and produces its own
error when it doesn't match.
build: update dev container configuration
build: update dev container configuration
Update dev container configuration files to support latest environment.
- Use customizations.vscode structure instead of deprecated extensions property.
- Update bazel extension to BazelBuild.vscode-bazel.
- Ignore .pnpm-store directory.
- Update ports list
- Use forwardPorts instead appPort
Document the usage of Dev Containers in building-and-testing-angular.md.
Replaced padding-block-start with margin-block-start on
.docs-reference-section-heading to prevent anchor hover and click areas from extending into empty space above the heading. This ensures hover behavior aligns with the visible text.
The list of valid links is generated from navigation data configuration in the ADEV app.
Redirections are knowingly exclude so we stop referencing them.
Block entries (@if, @defer, @for,@let, @switch) were falling back to the generic
DocsReference template, causing the description to appear twice - once in
the header section and once in the main content area.
This commit adds a dedicated rendering path for block entries:
- Creates BlockEntryRenderable type and associated transforms
- Adds BlockReference template that uses RawHtml directly
- Modifies HeaderApi to accept hideDescription prop
- Updates processing and rendering pipelines to handle blocks
The fix ensures block documentation displays only one description section
while preserving the existing behavior for all other API entry types.
Update adev/shared-docs/pipeline/api-gen/rendering/transforms/block-transforms.mts
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
Removes the unnecessary `Component` suffix from examples.
Also fixes button styling in the animations examples, which previously did not render correctly in dark mode.
Error message links now point to the archived documentation site (v*.angular.dev)
so that referenced content matches the framework version in use.
See angular#44650
PR Close#66374
Error message links now point to the archived documentation site (v*.angular.dev)
so that referenced content matches the framework version in use.
See angular#44650
PR Close#66374
This completes the rename started in #66136. `[field]` is too generic of
a selector for the forms system to own, and likely to cause naming
collisions with existing components. Therefore it is being renamed to
`[formField]`
The common-to-standalone migration did not check for existing imports
when adding needed imports after removing CommonModule. This change adds deduplication
logic to filter out imports that already exist in the imports array
before adding them, ensuring each import appears only once.
Reworks how we store arrow functions in the following ways:
1. Rather than the `storeCallback` and `getCallback` instructions, we generate a single `arrowFunction` instruction.
2. The `arrowFunction` instruction uses a factory to create a new instance of the function when a function is read for the first time.
3. We now keep arrow functions in listeners in line so that they have access to `$event`.
Adds support for using arrow functions in Angular expressions. They generally behave like JS arrow functions with the same access as other Angular expressions, but with the following limitations:
* We only support arrow functions with implicit returns, e.g. `(a) => a + 1` is allowed while `(a) => { return a + 1 }` is not.
* Pipes can't be used inside arrow functions, but they can be passed through to pipes.
To avoid recreating the functions in each change detection, the compiler applies a couple of optimizations:
* If an arrow function only references its own parameters, it is extracted into a top-level constant that is passed around to the different usage sites.
* If an arrow function has references to the template context, we store it on the current view and read the stored value later on.
Fixes#14129.
The `countVariables` phase visits all ops in the list and all nested expressions in order to count how many variables are used. Currently it does so by going through `unit.ops()` and then calling `visitExpressionsInOp` on each op.
This leads to expressions in ops that have nested ops (e.g. `ListenerOp`) to be visited twice, because `unit.ops()` descends into child ops and then `visitExpressionsInOp` does the same. It hasn't been a problem so far, because the only expressions that can have vars in host bindings are pure functions and they aren't generated for listeners, but it will become a problem for arrow functions since they can be used in listeners.
These changes resolve the issue by iterating over the `unit.create` and `unit.update` instead.
Adds the `ɵɵstoreCallback` instruction that allows for a callback to be stored for later usage, as well as `ɵɵgetCallback` which can be used to retrieve it.
Updates the template type checker to support arrow functions. The main challenge was getting the current infrastructure not to rewrite references to arrow function parameters.
Updates the expression parser to handle arrow functions. Since arrow functions share syntax with other AST nodes, we have to detect them by looking ahead and then potentially jumping backwards depending on what we see.
The `precommitHandler` of the Navigation API unlocks some of the truly
powerful features for Routers like Angular's which defer the URL
updates. Without the `precommitHandler`, we cannot initiate a navigation
until we are ready to commit the URL because it causes the URL to update
immediately.
With `precommitHandler` support, we are able to create a `NavigateEvent`
_immediately_ on navigation, which allows the browser to show that a
navigation is happening with a loading indicator. Site visitors will
also have the ability to cancel the navigation with the "stop" button.
When we are ready to commit the URL, the precommitHandler supports a
"redirect" function that we can use to first redirect the navigation to
a new location immediately before committing it.
The commit operation is not synchronous because the API waits for all
precommitHandlers to resolve. This commit adds a small bit of handling
to account for this so that the Router's transition does not advance
to the next stage until the URL has been committed.
This commit ensures the Document used by `FakeNavigation` is the one
passed in the constructor rather than the global `document`, which may
be different.
Previously, object literal keys in the TCB did not have source spans attached. This made it difficult for the Language Service to distinguish between keys and values, leading to incorrect completion contexts and diagnostic locations.
This commit ensures that source spans are properly attached to the keys in the TCB.
Update fake navigation implementation to correctly handle traversals that are cancelled (e.g. by a precommit handler).
Ensure prospective index is calculated correctly so that subsequent traversals target the correct entry.
Add regression test for cancelled traversals.
The .docs-primary-btn hover state in dark mode had a contrast ratio of 2.18:1,
failing WCAG 2.1 SC 1.4.3. This change reuses the existing
--hot-pink-to-electric-violet-radial-gradient to achieve 4.5:1+ contrast.
This commit introduces a highly requested `trailingSlash` configuration option to the Angular Router, allowing developers to control how trailing slashes are handled in their applications. The options are:
- 'always': Enforces a trailing slash on all URLs.
- 'never': Removes trailing slashes from all URLs (default).
- 'preserve': Respects the presence or absence of a trailing slash as defined in the UrlTree.
This publishes the work that was done to integrate with the Navigation
API as an experimental router feature. Browser support is limited and in
active development. There are also known bugs in the browser implementations
and only Chromium browsers supported deferred URL updates with the
`precommitHandler`. Relates to #53321, which I would likely not mark as
completed until this is at least in dev preview, which likely won't
happen until it is widely available and potentially delayed until
`precommitHandler` is widely available as well.
The final form of this api might not even be a "router feature" in the end, but instead be
something similar to what other frameworks have to provide different
platform integrations (e.g. `provideNavigationRouter`). That would
support omitting the history-based integration from the bundle when only
the navigation integration is used. Alternatively, the current
`provideRouter` could require one of `withHistory` or `withPlatformNavigation`.
Remove the `customError` function and `CustomValidationError` type.
These were made obsolete by support for returning plain object literals
as custom errors.
This also catches few `field` properties that were missed in the
renaming to `fieldTree`.
Firefox-specific workaround: Firefox 144+ creates the `updateCallbackDone` promise
internally during error handling (e.g., duplicate view-transition-name), even before
the property is accessed. This can cause unhandled promise rejections to appear in
error tracking tools like Rollbar/Sentry. We must attach catch handlers to all three
promises immediately to prevent these unhandled rejections.
See: https://bugzilla.mozilla.org/show_bug.cgi?id=1999336 (if applicable)
Spec: https://drafts.csswg.org/css-view-transitions-1/#dom-viewtransition-updatecallbackdone
The `thisArg` in pure functions isn't used so we can drop it. We still need to keep it on the underlying implementation, because pipe instructions rely on it.
Fixes combobox dialog styles to ensure correct text color and contrast in dark theme.
This improves readability and visual consistency when using the docs in dark mode.
There was a bug introduced in #60875. While RouterLink doesn't
necessarily depend on Router state, its link can change when navigations
cause the `ActivatedRoute` paths to change. It is difficult to determine
which segments the link depends on. Luckily, the commit had flawed
logic:
```
!this.queryParamsHandling && !dependsOnRouterState(this.options?.defaultQueryParamsHandling);
```
The subscription gets created whenever `queryParamsHandling` was not
defined, or it was non-default. This is pretty much all scenarios since
nobody is likely to set it explicitly to the default value. In addition,
the `click` handler recomputes the tree because `urlTree` is a getter
that does the computation.
This commit effectively rolls back #60875
Removes the abort event listener once the debounce timeout completes.
This avoids lingering listeners, prevents potential memory leaks, and ensures
the abort logic runs at most once.
Previously there is no feedback when clicking this button in Angular DevTools itself, which can produce some confusion if the user does not have the browser console open as well, or if they accidentally turned on some filtering in the browser console.
Now Angular Devtools uses mat snack bar to inform the user that the task was successful
The animations code currently tracks which views have running leave animations by adding them to a `Set`. This can leak memory if we don't clean something up on time.
These changes switch to tracking the views by their ID which doesn't risk retaining the view.
Fixes#66255.
This change deprecates `Router.isActive` in favor of a function that
creates a computed which tracks whether a given url/UrlTree is active,
following changes in the router state.
`Router.isActive` contributes ~1333b to the bundle size, but is only
used by developers who use the API directly or who use
`RouterLinkActive`. It should not contribute to bundle sizes of
applications that do not use this functionality.
This will replace the `[field]` directive, since `[field]` is a very
generic name for signal forms to commandeer
refactor(forms): hook up `formField` directive in compiler
Hooks up the `formField` direcive to get the same treatment as the
`field` directive in the compiler.
apply updated formatting
This builds off of #66197 by retaining the original navigateEvent across redirects
so the NavigateEvent can more accurately track the lifecycle of a navigation,
which may span across several NavigationStart events due to redirects
The `precommitHandler` of the Navigation API unlocks some of the truly
powerful features for Routers like Angular's which defer the URL
updates. Without the `precommitHandler`, we cannot initiate a navigation
until we are ready to commit the URL because it causes the URL to update
immediately.
With `precommitHandler` support, we are able to create a `NavigateEvent`
_immediately_ on navigation, which allows the browser to show that a
navigation is happening with a loading indicator. Site visitors will
also have the ability to cancel the navigation with the "stop" button.
When we are ready to commit the URL, the precommitHandler supports a
"redirect" function that we can use to first redirect the navigation to
a new location immediately before committing it.
The commit operation is not synchronous because the API waits for all
precommitHandlers to resolve. This commit adds a small bit of handling
to account for this so that the Router's transition does not advance
to the next stage until the URL has been committed.
This commit updates the DOM security schema and sanitization logic to properly recognize and sanitize `href` and `xlink:href` attributes on SVG `<script>` elements.
The framework will now bind all field state properties to their
corresponding native properties (if any) on interop form controls (those
using `ControlValueAccessor`), excluding those handled explicitly by
`ControlValueAccessor` such as `disabled`.
Since the `Field` directive manages binding `FieldState` properties to
the underlying form control automatically, the type checker prohibits
explicit bindings to the same properties to avoid conflicts. This proved
problematic in cases where developers wanted to bind these properties to
the inputs of other directives on form controls. Now the framework will
bind the field state properties to all matching directive inputs on
native controls.
Fix#65617
Mutating the `UrlTree` that is returned by `createUrlTree` can cause the
input, which might even be an active route, to be mutated. This ensures
the `UrlSegment`s are recreated and do not mutate the input.
fixes#54624
We had `any` types for `LiteralArray.expressions`, `Chain.expressions`, `BindingPipe.args`, `LiteralPrimitive.value` and `LiteralMap.values`. These changes add proper types to them.
Add @see JSDoc tags to Signal Forms API functions and classes to link to the essentials guide and detailed documentation pages. This improves discoverability of Signal Forms documentation from the API reference.
Each tree-visualizer render cycle resets the snapped node in an effort to not end up with a non-existent snapped node. However, each render cycle doesn't constitute a completely different tree. This change retains the snapped node as long as it exists in the tree.
Introduce an equality function for transformed injector trees in order to omit redundant D3 tree visualization render cycles when the tree hasn't been changed.
Those rewrites focus on using Vitest instead of jasmine, drop usages of `fakeAsync`, present modern testing strategy that rely on `whenStable` more than explicit calls to `detectChanges`.
fixes#42748, #48510, #64962, #65987, #66029, #66150
The removeValidators and hasValidator methods both had identical "Reference to a ValidatorFn" section titles, causing duplicate entries in the API documentation table of contents.
0.0.0 is the version in the local repo when building from sources. Update the
extension to see this as some arbitrarily large version so it uses the most recent features
This updates the pre-v19 integration test to use the regular integration
project but pass a specific version and update file contents as
necessary to excersise the code path that uses the default standalone
value. This allows us to remove the old project from the workspace,
allowing the language service to use more recent versions when working
with the adev project, for example.
Adds new tree-shakeable runtime error codes to improve error reporting for
NgModule resolution issues (duplicate or missing IDs) and invalid ViewContainerRef
operations involving destroyed views.
This commit introduces a new feature to automatically destroy `EnvironmentInjector`s associated with routes that are no longer active or stored. This helps in managing memory by releasing resources held by unused injectors.
This commit introduces the infrastructure for embedding code examples within Angular packages, enabling them to be consumed by the Angular CLI's MCP server.
The `@angular/forms` package is the first to adopt this new feature. A new `ng_examples_db` Bazel rule is used to build a SQLite database from markdown files containing code examples. This database is then included in the published npm package.
The `package.json` for `@angular/forms` has been updated with an `angular.examples` field to allow tooling to discover and use the code examples.
Update the documentation example to import input instead of Input,
ensuring the code reflects the signal-based API and current Angular
recommendations.
To avoid manually adding classes like `.ng-valid`, `.ng-dirty` etc to every field, you can provide a global configuration using `provideSignalFormsConfig`.
PR Close#66111
Remove usages of `detectChanges` and rely on `whenStable`.
This commit also removed the usage of `provideZonelessChangeDetection` which is no longer necessary.
Sets up the compliance tests to target es2022 since that's the default in the CLI. Also updates all of the tests, primarily because the generated output for static properties has changed.
Fixes an issue where the copy-to-clipboard icon moves to a new line when heading text is long and wraps.
Applies improved text wrapping for headings to keep the icon visually aligned.
Fixes#66239
Back in #39323, I added a new `ThisReceiver` node to represent accesses done through `this` and I ended up making it inherit from `ImplicitReceiver`. The logic was that in most cases accessing through `this` was the same as the implicit access.
Over the years this has proven to not be a great idea, because no other AST nodes do this and one has to keep it in mind whenever dealing with `ImplicitReceiver`.
These changes remove the inheritance and update all of the usage sites accordingly.
PR #60455 improved error reporting for `@Component.imports` by scoping the diagnostic to an individual
element within the `imports` array, but this may introduce hard to track diagnostics when it ends
up being reported (far) away from the component itself.
This can be even more problematic when the diagnostic would end up being reported in a declaration file,
as happened in issue #65686; the declaration files of an imported library contained syntax that the
static interpreter did not support, hence the `@Component.imports` was rejected with a diagnostic reported
in the library's declaration file. This diagnostic isn't guaranteed to be reported (e.g. the CLI only
gathers Angular-specific diagnostics for Angular-compiled files, which excludes declaration files).
This commit changes the diagnostic location to ensure it is being reported within the `@Component.imports`
expression, in most cases retaining the desirable effect of #60455 while avoiding out-of-band diagnostics.
Improves the localization documentation by updating code highlight syntax issues
and removing outdated TODOs.
Additionally, the CDK examples have been updated to use the viewChild query signal API,
aligning the docs with current recommended patterns.
Since Manifest V3, the service worker (background) gets terminated after 30s of inactivity. This can break the initialization phase of DevTools or the BE-FE communication channel, if already initialized. To prevent that, we emit a heartbeat in a >30s interval.
* Allow custom controls to make `pending` a required input
* Refactor test for `pending` input to be consistent with other control
properties
* Test that `pending` inputs are reset when the field binding changes
* Refactor test for `disabledReasons` input to be consistent with other control
properties
* Test that `disabledReasons` inputs are reset when the field binding changes
* Allow custom controls to make `dirty` a required input
* Refactor test for `dirty` input to be consistent with other control
properties
* Test that `dirty` inputs are reset when the field binding changes
* Refactor test for `invalid` input to be consistent with other control
properties
* Test that `invalid` inputs are reset when the field binding changes
* Allow custom controls to make `hidden` a required input
* Refactor test for `hidden` input to be consistent with other control
properties
* Test that `hidden` inputs are reset when the field binding changes
* Recognize directives with non signal-based models as valid custom controls
* Relax type checker to allow non signal-based models
The `FormValueControl` and `FormCheckboxControl` interfaces still
require a `model()`-input, however, a custom control need not implement
either interface to be bound by the `Field` directive.
All of the following examples can be used to define a custom control:
```ts
// Preferred: model()
class MyFormControl implements FormValueControl<string> {
readonly value: model.required<string>();
}
// Supported: input() + output()
class MyFormControl {
readonly value: input.required<string>();
readonly valueChange: output<string>();
}
// Supported: @Input() + @Output()
class MyFormControl {
@Input({required: true}) value!: string;
@Output() valueChange: new EventEmitter<string>();
}
```
The latter two may still choose to implement `FormUiControl` for other
properties, but again it is not required.
Fix#65478
Change the order of precedence that `[field]` binds to from
1. Custom control (`FormValueControl`, `FormCheckboxControl`)
2. Interop control (`ControlValueAccessor`)
3. Native control (`<input>`, `<select>`, `<textarea>`)
to
1. Interop control (`ControlValueAccessor`)
2. Custom control (`FormValueControl`, `FormCheckboxControl`)
3. Native control (`<input>`, `<select>`, `<textarea>`)
This ensures that Reactive Forms controls authored to use
`ControlValueAccessor` work correctly with Signal Forms, even if they
happen to conform to the `FormValueControl` interface.
Adds new runtime sanitization error codes. Adds `ngDevMode` guards around
error message strings to ensure detailed diagnostics are included only
in development mode. This allows production builds to tree-shake verbose error descriptions, reducing bundle size.
This commit adds a utility method to debug why the application has not stabilized after
a set period of time (9 seconds, or `hydrationTimeout-1`).
fixes#52912
If the computed's `toString` is called and `node.value` is a Symbol, the browser will throw an exception `ERROR TypeError: Cannot convert a Symbol value to a string`
Symbols cannot be implicitly changed to strings. This change changes the conversion to be explicit by wrapping `node.value` with `String()`
This can be reproduced if you create a computed with `createComputed(computation, equal)` and call `toString()` while `node.value` is something like `Symbol(UNSET)`
This change omits treating `{{ }}` interpolation syntax as valid inside `@let` binding strings, preventing the interpolation curly braces from superseding the match of the surrounding binding expression and ensuring the highlighter reflects the correct semantics of `@let` bindings.
fixes#61643
The `RESPONSE_INIT` token previously used `ResponseInit`. However, `@types/node` (and `undici`) definitions for `ResponseInit` mark properties as `readonly`, which differs from the standard DOM `ResponseInit`.
This commit introduces a `ResponseInit` type that explicitly removes `readonly` modifiers to ensure compatibility and allow for mutable options. This type is now used by the `RESPONSE_INIT` token and is exported from `@angular/core`.
If the computed's `toString` is called and `node.value` is a Symbol, the browser will throw an exception `ERROR TypeError: Cannot convert a Symbol value to a string`
Symbols cannot be implicitly changed to strings. This change changes the conversion to be explicit by wrapping `node.value` with `String()`
This can be reproduced if you create a computed with `createComputed(computation, equal)` and call `toString()` while `node.value` is something like `Symbol(UNSET)`
Previously, Angular would switch from the macrotask to a microtask
scheduler _only_ when the scheduler was the trigger for the
synchronization. This microtask scheduling is to ensure patterns such as
`Promise.resolve().then(() => updateAppStateAgain())` _during_
synchronization are caught and synchronized again within the same event
loop (guaranteeing that they aren't split across multiple browser paints).
The microtask scheduler should be used after any tick, not just from
those than run within the scheduler to always account for the promises
within synchronization. This is encountered most frequently during
bootstrap, which triggers the tick directly.
In this change we exempt `TestBed.tick` and
`ComponentFixture.detectChanges` from this behavior. Doing so would affect
the timing of stability and tests are quite sensitive to this (e.g.
`fixture.whenStable`). It is somewhat unfortunate that we have "special" test-only
behavior. However, it is important to acknowledge that this only affects
the test-only APIs as well. Any code in the application under test that
triggers `ApplicationRef.tick` directly would still use the microtask
scheduling behavior.
fixes#65444
The` platformIsServer` flag is no longer referenced by the renderer and is effectively unused.
Removing it simplifies the implementation and avoids carrying redundant state.
The removed target was not used and was generating an empty output which causes `java.io.IOException: mandatory output packages/localize/init/localize_docs_html was not created`
Replaces custom docs-code components with fenced ```json``` blocks for
CLI builder examples, improving readability, consistency, and copy
support across the documentation.
Fixes#66060
- Stop indefinite `detectAngular` messages after the backend is installed.
- Do not attempt handshake with the BE (from content scripts) until it's installed.
Updates signal forms to pass the full `Field` directive to the class
configuration functions, rather than just the state. This allows
developers to take the element as well as the state into consideration
when deciding classes to apply.
Closes#65762
BREAKING CHANGE: The shape of `SignalFormsConfig.classes` has changed
Previously each function in the `classes` map took a `FieldState`. Now
it takes a `Field` directive.
For example if you previously had:
```
provideSignalFormsConfig({
classes: {
'my-valid': (state) => state.valid()
}
})
```
You would need to update to:
```
provideSignalFormsConfig({
classes: {
'my-valid': ({state}) => state().valid()
}
})
```
Currently circular references in user code manifest themselves with an error like `Cannot read properties of undefined (reading 'ɵcmp')`. This is a bit cryptic so these changes add an assertion mentioning circular references.
Relates to #65917.
Removed redundant `src/app/` prefixes from <docs-code> headers to make
examples cleaner and easier to read. The full path remains available via
the `path` attribute, so the shortened headers improve clarity without
losing context.
As written, the example rewrote the input value as the user edited it,
causing all kinds of confusing behavior which rendered the input nearly
unusable. While such implementations are possible, they require great
care to manage the cursor position while editing. For the sake of
brevity, this example now only updates the model on `blur` events; once
the user is done editing.
Prevents the deprecation warning that was incorrectly triggered when
defining an InjectionToken with only a `factory`, which correctly
defaults to the `root` scope.
Add aria-hidden="true" to decorative icon elements in the ARIA menu documentation
example to prevent screen readers from announcing both icon names and labels.
This improves the accessibility experience by ensuring only meaningful text
is announced to screen reader users.
Fixes: #65768
We recently allowed users to have a dynamic input `type` with signal forms, but the logic that infers the value type falls back to `string` even though in theory it can be any of the other types.
These changes expand the inferred type to `string | number | boolean | Date | null` if we detect a dynamic `type` binding.
Wrap operationsCounter method calls (recordCreate, recordDestroy, reset)
with ngDevMode guards to ensure they are tree-shaken in production builds.
This aligns with the existing pattern where operationsCounter is only
initialized in development mode, and eliminates unnecessary method call
overhead in production.
The optional chaining (?.) is retained as TypeScript doesn't narrow types
based on ngDevMode checks, but the entire expression will be removed during
production builds.
Ideally this tutorial would have used signals but didn't. That's a bigger change than
we are able to make right now and there are other things we would like
to update at the same time. This fix is a temporary patch to the
existing content until there is time to redo the tutorial and videos
entirely.
fixes#65863
users should use the entry from `upgrade/static`.
DEPRECATED: `VERSION` from `@angular/upgrade` is deprecated. Please use the entry from `@angular/upgrade/static` instead.
This shows a more prominent warning when multiple versions of Angular
are detected in the workspace and we are forced to choose one to use for
the language server. This also logs those versions with their locations
and directs the user to view the output panel.
fixes#65466
This PR makes a number of changes to the metadata API to address design
flaws in the previous API. Some of the changes include:
- Replaces the previous `MetadataKey` and `AggregateMetadataKey` with a
single unified `MetadataKey` that is used for all metadata.
- The new `MetadataKey` is only defined for fields that explicitly set
it in their schema logic
- All metadata now has reducer / aggregate behavior
- The new `MetadataKey` has an option to create a managed key which
wraps the result of its computed aggregate into some other structure
such as a `Resource` or `linkedSignal`
- There are now two APIs to create metadata keys
- `createMetadataKey` for pure computed metadata
- `createManagedMetadataKey` for metadata that manages its computation
internally
Add CSS rule to hide the last empty line in code blocks to prevent displaying
unnecessary empty lines when source files end with a newline character.
The empty line remains in the DOM for proper copy-paste functionality.
This change replaces all remaining occurrences of `typeof ngDevMode !== undefined`
with the correct `typeof ngDevMode !== 'undefined'` form. This aligns the codebase
with JavaScript typeof semantics and maintains consistency with other Angular code.
Replace the 'any' type with ClassDebugInfo for the debugInfo parameter in
stringifyTypeFromDebugInfo function. This removes the TODO comment that was
tracking the need for proper typing without creating circular dependencies.
The change improves type safety while avoiding circular imports since
stringify_utils.ts doesn't export anything that definition.ts imports.
Introduces the new complexity badge in recommendation cards.
The implementation utilizes CSS variables and `color-mix` to efficiently
handle color themes (Basic, Medium, Advanced) and dark mode support.
Closes#65378
Do not call `getSupportedApis` in a prod app since it throws an error due to the absence of `ng`, which prevents the FE from getting the `ngAvailability` message and, respectively, the proper info screen that DevTools cannot be used on a prod app.
This moved the `NG_FORCE_TTY` from individual `ng_web_app` rules to a global Bazel build flag as this is also needed for integration tests that under the hood run `ng serve` .
This commit updates the CONTRIBUTING.md file to provide clearer
guidelines for new contributors, including sections on code style,
testing, and the pull request process.
Adds the ability to hide the copy button on code snippets.
Updates documentation to use the new `hideCopy` option with the new
markdown code fence syntax.
Updates the linkedSignal documentation to specify that it updates its value when the source changes or when any signal referenced in the computation changes, ensuring the description accurately reflects its behavior.
Convert the `TreeVisualizer` to a signal, in the `TreeVisualizerComponent`, to ensure that the router tree render effect is always called; Use explicit `afterNextRender` phases.
There is a bug (?) in all browsers where the timing of the entry change
is delayed when a navigation is initiated by a click on a link via user
interaction. In this case, we need to ensure we do a 'push' navigation
rather than a 'replace'.
Programatically doing element.click() does not reproduce
this behavior, so adding a test for this is difficult (would require
webdriver).
Previously, navigating a `FieldTree` in signal forms involved reactive reads
of the value of the parent field(s), both directly and via `.childrenMap()`.
This meant that on _any_ change to the value of a field, reactive
notifications would trigger updates of computeds, reruns of effects, etc.
So for example, this effect would run on every change to the form:
```ts
const f = form(signal({data: 'abc', unrelated: 0}));
effect(() => {
// accessing f.data incurs a dependency on f().value() which changes
// on every change in the whole form
console.log(f.data().value());
});
```
This is deeply counterintuitive and troublesome when attempting to write
effect logic, and also results in `computed`s unnecessarily updating.
This change introduces the concept of a "reader" computed, which memoizes
the access of a field at a given key via the reactive graph. With this, the
same `f.data` access above now depends on the `data` reader in `f` only,
which is effectively a constant computed. As a result, the effect only
reruns on changes to `data`'s value, as intended.
PR Close#65802
Previously, several values were being passed into the creation of
`FieldNodeStructure`s that were only used in the creation of child nodes.
Separately, we also passed a `createChildNode` function which these values
were passed back into.
Instead, this moves the small bit of logic from structure.ts behind the
`createChildNode` callback, which reduces the passing of values back-and-
forth and gives `createChildNode` a much more suitable signature.
PR Close#65802
Move the instructions used to dynamically bind a `Field` directive to a
form control onto the `Field` itself. This way the instructions are only
retained if the app uses the `Field` directive.
PR Close#65599
When registering providers, the DI system assumes that `viewProviders` are registered before plain `providers`. This was reinforced by components always being first in the array of directive matches, only one component being allowed per node and the fact that only components can have `viewProviders`.
This breaks down if there are host directives with `providers` on the component, because they'll execute earlier, throwing off the order of operations.
These changes fix the issue by separating out the resolvers for `viewProviders` and plain `providers` and explicitly running the component's `viewProviders` resolver before any others. This also has the benefit of not attempting to resolve `viewProviders` for directives which are guaranteed not to have them.
Fixes#65724.
Previously, the XSRF interceptor only added the XSRF token to requests with relative URLs.
This commit updates the interceptor to also add the token to requests with absolute URLs, provided they match the current origin.
This commit adds a `.catch()` handler to `transition.finished` from `document.startViewTransition` to prevent unhandled promise rejections. The finished promise can reject with `TimeoutError` or `InvalidStateError` when transitions fail during or after the animation phase.
Based on the Blink source code, the `finished` promise can reject with:
* `TimeoutError`: "Transition was aborted because of timeout in DOM update"
* `InvalidStateError`: "Transition was aborted because of invalid state"
This may happen when the DOM update phase exceeds the browser's internal timeout threshold.
Previously we extracted the regions and only made the visible region visible on the page, but since there is not a need for the
non-visible code to be presented, we don't need to include it in the generated code snippets.
This adds additional tests following the initial implementation in #64737 that cover
the use-case of path parameters before and after the wildcard segment.
Unnecessarily aborting traversal navigations will break focus and scroll
restoration. We need to keep them open rather than replacing them with
an identical router-initiated navigation.
The end of the Router navigation is a block of synchronous logic that
can be compressed into a single operator rather than splitting it across
several, making it harder to step through. The only benefit from the
split is automatic unsubscribe/cancellation, which we can replicate
with an additional 'shouldContinue' check before proceeding.
Currently when the signal debug name transform sees something like `const foo = signal(0);`, it transforms the signal into `signal(0, {...(ngDevMode ? { debugName: 'foo' } : {})})`. After minification this becomes `signal(0, {})` which will allocate memory for the empty object literal.
These changes rework the logic to produce `signal(0, ...(ngDevMode ? [{ debugName: 'foo' }] : []))` which will be fully tree shaken away to `signal(0)`.
In the case that a component injector is destroyed before the animation
queue runs, the animation queue would fail to run because it was using a
destroyed injector. This commit changes the animation queue to run in the
context of the EnvironmentInjector, which is not destroyed until the app
is destroyed.
fixes: #65628
This is necessary to exclude a race condition where the MutationObserver initialized by the instruction fired before the inputs are binded.
fixes#65678
Move the header id tracking into the renderer context rather than a global state. Since the RendererContext is
initialized for each execution of the marked parser, we can store the context of which header ids have been seen within
a single page there which allows us to run these parse interactions in parallel.
Rather than manually calling the transformer we use for headings from within a render function, we now properly call into the Renderer to do them
via the tokens they are require instead. This is being done to allow us to have a per Renderer instance of state instead of a global state, which will
allow us to run marked async and hopefully speed up the pipeline
Replaced plain code-form usage of `inject` with a link to the
API docs (`/api/core/inject`) to improve navigation and
help readers access detailed reference information more easily.
Updated various template examples to use self-closing component tags
(e.g., `<my-comp />`) instead of the expanded form (`<my-comp></my-comp>`),
improving consistency across the documentation and aligning with current
Angular style recommendations.
Improves the symbol linking logic to handle Angular component selectors (e.g., ngCombobox). It attempts to convert Angular selector patterns to their corresponding class names, improving navigation to Angular API documentation.
Add Cmd+S/Ctrl+S keyboard shortcut to the adev code editor that prevents
the annoying browser save dialog from appearing. The shortcut is a no-op
since the editor already has auto-save functionality that persists changes
after 500ms of inactivity.
This commit implements a security fix to prevent XSS vulnerabilities where SVG animation elements (`<animate>`, `<set>`, etc.) could be used to modify the `href` or `xlink:href` attributes of other elements to `javascript:` URLs.
When signals throw errors on read, the devtools will show the same error message as the signal custom formatter.
We also don't log errors anymore to the console as those might be surprising to see as errors and are buggy behavior of the devtools.
Add test coverage for bundling dynamic component creation API like
`createComponent()` and `inputBinding()`. This will be used to test that
Signal Forms related features for #64632 can be tree-shaken when unused.
The XSRF interceptor previously failed to detect protocol-relative URLs (starting with `//`) as absolute URLs. This allowed requests to such URLs to include the XSRF token, potentially leaking it to external domains.
This change updates the interceptor to correctly identify protocol-relative URLs as absolute and exclude them from receiving the XSRF token.
Adds a mark for signal forms so we can track adoption. Also moves the call for `@let` into `declareLet` since we don't need it to fire as often as in `storeLet`.
This ensures that the right document is used and that `CSP_NONCE` can be used in `provideAppInitializer` and `provideEnvironmentInitializer`.
Closes#65624
Escape @-prefixed template control flow constructs during doc extraction so JSDoc parsing keeps description text intact. Add regression coverage for @for snippets.
Adds a DI configuration option for signal forms that allows the
developer to specify CSS classes that should be automatically added
by the `Field` directive based on the field's status.
The analytics tracking example contained unused and missing imports,
and it incorrectly referenced the page's URL.
This update fixes the imports and ensures the handler uses `event.url`,
allowing the example to work correctly.
We track all effects that are created for debugging purposes in the `resolverToEffects` map. This ends up leaking memory for effects registered on long-living resolvers (e.g. on the root injector), because they stay in the array, even if the effect itself has been destroyed.
These changes add a callback to clean up the references.
Fixes#65265.
Support binding `[field]` to directives that implement
`FormValueControl` or `FormCheckboxControl`.
The `[field]` binds to whichever directive (or component) matches first in the
event there are multiple implementations. We are considering whether to make
this an error state, which could be reported during type checking.
Closes#63910, Closes#64992
Migrate docs-alert to be inline instead of block, this ensures that the content is placed within a <p> tag as expected. This is important
for ensuring that the iconography is placed correctly within the wrapper div generated for the alert. Additionally, we refactor the matcher
code to be more efficient, running with fewer loops.
Currently when we detect a `field` binding on a native element, we treat it as a built-in native control. This might not be the case if it's a pre-existing `ControlValueAccessor` relying on the CVA interop.
These changes try to detect any CVA-like directive on the element and disable the additional type checking if there are any.
Fixes#65468.
the common-to-standalone migration only matched [ngTemplateOutlet] and
[ngComponentOutlet] bindings and missed their structural forms
(*ngTemplateOutlet and *ngComponentOutlet). This caused missing imports
when removing CommonModule. This change adds structural directive
patterns so the migration correctly identifies needed imports.
Ensures the example viewer header displays correctly by keeping the "Show code"
button aligned to the right and preventing metadata text from wrapping.
Improves layout consistency across documentation examples.
This commit updates the release script to support cherry-picking changelog updates to the main branch when releasing from a patch branch. It also introduces a marker in the changelog to separate releases and ensures the GitHub release uses the formatted changelog from disk.
Replace absolute URLs (https://angular.dev/...) with relative URLs
(/...) to prevent internal documentation links from being treated
as external links and opening in new tabs.
The example incorrectly persisted the error message after a successful
navigation retry because the stream only emitted NavigationError events.
This update removes the filter and returns an empty string for non-error
events, allowing the signal to clear the message on normal navigation.
Replaced <docs-code language="json" header=".postcssrc.json"> with fenced
JSON code blocks using ```json {header: '.postcssrc.json'} for improved
readability and consistency across documentation.
Rather than using multiple view modes for code examples, we can just treat the previous snippet mode as
as multifile mode that just only has one file in it.
Update the strictInputAccessModifiers documentation to clarify that:
- The flag applies to both @Input() decorator and input() signal-based inputs
- The checking only applies to inputs, not outputs
- format interface with fenced block
Fixes docs part of #65243
Updates syntax highlighting rules to properly handle inline templates defined within decorators, improving readability and consistency in code examples
Standalone components are now the default, so explicitly specifying
`standalone: true` is no longer required. Updated relevant documentation
examples to avoid redundant configuration and keep the guides concise.
Ignore files that fail fs.exists() rather than throw ENOENT. Some applications deliberately create "broken" symbolic links that are not relevant to compilation (e.g. emacs lock files that link to owner "user@host").
Adds the missing ARIA usage patterns and links to the relevant API reference
sections to improve accessibility guidance and ensure examples follow recommended
best practices.
Previously, the Algolia index name was hardcoded in the configuration, requiring manual updates for every new major release branch.
This commit automates the index name selection by deriving the version directly @angular/core. It dynamically assigns:
- `angular_next_dev` for pre-releases (`-next`, `-rc`) and local snapshots (`0.0.0`).
- `angular_vXX` (e.g., `angular_v19`) for stable releases.
This commit updates the Tailwind CSS integration guide (`adev/src/content/guide/tailwind.md`) to introduce `ng add tailwindcss` as the primary, automated method for integrating Tailwind CSS.
Although the prior commit has made more profiler events guaranteed symmetric
through the use of finally-blocks, there continue to be some situations
that could potentially result in asymmetric events, e.g. application
bootstrap doesn't guarantee symmetric events. This commit makes the profiler
lenient to these situations by unrolling the stack past the asymmetric event
data, eventually reaching the expected start event.
Profiler events are expected to be symmetric, yet in the case of errors this symmetry may break
if events aren't always kept in sync with their corresponding start event. This commit moves
various end events to be run from a finally-block, allowing them to notify the profiler even
when an error has occurred.
Fixes#62947
This commit adds the `translate="no"` attribute to the icon elements to ensure they are preserved in their original form and not modified by translation tools.
Closes#65406
This commit moves documentation for Zone.js-dependent testing utilities
(`waitForAsync`, `fakeAsync`, `tick`, `discardPeriodicTasks`, `flushMicrotasks`)
from `testing/utility-apis.md` to a new dedicated guide:
`testing/zone-js-testing-utilities.md`.
The `getControlDirective` is called multiple times, both at init and during each update run. Under the hood it performs a linear search for the `Field` directive.
We can speed this up by finding its index once and reusing it since the array of directive matches is static.
This commit introduces several improvements to the release process:
- Adds a clear warning and instructions to test the extension before merging the release PR
- Removes the explicit `vsce login` command.
Adds a parallel example for style bindings alongside the existing class binding example, demonstrating the preferred syntax of [style.property] and [style] over [ngStyle] directive.
Force adev and devapp to run in non-TTY mode so it doesn't create a prompt that can't be interacted with. This will initially have no effect,
but the fix is expected to land in CLI to make this work as expected in the next few days.
Show the signal graph button only when a signal-graph-eligible node from the directive explorer is selected; Fix client app error when a `defer` node is selected (related)
Following https://github.com/angular/angular/pull/64509 we started
choking on unbalanced closing parentheses in declaration blocks,
specifically in quoted background-image urls. This was reported in
https://github.com/angular/angular/issues/65137.
This occured because we previously (and now again) traverse the entire
declaration block when selecting for :host-context() selectors to shim.
This is an oddity of how we parse styles today, and is likely something
we'd want to remove if we parsed selectors properly.
This change adds a new flag to _splitOnTopLevelCommas which allows it to
continue past unbalanced closing parentheses in the declaration block,
returning _convertColonHostContext to its previous behavior while
keeping support for the extra nesting in :host-context().
We didn't get much report on the feature itself so we feel confident about promoting it to stable. In parallel we'll also land #62959 but one is not blocking the other.
fixes#64996
It can be useful for a developer to set `NaN` as the value for a number
input, as a way to say "clear the input". However, directly setting this
value to the `.valueAsNumber` causes a console warning. This PR fixes
the console warning by just doing `.value = ''` when we would otherwise
to `.valueAsNumber = NaN`
An early piece of feedback received regarding custom controls hosted on
native inputs was that they required a lot of boilerplate to bind
`FieldState` properties. Each property required an input to accept the
property, and a host binding to forward it to the native control.
Although the prior commit has made more profiler events guaranteed symmetric
through the use of finally-blocks, there continue to be some situations
that could potentially result in asymmetric events, e.g. application
bootstrap doesn't guarantee symmetric events. This commit makes the profiler
lenient to these situations by unrolling the stack past the asymmetric event
data, eventually reaching the expected start event.
Profiler events are expected to be symmetric, yet in the case of errors this symmetry may break
if events aren't always kept in sync with their corresponding start event. This commit moves
various end events to be run from a finally-block, allowing them to notify the profiler even
when an error has occurred.
Fixes#62947
Updated shell command examples to use fenced code blocks (```shell) instead of <docs-code> components, improving formatting consistency and aligning with current documentation standards.
Updated bash command examples to use fenced code blocks (```bash) instead of <docs-code> components, improving formatting consistency and aligning with current documentation standards.
- Removed unused code and imports
- Migrated to signal-based input() APIs
- Added readonly to Angular-initialized inputs and removed explicit type annotations
- Updated templates to use self-closing tags for consistency
* Apply any debounce rules to updates from interop controls (if configured).
* Add tests to ensure debouncing works for all control types (native, custom,
and interop).
Updated shell command examples to use fenced code blocks (```shell) instead of components, improving formatting consistency and aligning with current documentation standards.
- Replaced <a><button></button></a> with a proper <a> containing text and
aria-label to ensure links have discernible text.
- Added main tag in home page to provide
a consistent main landmark, improving accessibility for screen readers
and satisfying WCAG and Lighthouse requirements.
Fixes#65181.
Code blocks with `bash` language identifier were not rendering the `$`
prefix, while `shell` blocks did.
This ensures consistent command-line prompt rendering across both
`bash` and `shell` code blocks in the documentation.
This commit updates the testing documentation to include `bun` as a package manager option in all relevant code examples.
Additionally, it standardizes the presentation of package manager commands by:
- Consistently using a multi-tab format (`<docs-code-multifile>`).
- Enforcing a consistent order: `npm`, `yarn`, `pnpm`, `bun`.
These changes improve the user experience by providing clear instructions for multiple package managers and ensuring consistency across the testing guides.
This commit updates the unit testing, code coverage, and debugging guides to align with the Vitest test runner, which is now the default for new Angular CLI projects.
Key changes include:
- **Unit Testing Overview**: Revised to focus on Vitest, including details on DOM emulation (jsdom/happy-dom), browser testing setup, and custom Vitest configuration via `runnerConfig`. A prominent note links to the Karma-to-Vitest migration guide.
- **Code Coverage**: Updated to reflect Vitest-specific prerequisites (`@vitest/coverage-v8`), command-line flags, and `angular.json` configuration for coverage reporting and threshold enforcement.
- **Debugging**: Completely rewritten to provide instructions for debugging Vitest tests in both Node.js and browser environments using the `--debug` flag.
- **Navigation Reordering**: The 'Testing' section in `sub-navigation-data.ts` has been reordered to present a more logical educational flow, starting with core concepts and progressing to advanced topics and migration.
The example viewer has some `::ng-deep` styles that are used to reset global styles that leak into the live examples. It works by applying a style like `.docs-example-viewer-preview * {all: revert;}`.
The problem with this is that depending on when the first example is rendered, the styles will be lower or higher in the cascade, thus making the reset unreliable. Furthermore, it can affect structural styles from the CDK which intentionally have low specificity.
These changes move the resets into the global stylesheet to make them more predictable.
Removed redundant "src/app/" prefix from file headers (e.g.,
"src/app/open-close.component.ts" → "open-close.component.ts")
to make code examples cleaner and more focused.
This commit updates the elements and tailwind guides to use the standardized `docs-code-multifile` format for package manager commands. This change introduces `yarn`, `pnpm`, and `bun` alternatives to the existing `npm` commands, providing a consistent experience for users across different package managers.
If we're calling `min` on a path that's guaranteed to be `number` we
don't want to make the users validator function handle the `null` or
`string` cases.
This uncovered an issue in the `SchemaTreePath` type which needed to be
fixed by preventing the model type from being distributed over.
PR Close#65212
Relaxes the constraints on which paths can be used with the `min` &
`max` validation rules, since people may want to validate a
potentially-null number, or a numeric value represented as a string
PR Close#65212
Refactors the logic that disables the action button for lazy-loaded routes.
Now relies on the isLazy property from the route data instead of string comparisons on the component field.
The `type_check_block.ts` file was getting quite large and difficult to navigate. These changes split up the different pieces of functionality into separate files.
Test that a component with a bound `[field]` input is not treated as a
control, and that `fieldBinding` does not include the corresponding
`Field` instance.
This PR fixes a parameter mismatch in the `apiClientFactory` function documentation example. The factory was previously passing only http and `userService` to the ``ApiClient`` constructor, but the constructor actually requires http, `baseUrl`, and `rateLimitMs` as separate parameters.
Key Changes:
Extracts baseUrl and rateLimitMs from UserService using getter methods
Updates the ApiClient instantiation to pass all three required constructor parameters
Adds a comment explaining the assumption about UserService providing these values
The regex for caching generated files in firebase.json has been updated to
include lowercase letters and underscores in the 8-character hash. This
ensures that files with names like `chunk-CrXHmw_W.js` are correctly
cached.
Add an `AbortSignal` parameter to `Debouncer`. Implementations may
choose to accept this parameter to be informed when a debounced
operation is aborted. This may be useful for canceling pending timers or
avoiding unnecessary work.
Replaced the <docs-code> wrapper with a Markdown fenced code block to improve
copy/paste usability, syntax highlighting consistency, and alignment with current
documentation formatting standards.
Inspired by #65043
Replaced the <docs-code> wrapper with a Markdown fenced code block to improve
copy/paste usability, syntax highlighting consistency, and alignment with current
documentation formatting standards.
Inspired by angular#65043
This commit introduces a new guide for migrating existing Angular projects from Karma/Jasmine to Vitest.
The guide covers:
- Manual steps for installing dependencies and updating `angular.json`.
- Handling custom `karma.conf.js` configurations.
- Removing Karma-related files and packages.
- Configuring browser mode for Vitest.
- Details on the `refactor-jasmine-vitest` schematic for automated test refactoring.
The guide also clarifies that while Vitest is the default for new projects, migration for existing projects is experimental. It emphasizes reviewing changes and provides guidance on adapting custom Karma configurations to Vitest.
Renames `experimental-unit-test.md` to `migrating-to-vitest.md` and updates `sub-navigation-data.ts` accordingly.
Reworks the way we approach type checking of signal forms to be closer to the behavior at runtime. There are a couple of scenarios that we handle:
1. For native controls, we now produce simplified type checking code that looks as follows:
```
var t1 = null! as number | string; // Type depends on the input `type`.
t1 = someField().value();
```
2. For custom controls we generate bindings to the individual inputs, rather than checking conformance against `FormValueControl`/`FormCheckboxControl`. This is closer to the behavior at runtime and it allows us to handle generic directives properly.
This change configures pnpm to allow any version of `@angular/*` packages to satisfy peer dependencies. This is necessary because `@angular/*` packages are managed within this monorepo, and this rule prevents issues with peer dependency resolution when different versions might be present during development or testing.
Refactor .pnpmfile.cjs to use a Set for localAngularPackages for better performance.
Adjust typescript dependency handling in compiler-cli to correctly use devDependencies.
Promote rxjs and zone.js from peer dependencies to regular dependencies for local packages.
These changes streamline dependency resolution and align with pnpm's behavior for workspace dependencies.
:nth-child() (and its siblings) support complex expressions, e.g.
`:nth-child(2n of :is(.foo, .bar))`. Previously we'd choke because of
the `:is()`. Now, we reuse the `_parenSuffix` subexpression to match
nested parentheses the same way we do for :host() and :host-context().
Note that we only support 3 levels of nesting, so a selector like
`:nth-child(n of :is(:has(:not(.foo))))` will still break.
I'll say yet again that we really should add a proper parser so we stop
getting bug reports like this :)
Fixes#64913
Refactor to use async/await for clearer asynchronous operations and enhanced error handling.
Simplify resource caching and streamline the resolution of component templates and styles.
Update in the router to align with the new async resource resolution.
The `debounce()` rule allows developers to control when changes to a
form control are synchronized to the form model.
This feature necessitated some changes to `FieldState`:
* `controlValue` is a new signal property that represents the current
value of a form field as it appears in its corresponding control.
* `value` conceptually remains unchanged; however, its value may lag
behind that of `controlValue` if a `debounce()` rule is applied.
The `debounce()` rule essentially manages when changes to `controlValue` are
synchronized to `value`. The intent is that an expensive or slow
validation rule can react to the debounced `value`, rather than a more
frequently changing `controlValue`.
Directly updating `value` immediately updates `controlValue`, and cancels any
pending debounced updates.
When multiple `debounce()` rules are applied to the same field, the last
currently active rule is used to debounce an update. These rules are
applied to child fields as well, unless they override them with their
own rule.
This removes the need to specify type arguments for
`reducedMetadataKey()` when the value returned from the `getIntial`
callback is a subtype of the accumulated type.
The flag `skipFormatting` got renamed to `ngSkipFormatting` during review of https://github.com/angular/angular/pull/64000, but a couple usages got missed, causing some unfortunate UI recursion.
The `fullInheritane` flag from the metadata and the `CopyDefinitionFeature` that it controls appear to no longer be used since `fullInheritance` is always false. The feature appears to have been there to support ngcc which was removed some time ago.
This is necessary to use SSR safely with `createApplication` and avoid constraining users to `bootstrapApplication`. It is one more step towards feature parity between `createApplication` and `bootstrapApplication`.
Prior to this commit, attempting to resolve a `ChangeDetectorRef` after views or app have been destroyed would result in an error. In this commit, we clean up listeners once the view is destroyed, before the placeholder loads or fails to load.
Wraps InjectionToken names with `typeof ngDevMode !== 'undefined' && ngDevMode`
checks to enable tree-shaking of descriptive token names in production builds.
This ensures debug-only strings are removed from production bundles, reducing size.
Also removes unused imports found during refactor.
Annotate the `new Version(...)` call with `/* @__PURE__ */` to signal to optimizers that the constructor is side-effect free.
Without this hint, bundlers such as Terser or ESBuild may conservatively retain the `VERSION` instantiation even when unused. With the annotation, the constant can be tree-shaken away in production builds if not referenced, reducing bundle size.
Replaces the <docs-code> component with standard markdown code fences in the service worker documentation. This improves the readability and maintainability of the documentation.
Replace URL-based active route detection with direct traversal of the ActivatedRoute tree.
This solution is more reliable than the previous approach because it directly compares router tree configuration objects against the active router instance state with router.routerState.
Replace `@Optional() link: RouterLink` constructor parameter with
`link = inject(RouterLink, {optional: true})` to enable tree-shaking
of the `Optional` decorator and its factory scaffolding.
Bundle size reduction: `Optional` is a runtime value created by
`makeParamDecorator()`. Even in production builds, ESBuild and other
bundlers must keep their factory code because it is referenced via
`Optional`. With `inject()`, this class is no longer referenced,
allowing it and the `makeParamDecorator` scaffolding to be tree-shaken
when unused elsewhere.
Note: This updates the constructor signature but should not be
considered a breaking change. Angular's official guidance is that
directives, components, and pipes should be instantiated by the
framework, not by user code. Directly calling `new RouterLinkActive(...)`
is an unsupported pattern that goes against Angular's design principles.
This adds handling of the abort event on the signal of the
`NavigateEvent`, allowing us to cancel the Router's ongoing navigation
transition when its related navigation was aborted.
Added `language="shell"` to installation command examples to display
the shell prompt `$` icon consistently across npm, pnpm, yarn, and bun
code blocks.
Removed redundant "src/app/" prefix from file headers (e.g.,
"src/app/open-close.component.ts" → "open-close.component.ts")
to make code examples cleaner and more focused.
I took a quick look at my recent changes to see if I had inadvertently
fixed this bug, but I couldn't seem to reproduce it even before my
changes. Seems like it's working, though.
Closes#58436
`new RegExp()` with computed strings can't be analyzed statically. The bundler can't prove the template string evaluation has no side effects; as thus this expression is considered a side-effect.
Remove an unnecessary TODO comment. The native `<select>` tracks its
`value` by keeping track of the selected `<option>`. Thus if the value
was set *before* the corresponding option is created, the `<select>`
will ignore it, but the framework doesn't know that and will cache the
bound value anyways. Therefore, checking if the value changed since it
was last bound when the mutation that creates the selected `<option>`
occurs would in fact prevent a needed update, leaving the `<select>` and
field values out of sync.
Furthermore, we know the control type is a native `<select>` element, so
we can update its value directly instead of going through
`updateNativeControl()` which would perform a redundant input type
check.
\#64806 drops the `href` part of `SamePageMessageBus` URIs. This creates a conflict, which breaks the directive explorer, between the prod Devtools (i.e. the extension) and the dev Devtools app due to the backend URIs using the same string for both prod and dev.
This adds a handler to the `NavigationInterceptOptions` when we are
intercepting a `NavigateEvent`. This means that the scroll and focus
restoration will be delayed until the handler promise resolves. It also
means that we can provide better indication of an ongoing navigation
event.
https://github.com/angular/angular/pull/64590 implemented change
detection for field bindings, but only for those bound to native or
custom form controls. This change extends that optimization to apply to
field bindings on interoperable controls built using Reactive Forms as well.
Currently the logic for detecting `Field` directives only works if it's imported from `@angular/forms/signals` which doesn't cover our own tests.
These changes make the check more robust.
Adds some logic that won't report the `value` or `checked` inputs as missing when the `Field` directive is present since it will bind to the inputs implicitly.
Switches to checking against `FormValueControl<any>` instead of `FormValueControl<unknown>` when checking whether custom controls conform to the interface.
Fixes#64946.
This addresses a potential memory leak in plugin-factory.ts.
The require call inside the create function reloads the entire language
service module for every new project, which is inefficient and could be a cause of the memory leak during branch
switching. This ensures the module is loaded only once and the same
instance is shared across all projects.
The file is no longer included in the VSCode extension package.
This change updates the golden file and the file to reflect this exclusion.
PR Close#64991
This commit introduces a golden file test to verify the contents of the VSCode extension package.
The test ensures that the list of files included in the extension package remains consistent.
A new Bazel rule is added to generate the list of files, and is used to compare it against the golden file. A helper script is also added to facilitate the generation of the golden file.
PR Close#64991
This change adds support for commas in :host() arguments (e.g.
`:host(:not(.foo, .bar))` as well as in nested parens when the argument
is applied without parens (e.g. `:host:not(:has(.foo, .bar))`).
Previously these selectors would receive an extra `[nghost]` attr, e.g.
`[nghost]:not(.foo, [nghost].bar)`.
I didn't file a bug for this one, but it's also blocking on an internal
LSC. Like the other CSS changes, I'll run a TGP to confirm this isn't
breaking.
Replaced multiple component tags such as `<example></example>` with
self-closing syntax (`<example />`) across documentation examples.
This improves readability and aligns with the current Angular
style conventions.
The current section `Services with dependencies` within the testing services
guide is non-functional and has been removed. The example service is using
`inject` but the test code is using constructor-based injection. The further
sections discuss the use of TestBed to adjust providers which better handles
these cases.
This makes it easier to debug in production by including sourcemaps unconditionally. It also processes vendor sourcemaps (which includes Angular FW in this setup) and should improve debuggability of FW code by including sourcemap coverage.
This commit updates the testing documentation to reflect the introduction of Vitest as the default test runner, while ensuring Karma testing instructions are still available.
Key changes include:
- Adding a new guide for "Testing with Karma" (`guide/testing/karma.md`).
- Updating the "Code Coverage" guide (`guide/testing/code-coverage.md`) to use `angular.json` for coverage enforcement and referencing Vitest documentation.
- Modifying the "Testing Overview" guide (`guide/testing/overview.md`) to introduce Vitest as the default, update `ng test` output examples, and link to the new Karma guide.
- Updating navigation data to include the new Karma testing guide.
By intersecting with `object` instead of `unknown` in the primitive and
`FormControl` cases, we get TypeScript to show nicer type errors that
mention `FieldTree<...>` insetad of `() => FieldState<...>`
* Define `ResourceSnapshot<T>` as a type union of possible states for a
`Resource<T>`.
* Add `Resource.snapshot()` to convert a `Resource` to a signal of its
snapshot.
* Add `resourceFromSnapshots` to convert a reactive snapshot back into a
`Resource`.
By converting resources from/to `Signal<ResourceSnapshot>`s, full
composition of resources is now possible on top of signal composition APIs
like `computed` and `linkedSignal`.
For example, a common feature request is to have a `Resource` which retains
its value when its reactive source (params) changes. This can now be built
as a utility, leveraging `linkedSignal`'s previous value capability:
```ts
function withPreviousValue<T>(input: Resource<T>): Resource<T> {
const derived = linkedSignal({
source: input.snapshot,
computation: (snap, previous) => {
if (snap.status === 'loading' && previous?.value) {
// When the input resource enters loading state, we keep the value
// from its previous state, if any.
return {status: 'loading', value: previous.value.value};
}
// Otherwise we simply forward the state of the input resource.
return snap;
},
});
return resourceFromSnapshots(derived);
}
// In application code:
userId = input.required<number>();
user = withPreviousValue(httpResource(() => `/user/{this.userId()}`));
// if `userId()` switches, `user.value()` will keep the old value until
// the new one is ready!
```
Currently we maintain the pathKeys internally, but do not expose them
through the `FieldContext`, this PR updates the `FieldContext` to expose
this property.
Previously we supported one level of nested parentheses inside of a
`:host()` selector, e.g. `:host(:not(p))`. This caused a breakage in g3
when I migrated a selector from `:host:not(:has(p))` to
`:host(:not(:has(p)))`. This change adds support for just one more level
of nesting.
It'd be nice to move everything to a real CSS parser (or even update it
to count parentheses like I did with :host-context()), but I wasn't able
to get that to work in ~20 minutes and I'm focusing on other things at
the moment.
This change punts the problem until somebody tries to use just one more
level of nesting in a selector.
Fixes#64830
This commit improves the release process for the vscode-ng-language-service by adding automated changelog generation and updating the package.json version.
This further builds out the Router integration with the platform
Navigation API. Key features in this state include:
* History restoration via direct platform APIs rather than markers left on
`history.state`. This means more guaranteed correctness and less
internal code to compute traversal restorations.
* Ability to observe navigations triggered outside the Router APIs.
Practically speaking, this means some navigations can be performed
through the platform rather than requiring `Router.navigate`. Note
that because the `NavigateEvent` is never intercepted at this point of
the implementation, regular anchor tags cannot be used because they
will still trigger a popstate navigation.
This implementation does _not_ intercept the `NavigateEvent` but future
iterations should. By omitting the interception, we are missing out on
features such as:
* Platform-supported scroll and focus reset
* Holding the navigate event open for the duration of the router
navigation, allowing for a visual loading indicator in the browser
* Support for intercepting navigations from regular anchor tags (e.g.
not `RouterLink`s) and converting those to SPA navigations.
PR Close#64905
When we set the `value` on a `<select>` element we're really just
setting the selected `<option>`. It treats the selected option as the
source of truth, rather than the actual value. This means that if
options are added or removed or their value changes, the `<select>` may
wind up with a different `value` than what's in our model.
This PR resolves this issue by adding a `MutationObserver` to the select
that is used to resync its value to the model whenever the options may
have changed.
Update the diff relase package script to properly recursively apply the chmod and support a flag for writing the
diff to a file instead of only logging it to the console.
This script orchestrates the release process for the Angular Language Service VSCode extension. It handles versioning, changelog generation, building, and publishing the extension.
Long code blocks overflow the headings on narrow screen (like mobiles), this messes up the global layout of the page. With the ellipsis with fix that.
fixes#64845
We accounted for skipping leave animations during moves, but not swaps.
This accounts for the swap cases and updates how we deal with swaps and
moves. Now we always queue animations and then essentially dequeue them
if we attach them back in the same render pass.
fixes: #64818fixes: #64730
For each field state property, check if it has changed since the last
time it was checked before writing it the corresponding form control
property.
The `pattern` and `required` properties of the field state now return a
default value rather than `undefined` if not defined by metadata.
In https://github.com/angular/angular/pull/64745, a fix was introduced for templates referenced with a trailing semicolon. However, templates are still incorrectly removed when there are whitespace characters before the template name.
This commit updates the control flow migration logic to ensure templates referenced with preceding whitespace are not removed.
Fixes#64854
We automatically generate the sitemap for the angular.dev deployment and include it in the assets pushed
to firebase.
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
Prior to the change to support defining required segments before and after the wildcard, the meaning of the wildcard
path was '0 or more' so path: foo with a child of ** will still match the ** route when the URL is only 'foo'.
If developers want to _require_ something, they can still use path: foo/:anyRequired/**/bar
Fix the URIs by stripping any query parameters and/or fragments from the compound URLs, since they may prevent the extension from successfully establishing a handshake in some instances.
Removes redundant `standalone: true` declarations from code examples.
Standalone components are now the default in Angular, so the flag is
no longer necessary in documentation snippets.
Adds a new landing page for developer events, starting with the v21 page. It also includes an ICS file link for calendar invites. Also updated the tests for the docs-pill to support two new attributes so developers can add the event to their calendars.
Currently when a required input is missing, we produce a diagnostic on the entire start tag. This can be really noisy if there are already some attributes on the element.
This change switch to only highlighting the tag name instead.
Consolidate separate scripts for updating Aria, CDK, and CLI documentation into a single, unified script. This change streamlines the documentation update process and improves maintainability. The workflow file has been updated to use the new consolidated script.
PR Close#64792
Fixed the import error message in the editor section. The build would complete successfully, but an error message would be incorrectly reported.
PR Close#64701
When a firebase command line execution fails, the github action should be shown as failing instead of continuing to attempt to run and resulting in
an exit code of 0 and success
PR Close#64801
this adds support for both leading and trailing segments before/after wildcard
route. Exposig the segments in a new _splat param would require a
breaking change to the return value of the matchers.
fixes https://github.com/angular/angular/issues/60821
PR Close#64737
isValidUserId = true is logically wrong to use to disable the Save button.
So is logically wrong to use isValidUserId = false to enable the Save button.
Also the default state of this button should be most likely disabled, if we are bothering to check, so the initial value of the signal should most likely be set to true.
To resolve these 2 issues, I propose to use:
- isInValidUserId instead of isValidUserId and:
- isInValidUserId = signal(true); // isValidUserId = signal(false);
After these 2 changes the snippet should make logical sense.
Interfaces with no extends clause were incorrectly rendered with a trailing extends keyword followed by nothing, resulting in invalid TypeScript syntax
The DocViewer component's getCodeSnippetsFromMultifileWrapper method was not
extracting the header attribute from nested <docs-code> elements, causing the
ExampleViewer to fall back to displaying file paths instead of custom headers
in tab labels.
This change adds title extraction from the header attribute when processing
multifile code snippets, ensuring that custom headers are properly displayed
in the code viewer tabs.
Fixes#64760
This commit fixes a behavior where under certain conditions, the migration script ignored
a template reference with a trailing semicolon and incorrectly removed the definition
of a referenced template.
Fixes#64741
In some cases the logic order was not preserved properly when using `apply`. In particular this occurs when some logic is registered on a child of the root, followed by an apply to the root, followed by further logic registered on a child. In this case the final registered logic wound up running before the applied logic.
This happened because `FieldPathNode` for a child path was caching its `LogicNodeBuilder` at creation time. This meant that if the parent's `LogicNodeBuilder` changed (e.g., due to an `apply` call), the child would still be using the old one.
This commit fixes the issue by dynamically resolving the `LogicNodeBuilder` for a child path whenever it is accessed.
This commit changes arrays in a parent array to be tracked the same way
as primitive values like strings and numbers. This is necessary because
the tracking key symbol used to maintain identity for objects in an
array does not survive the array spread operation:
```
return {...oldValue} // tracking symbol preserved ✅
return [...oldValue] // tracking symbol lost ❌
```
- Deletes the old Karma configuration and test entry point.
- Updates `angular.json` to use the `@angular/build` builders.
- Adjusts test files to align with the new setup.
This change updates the rollup configuration for the core schematics to exclude all `@angular/*` packages from the bundle. This is possible following https://github.com/angular/angular/pull/64703
This significantly reduces the size of the `@angular/core` schematics bundle, resulting in a size reduction to 5.8mb.
The navigation list component was using `routerLinkActive` with
`{ exact: true }`, which required an exact URL match including query
parameters. When visiting `/update-guide?v=19.0-20.0&l=1`, the link
`/update-guide` didn't match, so the active class wasn't applied.
Updated `routerLinkActiveOptions` to ignore query parameters while
maintaining exact path matching so the navigation item stays highlighted
when interacting with the update guide form.
Changed terminal output code block in installation.md from shell
language to plain text to prevent rendering of shell prompt ($).
The block displays read-only log output that users should not
execute as commands.
this adds support for both leading and trailing segments before/after wildcard
route. Exposig the segments in a new _splat param would require a
breaking change to the return value of the matchers.
fixes https://github.com/angular/angular/issues/60821
If a component template contains an icu expression it is being retained until the next change detection cycle for that template. This results in a net retention of only ever a single copy of the given lView but that creates an opportunity for compounding leaks.
Change the icu i18n_icu_container_visitor to free the IcuIteratorState retained lView when the stack is empty so that garbage collection can occur when the view is discarded.
Previously we supported one level of nested pseudo-element selectors
inside :host-context(), e.g. :host-context(:is(.foo, .bar)). This was
based on a regex-based approach. We could support deeper levels of
nesting by updating the regex, but using a regex approach prohibits us
from supporting arbitrary nesting.
Rather than just adding one more level to the existing expression, I've
added a new generator function which splits selectors on commas in a
parenthesis-aware way. This allows us to support arbitrary nesting.
It's likely we'll want to reuse this in other places where we're not as
careful today. We'll probably do this on a request-based basis, though.
Fixes#59176
This commit moves the best-practices.md file from adev/src/context to packages/core/resources. The BUILD.bazel files and other configuration files have been updated to reflect this change.
The ExampleViewer component was extracting only innerHTML from code
blocks in multifile examples, which lost the shell class applied by
the formatCode function. This caused the $ prompt to not appear for
shell commands in multifile blocks even when language="shell" was set.
Modified the Snippet interface to track shell language state and
updated getCodeSnippetsFromMultifileWrapper and getStandaloneCodeSnippet
methods to preserve the shell class. Updated example-viewer template
to conditionally apply the shell class to the code wrapper element.
Fixes inconsistency between standalone and multifile shell code blocks.
This commit adds the ability to control the behavior of scrolling in the
`NavigationBehaviorOptions`. The options directly correlate with the
intercept options of the Navigation API `NavigateEvent#intercept`:
https://developer.mozilla.org/en-US/docs/Web/API/NavigateEvent/intercept#scroll
While we do not currently have an integration with the navigation API,
this change would be necessary to provide the ability to configure that behavior
if/when we do. In the meantime, this option is also useful to control
the behavior of scrolling when the in memory scroller is enabled.
resolves#26744
Previously we would look in the DI tree for a token named 'Router' and resolve its value.
Now we use the already existing getRouterInstance, which depends on ng global debug APIs to get the router instance of an application.
Previously '/' could cause confusion with other routes that use a path here. I think because this node is unique in that it is not actually a "Route" we should make it clear with the label that is simply the App Root.
This adds a (private) provider for integrating with the browser Navigation API.
This provider ensures that interactions with the `Location` service
use the underlying platform navigation rather than the history and
location APIs.
This commit moves the best-practices.md file from adev/src/context to packages/core/resources. The BUILD.bazel files and other configuration files have been updated to reflect this change.
This commit enables the 'auto' merge strategy for pull requests.
This strategy automatically determines the best merge method based on the
pull request's commits.
The auto merge strategy can:
- Delegate to the autosquash merge strategy if the PR has fixup/squash
commits against multiple normal commits.
- Squash commits if the PR has only one normal commit and some
fixup/squash commits.
- Rebase commits if the PR has no fixup/squash commits.
This improves the developer experience by automating the merge process. A
key benefit is that PRs that can be cleanly rebased will now appear as
'merged' in GitHub's UI, providing a clearer history than the previous
'unmerged' status that could occur with squashing.
Additionally, `dev-infra` and `bazel` are removed from the exempted scopes
for target labels as they are no longer necessary.
PR Close#64624
The directive implemnetation might set CVA values during the template evaluation. Since the template is a reactive context we need to untrack when setting the CVA values to prevent writing to signals in a reactive context.
fixes#64614
PR Close#64618
This cleans up the navigation transitions a bit by removing some
unnecessary operators. Combining operators makes debugging easier by
making it possible to step through the code.
PR Close#64480
When working with a proxy object such as signal forms' `Field`,
accessing the `lenght` or `Symbol.iterator` may trgger a reactive read.
This change ensures that `@for` properly captrues this before clearing
the active consumer.
PR Close#64113
Renames the field state related to metadata to reflect the new
"metadata" name. In particular:
- `property(...)` is renamed to `metadata(...)`
- `hasProperty(...)` is renamed to `hasMetadata(...)`
PR Close#64603
Renames logic functions related to metadata to align with the new
"metadata" name. Notably:
- `property(...)` => `metadata(...)`
- `aggregateProperty(...)` => `aggregateMetadata(...)`
PR Close#64603
These have been renamed to `MetadataKey` and `AggregateMetadataKey`
respectively. The team consensus is that the term "property" is so
overloaded that it makes the topic difficult to explain & discuss, hence
the rename.
PR Close#64603
Previously, the `DefaultUrlSerializer` would incorrectly parse URLs with a parenthesized outlet that did not have a name, such as `/(left)`. This would result in an `undefined` outlet name in the serialized URL.
This commit fixes the issue by ensuring that parenthesized outlets without a name are treated as primary outlets.
fixes#58516. Based on the description, either the URL was constructed
manually or by custom serializer.
PR Close#64507
test functions
This improves the fakeAsync error message when importing it, describe,
etc from jest
We will not be further expanding the ZoneJS patches to support
additional use-cases.
fixes#47603
PR Close#64497
We were clearing duplicate nodes when `animate.enter` fired fast, but not when solely `animate.leave` is fired and rapid toggles occur. This ensures that the `cancelLeavingNodes` function is called in all cases instead of just enter animations.
fixes: #64581
PR Close#64592
This adds a new compilation error if someone attempts to put legacy animations and `animate.enter` or `animate.leave` in the same component.
PR Close#64569
Fixes a bug in the missingStructuralDirective diagnostic where structural directives with missing imports were not reported when the element using the structural directive contained other directives
Fixes#64467
co-authored-by: Matt Lewis <npm@mattlewis.me>
PR Close#64579
The `requireSynchronousElementRemoval` property was not being passed in all the locations it was needed. This was preventing leave animation timing from behaving properly in some cases.
fixes: #64525
PR Close#64565
Prior to this change, `FieldState` defined a signal for each built-in
property. This unfortunately meant that the `Field` directive had no way
of knowing which property had actually been defined in the schema, and
would thus attempt to propagate them all to the bound form control. This
meant that the default values of these signals would override the
default or template defined values of these control properties.
Now these properties are `undefined` by default, and only initialized if
defined in the schema. Thus the `Field` directive will not attempt to
bind any properties that aren't explicitly managed by the schema.
PR Close#64446
Note that unlike the other built-in properties, `pattern` is not
propagated to native controls so the lack of symmetry with other
property tests is intentional.
PR Close#64446
In certain scenarios `Element.animate` fails, manifesting in an exception (Firefox)
or a null return value (Chromium). The null value is not conform WebIDL but handled
gracefully in this commit regardless.
Closes#64486
PR Close#64506
Updates the selector for `RouterOutlet` to allow for it to be set on an `ng-container`. This allows it to not render the host node which can affect the layout.
Fixes#64553.
PR Close#64562
Previously, query parameters passed to `router.createUrlTree` were simply converted to strings. This meant that any custom serialization logic in a custom `UrlSerializer` was not applied. This could lead to inconsistencies between navigations triggered from the URL bar (which are parsed by the serializer) and navigations triggered programmatically.
This change ensures that query parameters are normalized using the provided `UrlSerializer`. The values are serialized and then parsed to ensure they are in the same format as if they had come from a URL. This allows custom serializers to handle complex objects in query parameters consistently.
Fixes https://github.com/angular/angular/issues/47307
PR Close#64449
Currently it's easy to make a mistake when accessing properties on `SimpleChanges`, because the keys aren't typed. These changes add an optional generic to the interface so that users can get a compilation error if they make a typo.
A few things to note:
1. The generic argument is optional and we revert to the old behavior if one isn't passed for backwards compatibility.
2. All of the keys are optional, because they aren't guaranteed to be present for any `ngOnChanges` invocation.
3. We unwrap the values of input signals to match the behavior at runtime.
Fixes#17560.
PR Close#64535
This change omits the injection of the template syntaxes inside any
existing block scope. The injection is not needed because the template
and expression scopes are included explicitly as patterns where
appropriate under the template-blocks definitions.
This change prevents the interpolation curly braces from superseding the
match for the open curly of the block body. This issue also happens with
ICUs (#62697), but those do not have any named scopes to exclude as of
today.
fixes https://github.com/angular/vscode-ng-language-service/issues/1991
PR Close#64392
This further simplifies the `loadComponent` logic in the Router by using
the promise returned from the config loader directly instead of
converting it to an observable.
PR Close#64450
These methods are only intended to be used internally within framework
instructions. Prefix them with `ɵ` to indicate that they are
framework-private and should not be called from user code.
PR Close#64471
Add support for interoperability between signal forms and reactive forms that
commit effccffde0 had removed.
A signal forms field can once again be bound to any element or component with a
`ControlValueAccessor`.
PR Close#64471
From my investigation what I know for sure:
- when the graph pans or zooms it updates the transform property on the g element, which in turn causes the browser to repaint the visible space in the g element
- stroke-dasharray is the cause of major performance issues in large graphs.
What I suspect:
- When the g element repaints, it also has to repaint all of the child svg elements. When the dashed line path svgs repaint, the stroke-dasharray calculation is not GPU accelerated, but instead occurs on the CPU, causing extreme lag whenever the svg graph is panned or zoomed.
Temporary solution: remove this dashed edge functionality. We can investigate alternatives for communicated that a path is lazy loaded.
Future long term solution: migrate to canvas based graph renderer for router tree and injector graph.
PR Close#64532
Fixes a bug in the missingStructuralDirective diagnostic where structural directives with missing imports were not reported when the element using the structural directive contained other directives
Fixes#64467
PR Close#64470
The existing implementation of `PlatformLocation` uses a custom URL parsing mechanism that can be brittle and doesn't properly update the `href` property. This change refactors the URL parsing to use the native `URL` constructor, providing more robust and accurate parsing of URLs, which also correctly updates the `href` property.
The tests for `PlatformLocation` have also been moved to a dedicated file to improve organization and clarity.
PR Close#64494
This further simplifies the `loadComponent` logic in the Router by using
the promise returned from the config loader directly instead of
converting it to an observable.
PR Close#64450
Previously, query parameters passed to `router.createUrlTree` were simply converted to strings. This meant that any custom serialization logic in a custom `UrlSerializer` was not applied. This could lead to inconsistencies between navigations triggered from the URL bar (which are parsed by the serializer) and navigations triggered programmatically.
This change ensures that query parameters are normalized using the provided `UrlSerializer`. The values are serialized and then parsed to ensure they are in the same format as if they had come from a URL. This allows custom serializers to handle complex objects in query parameters consistently.
Fixes https://github.com/angular/angular/issues/47307
PR Close#64449
Ensures the repository reference uses the correct name to prevent confusion and maintain consistency across generated documentation entries.
PR Close#64487
Removes a number of commit message scopes that are no longer in use.
- `bazel`: Now part of `dev-infra`
- `changelog`: The changelog is autogenerated and doesn't have dedicated commits.
- `packaging`: Is handled by `dev-infra` as well.
PR Close#64492
In some rare cases, it seems the animation queue disappears despite being afterEveryRender. This updates the animation scheduler to be afterNextRender instead and only schedules it when we need to.
fixes: #64423
PR Close#64441
Improves user experience by displaying UI notifications when attempting to view source for unsupported routes, replacing developer-only console warnings with visible snackbars
PR Close#64458
Introduces a migration that replaces CommonModule usage with individual imports from @angular/common, aligning with Angular's standalone component approach and improving module import clarity
PR Close#64138
This fixes a performance regression from #63754, which is almost a revert of the
prior performance fix in #57291; the latter was provided as quick fix to address
the severe performance overhead this extended diagnostic used to have, with #57337
as follow-up change to address the false negatives that were introduced in #57291.
That follow-up never landed, though, so this commit is re-applying the changes
from #57337 to fix the performance regression.
Fixes#64403
PR Close#64410
When adding and removing items in a `@for` loop, the `animate.leave` event binding instruction was not updated to use the same logic as the class function when the animation queue was added. We were not returning the correct signature for the `animate.leave` function, which caused the animation to not trigger correctly. This updates the event binding instruction to use the same logic as the class function when adding the animation to the queue.
fixes: #64336
PR Close#64413
This replaces the error we were throwing before the change. This allows component with defer triggerrs to be used on both SSR'd and CSR.
fixes#64184
PR Close#64185
In some cases, the leave animation stylesheets were getting pruned too early due to the renderer removal happening before the animation function was run. This ensures that while queuing a leave animation, we guarantee the lView is referenced in the leaving animations set. This guarantees the style sheet pruning knows about the animations existing and skips the prune step.
fixes: #64326
PR Close#64335
When a directive injects a `ViewContainerRef`, the runtime inserts a container that was throwing off the logic that recognizes native controls.
These changes switch to check if the node is a native control through the `TNode`. This also makes it a bit less prone to breaking during SSR.
Fixes#64362.
PR Close#64368
This commit adds `applicationProviders` to the `bootstrapModule` options
object. This allows specifying additional providers at the location of
bootstrap, which makes default providers much easier to accomplish.
Using this, we can refine the approach taken for downgrade_module to use
this more direct API rather than the additional provider variable dance.
PR Close#64354
This fixes the code to retain ZoneJS by default in the providers for
downgradeModule when the `bootstrapModule` is used. Prior to this
change, the async `bootstrapModule`/`compileNgModuleFactory` could be
called multiple times through `downgradeModule` before
`bootstrapModuleFactory` got called and used the zone providers.
Note: marked refactor since this only applies to the -next release and
we shouldn't have this change in the changelog as a fix.
PR Close#64354
Caches information about the kind of form control that a `TNode`
represents in `TNodeFlags`. This avoids redundant computations on
subsequent template create and update passes.
Renames the `INVALID_CONTROL_HOST` error code to
`INVALID_FIELD_DIRECTIVE_HOST` for clarity and adds a test for it.
PR Close#64351
Warns when @defer blocks define unreachable or redundant triggers, such as multiple main triggers, ineffective prefetches, or timer delays not scheduled before rendering.
PR Close#64069
Replaces inline comments with structured Before and After sections
to enhance readability and consistency. This helps developers better
understand the transformation from non-self-closing to self-closing
tags during migration.
PR Close#64388
Adds support for the `referrerPolicy` option in `HttpResource`, allowing developers to control how much referrer information is sent with each HTTP request.
PR Close#64283
This simplifies code by using async/await instead of rxjs in the config
loading internals. While loadChildren/loadComponent could _technically_
return a synchronous value, the expectation is that this would be used
for dynamic imports, which are necessarily async.
PR Close#64322
Renames the control directive and the input that users set to bind a
field to a UI control.
Previously users would do:
```
<input [control]="someField">
```
Now users will do:
```
<input [filed]="someField">
```
PR Close#64300
When the migration command was run for inputs, if the input had more than one reference in a method the migration would generate incorrect code
Fixes#63018
PR Close#64367
Replaces old deep-linked MDN tutorial URLs with top-level documentation
links for JavaScript, HTML, and CSS to provide more general and reliable references.
PR Close#64383
Updated examples to align with the latest Angular style:
- Removed `standalone: false` since it is unnecessary.
- Dropped module-based implementation in favor of standalone.
PR Close#64167
This commit updates the scripts to use the version from `package.json` for snapshot builds, ensuring that the git tags are aligned with the package version. This change simplifies referencing snapshot builds in the `package.json` file.
PR Close#64350
This commit introduces a mechanism to use snapshot builds for @angular/language-service dependencies when building the VSCode extension.
A new --//:enable_snapshot_repo_deps flag allows swapping the stable versioned dependency with a snapshot build from the angular/language-server-builds GitHub repository. This enables testing and development against the latest unreleased version of the language service.
PR Close#64334
Previously, the example returned a plain value instead of an object,
causing destructuring in the `stream` function to fail. Updated to
`params: () => ({ userId: this.userId() })` for correctness.
fixes: #64313
Update adev/src/content/ecosystem/rxjs-interop/signals-interop.md
Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
PR Close#64327
Adding some typing to infer the expected types and drop the usages of `arguments` which isn't really typesafe.
The argument mis-match didn't result in an issue because they didn't end up being used futher down the line.
fix 63973
PR Close#64260
When the scroll position is being restored, this change upates the
behavior to use 'instant' rather than the default 'auto', which will
be whatever the browser behavior is for 'window.scrollTo'. The 'smooth'
behavior does not match how browsers behavior when performing a
traversal navigation for MPAs, which is 'instant'.
related to #58258
PR Close#64299
The `xvfb.start()` and `xvfb.stop()` methods are asynchronous but were being called synchronously. This can lead to race conditions where the tests start running before the virtual frame buffer is fully initialized, or the process exits before it's fully stopped.
This commit promisifies the `start` and `stop` methods to ensure they are properly awaited, making the e2e test setup more robust.
PR Close#64310
Currently if `TestBed.overrideComponent` is used on a class that uses initializer APIs (e.g. `input()`), the initializer metadata will be wiped out, because `overrideComponent` re-compiles the class with the information set by `setClassMetadata`. `setClassMetadata` only captures decorated members at the moment.
These changes introduce some logic to capture the new initializer-based APIs in `setClassMetadata` as well.
Fixes#57944.
PR Close#63957
Reworks the logic that tracks the decorator metadata for members to do so using the output AST, rather than wrapping the TypeScript AST. This makes it easier to programmatically generate new members that weren't part of the TypeScript AST before.
PR Close#63957
This commit migrates the vscode-ng-language-service to use the in-repo `ts_project` macro, which has strict dependency checking enabled. This improves build-time dependency validation and helps ensure that all dependencies are explicitly declared.
As part of this change, redundant `tsconfig.json` files have been removed in favor of a centralized configuration, and `jasmine_test` rules have been updated to the standard macro. A minor code adjustment in `server/src/session.ts` was also made to improve error handling.
PR Close#64306
This change updates the build configuration to include the
@angular/language-server package in the standard framework release
output.
By integrating it into the release train, we ensure that it is versioned and published consistently with the rest of the Angular framework.
PR Close#64306
This commit updates the VSCode Angular Language Service extension to use the `@angular/language-service` package built from source within the workspace, rather than a version downloaded from npm.
This change simplifies development and testing by ensuring the extension always uses the latest code from the local repository. The Bazel build configuration, VSCode launch settings, and e2e tests have been updated to reflect this change.
PR Close#64306
The `@angular/language-service` package was not needed for integration tests or benchmarks. Removing this dependency simplifies the build configuration.
PR Close#64306
Adds support for customizing the `IntersectionObserver` options for the `on viewport`, `prefetch on viewport` and `hydrate on viewport` triggers.
Note that the options need to be a static object literal, e.g. `@defer (on viewport(trigger, {rootMargin: '123px'})`.
Fixes#52799.
PR Close#64130
Currently we produce the string value of a defer `on` trigger by concatenating the string values of all of its tokens. This ends up ignoring whitespaces which in turn throws off source spans.
These changes switch to producing the string by taking the text between the start and end tokens, as well as tracking the start index.
PR Close#64130
Set `pointer-events` of the `iframe` to `none` while dragging. This should stop the events context interference and make resizing of the panel easier.
PR Close#64307
I've updated the test to assert what I believe it was trying to assert
before. Without this change, the CSS is invalid so it's unclear what
behavior we're demonstrating.
PR Close#64036
Fix a bug where the min property of a form field was not correctly
propagated to custom controls. Also ensure that min and max are only
bound to native input elements that support them.
PR Close#63884
Fix several typos caught by the added test cases:
* `disabled` attribute for native controls
* `readonly` property for custom controls
Note that the `name` test cases have been marked `pending()` due to
https://github.com/angular/angular/issues/63882.
PR Close#63884
The legacy `workspace` integration test asset folder has been removed as it was unused and no longer representative of modern Angular CLI workspaces.
In line with this cleanup, the Bazel dependency definitions for the integration tests have been reorganized. Runtime data dependencies have been moved from the `js_test` rules to the `data` attribute of their corresponding `ts_project` rules. This is a cleaner and more appropriate approach as it co-locates a test's runtime data dependencies with its source code definition, making the relationship between the code and its required assets more explicit and improving the overall maintainability of the build configuration.
PR Close#64271
Introduces a referrer policy option for HTTP requests to allow specifying the referrer information sent, improving privacy and security controls.
PR Close#64116
The repository URL in `package.json` is updated to point to the `angular/angular` monorepo. This ensures that the package metadata correctly reflects its location within the main repository.
PR Close#64220
The supported Node.js versions for the language service server are updated to align with the versions supported by Angular. This ensures a consistent and stable environment for developers.
PR Close#64220
This commit revamps the debugging setup and enabling developers to set breakpoints directly in the source TypeScript files.
Key changes include:
- Updated `launch.json` with source map path overrides to correctly map compiled output back to the original source code.
- Switched from `external` to `linked` sourcemaps in the Bazel build configuration for better debugging support.
- Consolidated the recommended VSCode settings into the main `launch.json` and `tasks.json`, removing the separate `recommended-*.json` files.
- Updated the debugging documentation to reflect the new, simplified workflow.
These changes significantly improve the developer experience for contributors working on the language service, making it much easier to debug and troubleshoot issues.
This applies to both the framework packages and vscode-ng-langugage-service.
PR Close#64220
This commit refactors the VSCode extension's build and launch configurations to align with `vsce` and `pnpm` workspaces.
The following changes are included:
- Updated `.vscode/launch.json` to use new `vsce:` prefixed tasks and simplified launch configurations.
- Updated `.vscode/tasks.json` to use `pnpm` workspace commands for watching and packaging the extension.
- Adjusted `BUILD.bazel` and `package.json` files to reflect the new build output paths.
These changes streamline the development workflow for the VSCode extension, making it easier to build, debug, and package.
PR Close#64220
Previously, the router tree would not properly clean up css classes placed on nodes which would lead to some nodes being incorrectly visualized after each update.
PR Close#63979
Our code ensuring host binding composition for animations was causing the early exit and removal of
elements when multiple transitions were present on the same element. This commit fixes the issue by
ensuring that we properly keep track of all the promise resolvers on the LView and then only
call them once we've properly waited for the longest animation to finish.
fixes: #64209
PR Close#64225
There may be cases where the longest animation info has been cleaned up before the end animation fires. We should still do the end processing in that case.
PR Close#64225
These tests were not properly validating against the host binding changes due to the fact that the styles were on the wrong components in some of the host binding cases.
PR Close#64225
Use `implements ErrorHandler` instead of extending the base class to follow Angular
conventions. Marked injected dependencies as `readonly`, made `openErrorSnackBar`
private, and improved overall code consistency.
PR Close#64237
Now that the control flow migration is running as a part of `ng update`, we need to be a bit forgiving about there not being any matching files since it can break the entire update process.
These changes switch the error to a warning and it counts the files for the entire workspace, not the individual projects.
PR Close#64253
Caches the downloaded vscode binary in the CI workflows to speed up the e2e tests for the vscode extension. This avoids downloading vscode on every CI run.
PR Close#64219
Previously this would take ~3500ms adev.
This updated logic avoids the constant JSON.stringify implementation and instead checks for serializable values directly.
After this change this code path for adev takes less than 20ms.
(Benchmarks taken on an M1 Macbook Pro)
PR Close#64234
Move most of the implementation of the `Control` directive into core
framework instructions. This allows field state changes to be propagated
to their corresponding UI controls directly during execution of a
template update block, instead of relying on `effect()`s to synchronize
each change later during the update (and too late in the case of
required inputs).
* Define a private API in `@angular/core` for signal forms to implement:
* `ɵControl` for the `Control` directive.
* `ɵFieldState` for the control's associated `FieldState`.
* Emit specialized instructions when compiling a `[control]` binding:
* `ɵɵcontrolCreate` sets up the `ɵControl` directive if present,
determines whether it's bound to a native control element or a
custom control component, and adds the appropriate event listeners
to notify the `ɵFieldState` of UI changes.
* `ɵɵcontrol` propagates changes from `ɵFieldState` properties to their
corresponding UI control properties (in additional to binding the `control`
property itself).
PR Close#63773
* Emit a `ɵɵcontrol` instruction in place of `ɵɵproperty` for property
bindings named "control". This instruction cannot be chained, but is
otherwise functionally equivalent.
* Upcoming changes will use the `ɵɵcontrol` instruction to bind a signal
form field to a UI control (be it a native element or custom directive).
PR Close#63773
There was a bug in the logic for checking if a leave animation exists for a node. This was affecting timing of nodes with enter animations.
PR Close#64226
There are two primary reasons for this renaming:
1. It better reflects the actual nature of the proxy object, namely that
the form is represented as a tree, and that this object is used for
navigating the tree structure (while `FieldState` is used for getting
the state at a particular point in the structure).
2. This frees up the name `Field` to be used for the directive that
binds a `FieldTree` to a UI control.
PR Close#64214
This commit updates the internal transition to handle context retention
through the abort function. This retention chain included the
previousNavigation and setting this to a noop function resolves the
issue.
fixes#63983
PR Close#64141
Ensures that file names remain visible even if the associated code block
is collapsed or hidden, improving readability and context in the docs.
PR Close#64204
Content Projected nodes are not destroyed and recreated, like every other
situation. Enter and Leave animations were ephemeral and are
expected to run once, and then be cleared. This means that for content projection
cases, the animations would only ever work the first time they were shown / hid.
In order to resolve this, we move to an animation queue that re-runs the animation
functions stored in the LView. In most cases, this animation will run once on creation.
For content projection, the enter and leave animations will fire more than once. Animations
are stored on the LView, but indexed and scheduled by whichever RNode needs to be animated.
So we only run animations for an affected RNode, rather than potentially all in the LView.
This also moves the queue to afterRender, which is safer than right after template
execution in refreshView.
fixes: #63418fixes: #64065fixes: #63901
PR Close#63776
Improve error handling when `rawDelays` contains fewer items than `transitionedProperties`, preventing a toLowerCase of undefined error in `parseCssTimeUnitsToMs`.
PR Close#64181
Since HTTP/2, responses no longer contain a status text besides the status code, which caused our default value of 'OK' to be used in HttpErrorResponse.message.
DEPRECATED: `HttpResponseBase.statusText` is deprecated
PR Close#64176
Stop multiple component tree traversals if the app root is the body tag. This caused the devtools ui to duplicate the component information, if the app root was the body tag
PR Close#64161
BREAKING CHANGE: Fix signal input getter behavior in custom elements.
Before this change, signal inputs in custom elements required function calls to access their values (`elementRef.newInput()`), while decorator inputs were accessed directly (`elementRef.oldInput`). This inconsistency caused confusion and typing difficulties.
The getter behavior has been standardized so signal inputs can now be accessed directly, matching the behavior of decorator inputs:
Before:
- Decorator Input: `elementRef.oldInput`
- Signal Input: `elementRef.newInput()`
After:
- Decorator Input: `elementRef.oldInput`
- Signal Input: `elementRef.newInput`
closes#62097
PR Close#62113
Removed `standalone: true` since it is now the default
and no longer necessary.
refactor(common): update ngComponentOutlet and ngTemplateOutlet examples and remove redundant standalone flag
Removed `standalone: true` since it is now the default
and no longer necessary.
PR Close#64155
The Angular Package Format has been updated to group all TypeScript declaration files (`.d.ts`) under a single `types/` directory within the package. Previously, these files were located at the package root or within entry-point specific directories.
This commit updates the APF documentation to reflect this new structure, including:
- The example file layout.
- The file purpose description table.
- The `package.json` exports field example.
- The legacy typings field example.
This brings the documentation in line with the current package structure, providing accurate guidance for library authors and tool developers.
PR Close#64168
Content Projected nodes are not destroyed and recreated, like every other
situation. Enter and Leave animations were ephemeral and are
expected to run once, and then be cleared. This means that for content projection
cases, the animations would only ever work the first time they were shown / hid.
In order to resolve this, we move to an animation queue that re-runs the animation
functions stored in the LView. In most cases, this animation will run once on creation.
For content projection, the enter and leave animations will fire more than once. Animations
are stored on the LView, but indexed and scheduled by whichever RNode needs to be animated.
So we only run animations for an affected RNode, rather than potentially all in the LView.
This also moves the queue to afterRender, which is safer than right after template
execution in refreshView.
fixes: #63418fixes: #64065fixes: #63901
PR Close#63776
Fixes two issues that were preventing template literals from being recovered properly if one of the interpolated expressions is broken:
1. We weren't updating the expected brace counter when an interpolation starts which in turn was throwing off the recovery logic in `skip`.
2. When producing tokens for template literals, we were treating the closing brace as an operator whereas other places treat it as a character. Even after fixing the first issue, this was preventing the recovery logic from working correctly.
Fixes#63940.
PR Close#64150
Prevents migration of @input() properties that contain references to 'this' in their initializer functions. This ensures that functions accessing class members via 'this' remain unchanged, preventing potential build errors.
PR Close#64142
Updated pipe examples to explicitly import the pipe for clarity and
correctness. Also removed `standalone: true` since it is now the default
and no longer necessary.
PR Close#64135
The VS Code extension build is failing due to some dependency issues. This commit updates the dependencies and build configuration to fix the build.
- Update `pnpm-lock.yaml` to reflect the dependency changes.
- Update `BUILD.bazel` files to adjust the external dependencies for `esbuild` and to correctly package the VSIX file.
PR Close#64154
This commit updates the TypeScript configuration across the project to use `moduleResolution: "bundler"`. This modernizes our module resolution strategy to align with current TypeScript best practices and bundler behaviors.
The following changes are included:
- Updated `tsconfig.json` files to set `moduleResolution` to `"bundler"`.
- Updated the `rules_angular` bazel dependency to a version compatible with these changes.
- Adjusted related test files and golden files to reflect the new module resolution strategy.
PR Close#64125
Some properties (like gets) might throw when we try to read them.
With this commit we fail gracefuly and show a warning message for the property that can't be read.
fixes#56755
PR Close#64096
The paths for `pre_apf_project` and `pre_standalone_project` in the renovate configuration were missing the `package.json` suffix. This resulted in renovate not being able to find and disable updates for these projects as intended.
This commit corrects the paths to include `package.json`.
PR Close#64102
The language service integration tests were modifying files in the source tree, which made them flaky and non-hermetic. This also required the tests to be run with `no-remote-exec` and `no-sandbox` tags in Bazel.
This commit refactors the tests to copy the test projects to a temporary directory before running the tests. This makes the tests more robust, isolated, and allows them to be run remotely and in a sandbox.
Additionally, dependencies for the `pre_apf_project` and `pre_standalone_project` test fixtures have been reverted to older Angular versions. This is to ensure we are correctly testing against legacy project setups as was originally intended.
PR Close#64098
The lsp integration tests had a circular dependency with other integration tests, which made the build setup complex and fragile. This was previously handled by using 'copy_to_bin', which is not ideal as it hides the true dependency graph.
This commit refactors the build configuration to break this cycle by introducing a dedicated 'ts_project' for the lsp tests with its own 'tsconfig.json'. This change simplifies the build logic and makes dependencies explicit.
PR Close#64091
The event listeners for animationstart and animationend weren't properly checking whether the animation event fired matched the node we're bound to, since animation events bubble. This resulted in child node animation events bubbling up and causing elements to get prematurely removed.
fixes: #64084
PR Close#64088
The lsp integration test is flaky and can fail intermittently. This change marks the test as `flaky = True` to prevent it from failing the build.
Additionally, the `no-remote` tag is updated to `no-remote-exec`. The former disables remote caching, while the test can still benefit from it.
PR Close#64085
This commit configures the Bazel RBE setup action to use the 'RBE_TRUSTED_BUILDS_USER' secret for authentication. This is necessary to ensure that the CI can properly connect to the remote build execution environment.
PR Close#64070
`git config` only lists the configured value, but `git remote get-url` actually resolves the URL and is more stable.
I had a local configuration which aliased `gh:` to the appropriate GitHub URL:
```
[url "git@github.com:"]
insteadOf = "gh:"
pushInsteadOf = "git@github.com"
```
In this scenario, `git config` returns `gh:dgp1130/angular`, but `git remote get-url` returns `git@github.com:dgp1130/angular`, which is what the subsequent regex expects.
PR Close#64062
This commit updates several dependencies to their latest versions and adjusts the build configurations accordingly.
Key changes include:
- Upgraded various development and runtime dependencies.
- Removed outdated jasmine test runner configuration.
- Updated Bazel build files to align with new dependency structures.
Some dependencies like `vscode-language*` have been added to Renovate's ignore list as they require a more significant refactoring effort that is planned for a future update.
PR Close#64073
The control flow migration was incorrectly removing `ng-template` elements in scenarios where they were referenced by multiple `*ngIf` directives' `else` clauses and also used independently via `ngTemplateOutlet`.
PR Close#63996
When `noUncheckedIndexedAccess` is not enabled, indexed accesses do not include `undefined` in the type.
This makes the OptionalChainNotNullableCheck inconvenient when wanting to safe guard an indexed access (and when the typings isn't helping you).
Ideally project should enable `noUncheckedIndexedAccess` for better typesafety, but this is often inconveninent (we do not enable it by default) and often not the resort of the developer.
So more better coding convinience, `OptionalChainNotNullableCheck` will not raise an error/warning on indexed Acessed followed by an optional chaining when `noUncheckedIndexedAccess` is not enabled.
See also #63809 which will detect more cases
PR Close#64007
Previously we would visualize route config "types" by colouring different nodes.
Now the we only colour nodes to represent the active route path. Lazy loaded routes are represented with dashed line edges that point in the direction of loading.
PR Close#63980
This commit changes `Resource.hasValue()` and its derived types to improve narrowing
of resources whose generic type either does not include `undefined` (i.e. when a default
value has been provided) or when the generic type is `unknown`. This fixes the undesirable
behavior where `hasValue()` would cause the `else` branch of an `hasValue()` conditional
to have a narrowed type of `never`, given that the `hasValue()`'s type guard covers the
entire type range already (meaning that the type in the else-branch cannot be inhabited
in the type system, yielding the `never` type).
By making the `hasValue()` method only a type guard when the generic type includes `undefined`
these problems are avoided.
Fixes#60766Fixes#63545Fixes#63982
PR Close#63994
Fixes an error where using an alias in a defer block caused the compiler CLI to fail when parsing. The resolution logic in ComponentDecoratorHandler was updated to correctly handle deferred dependencies with aliased imports.
PR Close#63966
Since those are top level APIs, `ngDevMode` might not be available at runtime if they're invoked before the variable is set.
fixes#62796
PR Close#63875
This adds an optional flag to the renderer on `removeChild` called `requireSynchronousElementRemoval`, which can tell any downstream renderer that elements need to be removed synchronously. This gets passed down to the legacy animation renderer to ensure that any elements that set this flag aren't impacted by that renderers changes to timing.
fixes: #63893
PR Close#63921
An invalid APP_ID could be responsible to generating broken CSS selectors. (eg `:` is an example for a character that breaks a selector by being a separator for pseudo-selectors.)
We now throw an error if the provided value is not alphanumerical
PR Close#63252
https://github.com/angular/angular/pull/62630 made it so that all ARIA
property bindings would write to their corresponding attribute instead.
The primary motivation for this change was to ensure that ARIA
attributes were always rendered correctly on the server, where the
emulated DOM may not correctly reflect ARIA properties as attributes.
Furthermore, this change added support for binding to ARIA attributes
using the property binding syntax (e.g. `[aria-label]`).
Unfortunately, https://github.com/angular/angular/pull/62630 relied on
the incorrect assumptions that an ARIA property name could be converted
to its attribute name (without hardcoding the conversion), and that the
value of an ARIA property matched its corresponding attribute. For
example, the `ariaLabelledByElements` property's value is an array of
DOM elements, while the corresponding `aria-labelledby` attribute's
value is a string containing the IDs of the DOM elements.
This partially reverts https://github.com/angular/angular/pull/62630 so
that only property bindings with ARIA attribute names (begin with
`aria-`) are converted to attribute bindings.
* `[ariaLabel]` will revert to binding to the `ariaLabel` property.
* `[aria-label]` will continue binding to the `aria-label` attribute.
Note the only difference between `[aria-label]` and `[attr.aria-label]`
is that the former will attempt to bind to inputs of the same name while
the latter will not.
PR Close#63925
Fixes a bug in the standalone migration where 2 imported modules have the same class name but 1 is imported with an alias and would not be added to the component imports array when migrating
Fixes#63913
PR Close#63934
During a previous PR review, it was noted that the `next` tag was causing confusion. This commit updates the dependencies for the integration tests to resolve this ambiguity and ensure clarity going forward.
Additionally, this change uses the `link:` protocol to ensure that `pnpm i` does not fail when lockfiles or dependencies are updated outside of Bazel.
PR Close#63937
This commit introduces several optimizations to the adev CI workflows:
- The adev preview build now uses a more powerful runner and creates a production build.
- Remote execution is disabled for adev builds to improve performance.
Note: Bazel cache is still being used, and the built times are reduces by about 10mins when the cache is missed.
PR Close#63941
Currently if `TestBed.overrideComponent` is used on a class that uses initializer APIs (e.g. `input()`), the initializer metadata will be wiped out, because `overrideComponent` re-compiles the class with the information set by `setClassMetadata`. `setClassMetadata` only captures decorated members at the moment.
These changes introduce some logic to capture the new initializer-based APIs in `setClassMetadata` as well.
Fixes#57944.
PR Close#63904
Reworks the logic that tracks the decorator metadata for members to do so using the output AST, rather than wrapping the TypeScript AST. This makes it easier to programmatically generate new members that weren't part of the TypeScript AST before.
PR Close#63904
This commit removes Yarn as a package manager for integration tests and migrates to pnpm. This change aims to standardize package management across the project, leveraging pnpm's efficiency and consistent behavior for dependency resolution and installation.
PR Close#63902
This removes the Zone providers from the `BrowserTestingModule`. These
already exist by default in all other entrypoints to Angular
environments (TestBed compiler, bootstrapModule, and createApplication).
PR Close#63872
Previously, HOST_TAG_NAME had its __NG_ELEMENT_ID__ set at the top level. This
prevented tree-shaking, since the bundler had to keep the assignment as a
potential side effect even when the token was never used.
This change moves the token creation and __NG_ELEMENT_ID__ assignment into a
@__PURE__ IIFE. If HOST_TAG_NAME is not injected anywhere, the IIFE result is
unused and can be dropped entirely by the optimizer. If it is used, the token
still behaves the same at runtime.
PR Close#63861
Prior to this change the template type-check generator would incorrectly apply inputs
and attributes to a structural directive, where only the bindings as present in microsyntax
are actually bound to the directive. This introduced a problem where usages of template
variables could not be resolved, because the template variables are out-of-scope of the
template element itself.
Closes#49931
PR Close#52453
pnpm v10.17.0 adds support for wildcards in 'minimumReleaseAgeExclude'. This simplifies the configuration by allowing the use of '@angular-devkit/*' and '@angular/*' instead of listing each package individually.
PR Close#63870
This change configures pnpm's `minimumReleaseAge` setting to 1 day (1440 minutes). This is a security measure to mitigate dependency chain attacks, where malicious actors publish a new version of a dependency with malicious code and then trick users into updating to it before it can be discovered and reported.
By delaying the adoption of new releases, we reduce the window of opportunity for such attacks. The list of excluded packages contains trusted and frequently updated dependencies from the Angular team, which are considered safe to use without this delay.
PR Close#63862
The zoneless scheduler is always enabled, so if hydration works with zoneless, it works
for all Angular apps. There is no need for detection of custom zone implementations
PR Close#63847
Previously we used a configuration flag for adev, instead we now separate into two different targets since our flag didn't
need to cause a full reanalysis to run since everything before the final target should be a cache hit.
PR Close#63845
This commit drops special-case handling for old-style "zoneless" that
would disable the internal scheduler when zoneless was not explicitly
enabled but Zone was not defined. This scheduler is now enabled in _all_
applications, providing consistent expectations for developers.
BREAKING CHANGE: Using a combination of `provideZoneChangeDetection`
while also removing ZoneJS polyfills will no longer result in the
internal scheduler being disabled. All Angular applications now
consistenly use the same scheduler, and those with the Zone change detection
provider include additional automatic scheduling behaviors based on
NgZone stabilization.
PR Close#63846
This makes the zoneless-by-default change a flag flip that can be
individually enabled in tests, createApplication, and bootstrapModule
for gradual rollout. In addition, the "require on CD provider" check is
also made individually flippable for gradual rollout.
PR Close#63382
This change removes the internally provided `ZoneJS`-based change
detection scheduler. This makes Angular Zoneless by default and allows
tree-shaking of the Zone change detection providers.
BREAKING CHANGE: Angular no longer provides a change detection scheduler
for ZoneJS-based change detection by default. Add
`provideZoneChangeDetection` to the providers of your
`bootstrapApplication` function or your `AppModule` (if using
`bootstrapModule`). This provider addition will be covered by an
automated migration.
PR Close#63382
Non-typed `transform` functions were stripped by the migration prior to this commit (while still logging an error).
This behavior will now only happen with `--best-effort`.
#63541
PR Close#63547
In production builds, `ngDevMode` is replaced with `false`, so the guard compiles to `return;`. However, bundlers like ESBuild still keep the remaining statements after the return as unreachable code instead of removing them. This leaves behind unnecessary dead code in the output.
Technically, the body is unreachable. But to prove that, the bundler must be 100% certain that:
- `return` cannot be removed by some transform
- there's no later transformation that changes control flow
As thus, it's always conservative.
This also allows dropping `assertDefined`, which was previously
referenced only inside `prependTokenToDependencyPath`. With the
function now fully inlined and dev-only, `assertDefined` is also
eliminated from production builds, further reducing bundle size.
PR Close#63354
Copy-pasting commands like `$ pnpm lint` caused errors in shells (e.g. zsh). Updated docs to use `pnpm lint` directly so they run without modification.
PR Close#63795
To avoid the need for specifying `provideZoneChangeDetection` in any/all
modules used with `downgradedModule`, this change adds the zone-based change detection
providers by default. This also adds the zone providers to
`UpgradeModule` by default as well.
PR Close#63814
To avoid the need for specifying `provideZoneChangeDetection` in any/all
modules used with `downgradedModule`, this change adds the zone-based change detection
providers by default.
PR Close#63814
To avoid the need for specifying `provideZoneChangeDetection` in any/all
modules used with `downgradedModule`, this change adds the zone-based change detection
providers by default.
PR Close#63814
The `checkNoChanges` method previously used an early-return guard:
if (!ngDevMode) return;
// dev-only code ...
In production builds, `ngDevMode` is replaced with `false`, so the
guard compiles to `return;`. However, bundlers like ESBuild
still keep the remaining statements after the return as unreachable
code instead of removing them. This leaves behind unnecessary dead
code in the output.
This commit updates the method to instead wrap the full body:
if (ngDevMode) {
// dev-only code ...
}
With this change, the method collapses to an empty function in
production builds:
checkNoChanges() {}
This ensures that the dev-only logic and its dependencies
(e.g. `checkNoChangesInternal`, `UseExhaustiveCheckNoChanges`) can be
fully tree-shaken, reducing bundle size.
PR Close#63387
This option was deprecated by #55778.
BREAKING CHANGE: The `interpolation` option on Components has been removed. Only the default `{{ ... }}` is now supported.
PR Close#63474
The diagnostic will raise an error when required initializers (input, model, queries) are invoked the context of property initializers and contructors.
Docs will be provided in a follow-up
fixes#63602
PR Close#63614
The diagnostic that flags signals which haven't been invoked has some logic to skip over inputs, however it was looking at the used directives across the entire template, not the ones on the specific node.
Fixes#63739.
PR Close#63754
This change updates the Gemini model version from 2.0 Flash to 2.5 Flash on the AI overview page to align with the official Genkit documentation.
The source documentation at https://genkit.dev/docs/frameworks/angular/ has been updated, and this commit ensures our documentation reflects that change accurately.
PR Close#63800
The contribution guide is updated to provide clearer instructions on when to use the `docs-infra` scope versus the `docs` type.
This change helps contributors understand that `docs-infra` should only be used for infrastructure-related changes (application code, tooling, configuration) within the `/adev` directory. For simple content modifications, such as editing a `.md` file, `docs` without a scope is the correct choice.
PR Close#63799
This is a pure re-organization of the animations code. No functionality changes, but it should be easier to navigate now. Utility classes have been moved to a `utils.ts` file. The related functions in the instructions have been grouped closer together.
PR Close#63775
Adds the 'target: automation' label to the 'update-cdk-apis' and 'update-cli-help' jobs in the 'update-cdk-apis-and-cli-help.yml' workflow. This will help to better track and manage automation tasks.
PR Close#63753
The logic to update the renovate config during the release to switch the target labels from target: rc to target: patch has been removed. Instead, a static target: automation label is added to the default renovate preset.
PR Close#63752
When a user has `animate.leave` on a list of items in a `@for`, but are only showing a subset using a computed, removing the second to last item results in a move operation on the last item. There's no native atomic move API in the browser. So this results in the element being detached and attached at its new index. The detaching of the node resulted in leave animations firing.
This fix addresses this by adding a flag in the `LView[ANIMATIONS]` `AnimationLViewData` interface to allow for skipping animations. During list reconciliation, we set this flag so that the animations are skipped over. The flag is flipped back after the move operation is complete.
There is one complication that results from this. The index adjustment of elements in the list happens synchronously while the leave animation is asynchronous. This results in the leaving item getting shifted to the end of the list. This is not ideal but likely can be addressed in a future refactor.
fixes: #63544
PR Close#63745
Previously we relied on the default port of 4200, but if it was already in use then we would run into issues where the cli provided a prompt which we were unable to respond to. Instead we now request port 0 which will automatically find an available port.
PR Close#63740
Documents how to create custom service worker scripts to handle push notifications, background sync, and other events by importing and extending Angular's default behavior
PR Close#63629
When a new branch is created for a feature, it may not exist in the downstream repo. For example, during an exceptional minor release. In such scenarios, we fallback to the last known branch. This was previously handled in a catch block, but this change makes the fallback more explicit.
PR Close#63733
This makes it possible to batch effects, where we can "reopen" consumers
during initial render and then finalize them after we are finally done
adding all the effects to a batch:
```
function createBatch() {
const effect = // ... create effect node
resetConsumerBeforeComputation(effect);
return effect;
}
// pseudo-code
function appendEffect(effectBatch, updater) {
if (value is a signal) {
const prevConsumer = setActiveConsumer(effectBatch.node);
const output = value();
setActiveConsumer(prevConsumer);
effectBatch.push({ signal, updater });
return output;
}
}
function finalizeBatch(effectBatch) {
if (effectBatch.length > 0) {
finalizeConsumerAfterComputation(effectBatch.node);
}
}
const effectBatch = createBatchEffectNode();
appendEffect(signal1, (newValue) => /* something */);
appendEffect(signal2, (newValue) => /* something different */);
finalizeBatch(effectBatch);
```
PR Close#62549
In the `deploy-docs-site` GitHub action, esbuild fails to resolve `pnpapi` during the bundling process. This is because `pnpapi` is a dependency that is available in the Node.js environment at runtime and should not be bundled.
This commit marks `pnpapi` as an external dependency for esbuild to prevent it from being bundled and resolve the build failure.
```
✘ [ERROR] Could not resolve "pnpapi" [plugin bazel-sandbox]
```
See: https://github.com/angular/angular/pull/63722#issuecomment-3278922553
PR Close#63723
The reviewer note for Firefox addons included a message that was intended for manual releases. This is no longer necessary with the automated release process.
PR Close#63731
Dropping `any` in favor of `Node` for better type safety and clarity.
BREAKING CHANGE: `ngComponentOutletContent` is now of type `Node[][] | undefined` instead of `any[][] | undefined`.
fixes#63538
PR Close#63674
This updates the enter and leave logic to use the stored LView data to dispatch the enter and leave animations at the right points in the lifecycle. This should fix issues with signals not being available yet, parallel animations, and also eliminate the need for the element registry.
fixes: #63391fixes: #63388fixes: #63369
PR Close#63450
In order to point the right context, links in error messages will target the archived version of the online doc site (v*.angular.io).
See #44650
PR Close#63512
In some cases, such as when a new exceptional minor branch is created. The branch may not exist in the downstream repo. For example, during an exceptional minor release (e.g. FW 20.3.x and Components: 20.2.x).
This commit introduces a fallback mechanism to handle such scenarios. If the current branch is not found in the downstream repository, the script will now fall back to the last known branch from the build information. This ensures that the files can be updated properly.
PR Close#63678
This commit introduces a new `pnpm run devtools:release` command to streamline the Angular DevTools release process.
The command automates the entire release workflow, including checking for new commits, updating version numbers, creating a release commit, and guiding the user through the publishing steps for both Chrome and Firefox extensions.
The `devtools/docs/release.md` documentation has been updated to reflect the use of this new command, providing a single entry point for the release process.
A new script `devtools/tools/release.mts` has been added to implement the release logic, and `package.json` has been updated to include the new script.
PR Close#63599
Keep the selected node (component/element) visible when the directive tree component resizes (e.g. signal graph pane becomes visible).
Closes#63670
PR Close#63681
This will allow manually subscribed animation events to still fire when using `animate.leave`. Otherwise they were being cleaned up before the animations happened.
fixes: #63391
PR Close#63414
This updates tests and examples only to prepare for zoneless by default.
These changes were identified and made as part of #63382. Anything that
failed gets `provideZoneChangeDetection` unless the fixes were easily
and quickly determined.
It also adds the zoneless provider to the `initTestEnvironment` calls
for tests in this repo to prevent regressions before #63382 is merged.
PR Close#63668
Type checking of host bindings was added in v20. We're now confident enough in it to enable it by default.
BREAKING CHANGE:
* Previously hidden type issues in host bindings may show up in your builds. Either resolve the type issues or set `"typeCheckHostBindings": false` in the `angularCompilerOptions` section of your tsconfig.
PR Close#63654
Add some documentation that's mentioned in the material.angular.dev version of the component hanress docs, but was missing from the adev version.
PR Close#63620
This commit updates the `runs-on` configuration in the CI workflows
(`ci.yml`, `manual.yml`, `pr.yml`) from specific `ubuntu-latest-Xcore`
labels to the more general `ubuntu-latest`. This change reduces
resource consumption. This change should not be needed for RBE and remote cache.
PR Close#63656
Add some documentation that's mentioned in the material.angular.dev
version of the drag & drop docs, but was missing from the adev version.
PR Close#63619
This commit introduces a number of changes to the server bootstrapping process to make it more robust and less error-prone, especially for concurrent requests.
Previously, the server rendering process relied on a module-level global platform injector. This could lead to issues in server-side rendering environments where multiple requests are processed concurrently, as they could inadvertently share or overwrite the global injector state.
The new approach introduces a `BootstrapContext` that is passed to the `bootstrapApplication` function. This context provides a platform reference that is scoped to the individual request, ensuring that each server-side render has an isolated platform injector. This prevents state leakage between concurrent requests and makes the overall process more reliable.
BREAKING CHANGE:
The server-side bootstrapping process has been changed to eliminate the reliance on a global platform injector.
Before:
```ts
const bootstrap = () => bootstrapApplication(AppComponent, config);
```
After:
```ts
const bootstrap = (context: BootstrapContext) =>
bootstrapApplication(AppComponent, config, context);
```
A schematic is provided to automatically update `main.server.ts` files to pass the `BootstrapContext` to the `bootstrapApplication` call.
In addition, `getPlatform()` and `destroyPlatform()` will now return `null` and be a no-op respectively when running in a server environment.
PR Close#63562
Moves the control directive under api/ since it is part of the public
API. Also removes the interop abstract control from the public API
PR Close#63616
Tests validate the current behaviour of the injector tree feature.
- Nodes should be displaying on entering the tab
- Hide framework / Hide injectors with no providers flags should filter the tree properly
- Providers side tab should be able to be opened and filtered properly using the 2 filter input fields for token and type
PR Close#62844
Adds additional handling for input types that handle numbers:
- number
- range
- datetime-local
As well as input types that handle dates:
- date
- month
- week
- time
- *not* datetime-local which does not allow setting valueAsDate
This PR allows binding either a `Field<string>` or `Field<number>` to
the number type inputs and a `Field<string>`, `Field<numebr>`, or
`Field<Date | null>` to the date type inputs. Binding uses the
corresponding `.value`, `.valueAsNumber`, or `.valueAsDate` according to
the type of the `Field`.
When reading new values out of the input, the `Control` directive will
read the property that aligns with the type of the existing value in the
`Field` and write back the same type.
PR Close#63585
Updates the version range to drop support for TypeScript 5.8.
BREAKING CHANGE:
* TypeScript versions less than 5.9 are no longer supported.
PR Close#63589
TransferState is only written into the DOM once during SSR and is not kept in sync with the runtime state on the client. Pressing the refresh button always re-reads the initial serialized script tag, which never changes after bootstrap.
PR Close#63592
The logic to track if the transfer state has been serialized is simplified by removing the need for `APP_ID`. Instead of maintaining a `Set` of application IDs, a simple boolean flag is used.
PR Close#63525
The `TRANSFER_STATE_SERIALIZED_FOR_APPID` provider was previously configured at the platform level, causing its state to be shared across all concurrent server-side rendering requests. This created a race condition where one request could see the `appId` from a different, concurrent request, leading to false warnings about duplicate state serialization.
This commit changes the provider's scope to ensure that each application instance gets its own unique state. This correctly isolates the serialization check to each individual request, resolving the issue of false warnings in concurrent environments.
Closes#63524
PR Close#63525
Addresses some cleanup items for the router tree:
- No longer loads router ng global APIs as a side effect of importing the router. Rather this is now a runtime step that occurs when provideRouter is called.
- No longer depends on router.navigateByUrl in Angular DevTools. There is now a dedicated global util for this
- Router instance logic no longer depends on token name
- Prevents navigating to lazy or redirect routes (these don't have an associated component)
PR Close#63081
This fixes a bug introduced in #63485 where `firstValueFrom` was used. This
doesn't work in all situations here because some observables don't
emit before completing. These errors should result in the route matching
logic moving on to the next route.
Note: This is marked as a refactor rather than fix because the commit above is not in
any release yet.
PR Close#63546
Removes the deprecated `ApplicationConfig` export from `@angular/platform-browser`.
This export was deprecated in a prior version and developers should import `ApplicationConfig` from `@angular/core` instead.
BREAKING CHANGE:
The deprecated `ApplicationConfig` export from `@angular/platform-browser` has been removed.
Please import `ApplicationConfig` from `@angular/core` instead.
PR Close#63529
This option was introduced out of caution as a way for developers to opt out of
the new behavior in v18 which scheduled change detection even when
events happened outside the NgZone. After monitoring the results post-release, we
have determined that this feature is working as desired and do not believe it
should ever be disabled by setting this option to `true`.
This option was deprecated in v18.2, less than 3 months after it was
introduced in v18. We do not really expect it to be used.
BREAKING CHANGE: `ignoreChangesOutsideZone` is no longer available as an
option for configuring ZoneJS change detection behavior.
PR Close#62700
Fix the runtime errors caused by the tree visualizer node auto-snapping when a tab is changed. The errors are caused since we only visually hide the tabs.
PR Close#63531
The internal error handler in TestBed rethrows errors to prevent them
from being silently ignored in tests. Prior to this commit, tests which
used `provideZoneChangeDetection` in the providers would override the
internal error handler of TestBed and prevent these errors from being
rethrown.
BREAKING CHANGE: (test only) - Using `provideZoneChangeDetection` in the
TestBed providers would previously prevent `TestBed` from rethrowing
errors as it should. Errors in the test will now be rethrown, regardless
of the usage of `provideZoneChangeDetection`. Tests should be adjusted to
prevent or account for these errors. As in previous major versions,
this behavior can be disabled with `rethrowApplicationErrors: false` in
`configureTestingModule` as a last resort.
PR Close#63404
This updates the error thrown when both `provideZoneChangeDetection` and
`provideZonelessChangeDetection` are both used in the application
providers to be a warning instead. The reasons for this are twofold:
1. The migration we need for using zoneless by default isn't perfect and
may add `provideZoneChangeDetection` when the zoneless provider
exists. This change will prevent that from causing an error
2. There might be valid situations where a "default" is used in a common
provider but that can be overridden by individal applications. In
tests, we do allow this type of thing, where `initTestEnvironment`
may have a default but individual tests might want to use a different
one. The same logic might apply to applications in some environments.
PR Close#63457
This option would require one of either the zone or zoneless provider so
applications don't accidentally enable zoneless when the default flips if we
missed it in the migration. It'll be a hard failure at bootstrap, but that's a
lot easier to notice than zoneless getting turned on accidentally since
many things might just work.
PR Close#63486
This allows passing errors and disabled reasons that did not originate
from `@angular/forms/signals` in case the the control is being used
separately from the forms system
PR Close#63455
Removes custom handling of emptiness in several of the validators and
replaces it with a common `isEmpty` check. The common empty check
considered the following values to be empty: `null`, `undefined`, `''`,
`false`, `NaN`
Generally most validators should treat an empty value as valid. This
aligns with both the behavior or native HTML validators and reactive
forms validators.
As an example, consider an optional email field. If the email validator
considered empty string to be an invalid email, there would be no way
for the user to not enter it.
There are several exceptions to this rule:
- `required` whose entire purpose is to ensure that the field is *not*
empty
- `validateStandardSchema` which should subject all values including
empty ones to the specified standard schema. It is up to the schema to
decide whether an empty value is valid or not
- `validate`/`validateAsync` which leaves it up to the user's custom
validation logic to decide if an empty value is valid.
PR Close#63456
This fixes a bug introduced in #62994 where `toPromise` was used. This
doesn't work in all situations here because some observables don't
complete. This only affected the redirect path, since the others are
already behind other rxjs code which takes the first value from the user
guards.
Note: This is marked as a refactor rather than fix because the commit above is not in
any release yet.
PR Close#63485
To aid in hitting external breaking change deadlines without pressure
of fixing everything in g3 first, add an internal opt out flag.
This also adds a privately exported provider to revert to the old
rxjs-based behavior, which can be synchronous, until any issues that
come up are addressed.
PR Close#62994
This is effectively a revert of https://github.com/angular/angular/commit/72e6a948bb8ec58f14b87d297d5f81baf2e1942d.
Debugging the recognize stage is considerably easier with async/await
stacks compared to rxjs. This also improves maintainability and is a
better 1:1 with server-side logic that has been implemented to match
and can be more easily kept in sync.
This also ensures that the recognize step is always async, whereas it
can sometimes be synchronous with rxjs.
BREAKING CHANGE: Router navigations may take several additional
microtasks to complete. Tests have been found to often be highly
dependent on the exact timing of navigation completions with respect to
the microtask queue. The most common fix for tests is to ensure all
navigations have been completed before making assertions. On rare
occasions, this can also affect production applications. This can be
caused by multiple subscriptions to router state throughout the application,
both of which trigger navigations that happened to not conflict with the
previous timing.
PR Close#62994
The new animations was not correctly looking for the `.` when parsing bindings. This resulted in arbitrary event bindings creating animate.leave instruction calls.
fixes: #63466
PR Close#63470
This commit introduces an experimental version of a new signal-based forms API for Angular. This new API aims to explore how signals can be leveraged to create a more declarative, intuitive, and reactive way of handling forms.
The primary goals of this new signal-based approach are:
* **Signal-centric Design:** Place signals at the core of the forms experience, enabling a truly reactive programming model for form state and logic.
* **Declarative Logic:** Allow developers to define form behavior, such as validation and conditional fields, declaratively using TypeScript. This moves logic out of the template and into a typed, testable schema.
* **Developer-Owned Data Model:** The library does not maintain a copy of data in a form model, but instead read and write it via a developer-provided `WritableSignal`, eliminating the need for applications to synchronize their data with the form system.
* **Interoperability:** A key design goal is seamless interoperability with existing reactive forms, allowing for incremental adoption.
* **Bridging Template and Reactive Forms:** This exploration hopes to close the gap between template and reactive forms, offering a unified and more powerful approach that combines the best aspects of both.
This initial version of the experimental API includes the core building blocks, such as the `form()` function, `Field` and `FieldState` objects, and a `[control]` directive for binding to UI elements. It also introduces a schema-based system for defining validation, conditional logic, and other form behaviors.
Note: This is an early, experimental API. It is not yet complete and is subject to change based on feedback and further exploration.
Co-authored-by: Kirill Cherkashin <kirts@google.com>
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Leon Senft <leonsenft@users.noreply.github.com>
Co-authored-by: Dylan Hunn <dylhunn@gmail.com>
Co-authored-by: Michael Small <michael-small@users.noreply.github.com>
PR Close#63408
This commit updates provider definitions that relied on the `deps` array
with `new Optional()` and `new SkipSelf()` to instead use the modern
`inject(..., { optional: true, skipSelf: true })` API.
Previously:
deps: [[KeyValueDiffers, new SkipSelf(), new Optional()]]
Now:
const parent = inject(KeyValueDiffers, { optional: true, skipSelf: true });
**Bundle size reduction**: `Optional` and `SkipSelf` are runtime values
created by `makeParamDecorator()`. Even in production builds, esbuild
and other bundlers must keep their factory code because they are
referenced with `new Optional()` / `new SkipSelf()`. With `inject()`,
those classes are no longer referenced, allowing them and the
`makeParamDecorator` scaffolding to be tree-shaken when unused.
As a result, production bundles can drop both `Optional`, `SkipSelf`, and
their supporting factory code when not used elsewhere, reducing code size
while keeping the same behavior.
PR Close#63386
Add support for the Fetch API's responseType property in HttpResponse and HttpErrorResponse when using HttpClient with the withFetch provider.
PR Close#63043
When toggling visibility on an element over and over, the enter animations were supposed to be cancelled and then the classes removed. There was a race condition happening that resulted in the cancelled animation being the leave animation. Rather than using the animation.cancel functionality, it's safer to just remove the enter classes.
fixes: #63439
PR Close#63442
This commit updates the devtools step by disabling the package manager cache. This change is necessary because Cypress downloads its binary to a cache directory during installation, which requires a post-install script. However, when the cache is hit this is skipped.
This update also disables `pnpm install` in the Cypress action to avoid a redundant installation step. And adds a seperate cache for the downloaded Cypress binary.
See: https://docs.cypress.io/app/get-started/install-cypress#pnpm-configuration
PR Close#63441
Within our module.bazel file when describing the version of typescript to use for rules_ts, we use ts_version instead of ts_version_from to prevent our package.json file from being
part of the set of files used to calculate the sha for the lock file. Any unrelated change to the version of the typescript file would end up causing our lockfile to be out of date.
This amount of churn has proven to be too much for our current setup. We instead now test to validate the versions defined in the package.json and MODULE.bazel files match.
PR Close#63431
Annotate the `new Version(...)` call with `/* @__PURE__ */` to signal to
optimizers that the constructor is side-effect free.
Without this hint, bundlers such as Terser or ESBuild may conservatively
retain the `VERSION` instantiation even when unused. With the annotation,
the constant can be tree-shaken away in production builds if not referenced,
reducing bundle size.
PR Close#63400
This commit prevents lazy injection of the internal `ErrorHandler` from a destroyed injector, which would otherwise result in a secondary "destroyed injector" error.
The `handleUncaughtError` function is used in a wrapped event listener that invokes the `ErrorHandler` if the listener throws. A simple case in a micro-frontend application:
```ts
onNavigationToAnotherApp() {
this.appRef.destroy();
do_some_stuff_ie_loggin_that_may_throw();
}
```
If the function throws an error, Angular attempts to inject the `ErrorHandler` from a destroyed injector.
PR Close#62275
When declaring directives, the standalone flag is set to true by default in current Angular versions.
The docs for the directive decorator should correctly explain the default behavior, while still mentioning when to set it to false.
PR Close#63329
The 4 second removal timeout was applying in all cases, but it should only actually apply to the situation where the event binding syntax is used for animate.leave. This ensures that's the only case in which it'll apply.
PR Close#63393
Deprecated since v5. Use `upgrade/static` instead, which also supports aot.
BREAKING CHANGE: `UpgradeAdapter` is no longer available. Use
`upgrade/static` instead
PR Close#61659
The animate instructions were getting applied to the container comment nodes as well as the element nodes. This prevents that on the compiler level.
fixes: #63371
PR Close#63390
signalGraphEnabled was previously passed down the component tree.
This change refactors the logic to use the settings service instead,
which already holds the value and allows sharing it across components.
PR Close#63374
This commit drops the `X-Request-URL` header. It was a non-standard HTTP response header, deprecated long ago and never part of any official specification. Modern browsers now expose the final URL via the `XMLHttpRequest.responseURL` property, as defined in the WHATWG spec.
PR Close#61943
This fixes the rare case that someone uses binding syntax with `animate.leave` providing a value with a string that has spaces in it. For example:
```
<example `[animate.leave]="'class-a class-b"` />
```
fixes: #63365
PR Close#63366
This updates the adev navigation to consider the new enter-and-leave path to be the definitive animations guide.
It also prefixes all the prior animations package docs with legacy and updates all links.
PR Close#63368
With #63162, we added automatic link creation on API symbols. The side effect was that we created HTML in some specific cases. For example with the docs-card we could have nested anchor elements which is invalid.
This commit prevent creating nested links inside docs-cards.
fixes#63351
PR Close#63352
Change direct deps in bazel targets and import specifiers within files to maintain strict deps requirements ahead of enabling strict deps tests in the repo
PR Close#63323
There's special logic in place to prevent duplicate nodes from showing up in the case when an `@if` toggles a view quickly. This had the unfortunate side effect of causing `@for` leave animations to get cancelled when an add and remove happened simultaneously, even if it was a different index. This fix prevents that from happening in the `@for` loop case.
fixes: #63307
PR Close#63328
The `FormArrayDirective` will allow to have a `FormArray` as a top-level form object.
* `NgControlStatusGroup` directive will be applied to the `FormArrayDirective`
* `NgForm` will still create a `FormGroup`
Fixes angular#30264
BREAKING CHANGE: This new directive will conflict with existing FormArray directives or formArray inputs on the same element.
PR Close#55880
Ts 5.9 introduced a regression coming from 5.8 when parenthesis aren't generated for expressions like (`(a ?? b) && c`).
This fix works around this explicitly specifying that we want to keep those parenthesis that we're aware of in this specific case;
This change can be reverted if the root issue (https://github.com/microsoft/TypeScript/issues/61369) is fixed. (but let's keep the tests in any case for the coverage)
fixes#63287
PR Close#63292
This commit adds `lockfile_mode=error` to the `.bazelrc` file. This change ensures that any future builds will fail if the lock file is not up-to-date with the `BUILD.bazel` file, preventing inconsistencies and encouraging developers to commit updated lock files.
PR Close#63260
This is a first step to create links to API entries automatically.
It adds support for
- code spans (`` `symbol` ``)
- code blocks (`` ```some code here``` ``)
Links are generated from on a K/V map of API entries (symbol => package name).
The map is generated from the API manifest that we're already generating for the API docs.
For the moment, entries with identical names are skipped.
PR Close#63162
Fixes that the HMR extraction logic didn't accoubnt for expressions with type arguments (e.g. `viewChild('foo', {read: TemplateRef<unknown>})`).
Fixes#63240.
PR Close#63261
In the context of TypeScript (TS), a re-exported symbol is considered a distinct symbol.
This means that a developer can choose to import either the re-exported symbol or
the original symbol. However, in the context of Angular, the re-exported symbol
is treated as the same component because it uses the same selector.
This pull request will utilize the most recent re-export component file to
resolve the module specifier.
PR Close#62585
Add "Show graph" button to the signal properties in the side pane only for Angular apps. This required storing the signal graph in a separate service.
PR Close#62853
In the case that someone wants to disable animations via selector specificity, for example by adding an `.animate-disabled` class to a parent node, we need to make sure the animate instructions don't misbehave. Now we detect if animations exist in the provided classes and react accordingly.
fixes: #63161
PR Close#63242
The Tailwind CSS guide already resides within the Angular documentation, making a link to the Angular documentation redundant. This commit removes the unnecessary link.
PR Close#63205
Adds a new guide that explains how to set up and use Tailwind CSS in an Angular project. This guide covers installation, configuration, and provides a basic usage example.
PR Close#63205
Ensure consistency in error message wording by aligning the NG0303
error with other Angular error strings. This improves clarity and
maintains a uniform developer experience
PR Close#63222
Host bindings for `(animate.enter)` and `(animate.leave)` were not firing properly. This fixes the compiler ingest to make sure they do fire.
fixes: #63199
PR Close#63217
Previously, Angular devtools would mistakenly traverse the same DOM elements multiple times while doing traversal for the component tree explorer. This error case would occur when more than 1 Angular application root component was present on the same page and in distinct DOM branches.
Some example cases that did work previously:
```html
<app-root>
...
</app-root>
```
```html
<app-root>
...
<app-root-2></app-root-2>
...
</app-root>
```
An example of where it would enter the irregular behaviour
```html
<app-root>
...
</app-root>
<app-root-2>
...
</app-root-2>
```
Now, we properly ignore duplicate DOM paths when looking for application and non-application root component to begin the Angular DevTools component discovery logic.
PR Close#62719
This applies the same fix that fixed the class version to the event binding version. It prevents duplicate elements from being on screen when animations have been toggled too fast.
fixes: #63127
PR Close#63216
This change fixes an issue where long lists of enum values would display on a single line, running off the screen, especially on mobile devices.
PR Close#63211
The value type was not being displayed when a value had an enum, which was misleading. This change ensures the value type is always shown, so users know whether to expect a single value or an array of values.
PR Close#63211
This commit extracts helper functions to reduce code duplication across animation instructions and adds early return when animations are disabled.
PR Close#63163
Fixes that the pipeline wasn't processing the fallback content of `ng-content` for i18n which resulted in a compiler error further down the line.
Fixes#63065.
PR Close#63156
Similar fix as #63082, but for template attributes. The root cause is the same where we should be using `fullStart` instead of `start` in order to account for whitespaces being skipped.
Fixes#63157.
PR Close#63175
This commit updates the MCP server documentation with the following changes:
- Updates the description of the `ng mcp` command behavior.
- Adds a configuration example for the Gemini CLI.
- Adds a new section for command options, including `--read-only` and `--local-only`.
- Alphabetizes the IDE configuration sections for better readability.
- Alphabetizes the "Available Tools" table.
PR Close#63141
Running the Angular compiler with declaration-only emission is dangerous
because Angular does not yet support this mode as it relies on the Ivy
compilation which does not run in this mode
In the best case, everything works fine as incidentally there's no
difference in the emitted type declarations (e.g. this is the case for
TS files containing no Angular annotations or only `@Injectable`
annotations).
In the worst case, compilation silently fails in that the compilation
succeeds but the resulting type declarations are missing the Angular
type information and are therefore incomplete. This happens for all
components, directives and modules.
BREAKING CHANGE: The Angular compiler now produces an error when the
the `emitDeclarationOnly` TS compiler option is enabled as this mode is
not supported.
PR Close#61609
This commit also include an `ng update` migration to ensure `lastSuccessfulNavigation` is invoked.
BREAKING CHANGE: `lastSuccessfulNavigation` is now a signal and needs to be invoked
PR Close#63057
This commit adds brief documentation for `rxResource` to the "Using
Angular with RxJS" guide. The only available documentation for
`rxResource` today is the API reference, which lacks any code examples.
PR Close#63125
This removes the common pitfall for if blocks in the best practices, as this is no longer true in Angular v20.2, see angular/angular@a409534
PR Close#63132
This will allow us to build adev while the CLI and the FW major versions are mismatched.
we can remove this patch once the CLI has published a v21 pre-release (or a flag to disable that error).
PR Close#63098
This was missing from the RxJS interop guide. I came across it while
cleaning up some Google-internal docs and realized I had nothing on adev
to which I could link.
PR Close#63122
This fix updates the adev `DocViewer` component to support rendering with the `main[docsViewer` selector so that the primary content for the page is inside of a `<main>` element (without introducing an extra DOM element).
PR Close#63121
When using `file:` renovate updates fails due to ` ERR_PNPM_LINKED_PKG_DIR_NOT_FOUND ` this is due to a different behaviour between `link:` amd `file:`. `link:` however will not fail when the directory does not exist.
PR Close#63111
The `pnpm install` command was failing for the `packages/core/test/bundling` project with the error:
`ERR_PNPM_NO_MATCHING_VERSION No matching version found for @angular/compiler-cli@0.0.0-PLACEHOLDER`
This happenes only in renovate updates.
PR Close#63105
During `pnpm install` in a monorepo setup, the `packages/zone.js/test/typings` project would fail with the error: `ERR_PNPM_LINKED_PKG_DIR_NOT_FOUND: Could not install from "/.../node_modules/typescript" as it does not exist.`
PR Close#63105
When parsing expressions inside a bound attribute, we offset all of its spans by an `absoluteOffset` in order to get the right spans in the source file. The offset was incorrect when parsing an attribute with leading spaces during the construction of the Ivy AST, because of the combination of:
1. We were setting the offset by looking at `valueSpan.start`.
2. The Ivy parser sets `leadingTriviaChars: [' ', '\n']` which means that spaces and new lines will be ignored in the `sourceSpan.start`.
These changes resolve the issue by using `valueSpan.fullStart` which includes the leading spaces.
Fixes#63069.
PR Close#63082
This folder contains configuration files that can be used to opt into working on this repository in a [Docker container](https://www.docker.com/resources/what-container) via [VSCode](https://code.visualstudio.com/)'s Remote Development feature (see below).
Info on remote development and developing inside a container with VSCode:
- [VSCode: Developing inside a Container](https://code.visualstudio.com/docs/remote/containers)
- [VSCode: Remote Development FAQ](https://code.visualstudio.com/docs/remote/faq)
## Usage
_Prerequisite: [Install Docker](https://docs.docker.com/install) on your local environment._
@@ -15,6 +15,7 @@ _Prerequisite: [Install Docker](https://docs.docker.com/install) on your local e
To get started, read and follow the instructions in [Developing inside a Container](https://code.visualstudio.com/docs/remote/containers). The [.devcontainer/](.) directory contains pre-configured `devcontainer.json` and `Dockerfile` files, which you can use to set up remote development with a docker container.
In a nutshell, you need to:
- Install the [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension.
- Copy [recommended-Dockerfile](./recommended-Dockerfile) to `Dockerfile` (and optionally tweak to suit your needs).
- Copy [recommended-devcontainer.json](./recommended-devcontainer.json) to `devcontainer.json` (and optionally tweak to suit your needs).
@@ -23,7 +24,6 @@ In a nutshell, you need to:
The `.devcontainer/devcontainer.json` and `.devcontainer/Dockerfile` files are ignored by git, so you can have your own local versions. We may occasionally update the template files ([recommended-devcontainer.json](./recommended-devcontainer.json), [recommended-Dockerfile](./recommended-Dockerfile)), in which case you will need to manually update your local copies (if desired).
## Updating `recommended-devcontainer.json` and `recommended-Dockerfile`
You can update and commit the recommended config files (which people use as basis for their local configs), if you find that something is broken, out-of-date or can be improved.
description="Researches part of the codebase and creates a skill for it"
prompt="""
## Role
You are an experienced senior developer specializing in reverse engineering and understanding
complex code, prompt engineering, and context engineering.
Your task is to build a complete understanding of the mental model and architecture of the code,
and to create an efficient context file that allows a coding agent to understand and work with the
code.
## Guiding Principles
1. **Deep Analysis:** Understand the _why_ behind the code. Not just a surface level listing of
files and classes.
2. **Curiosity:** Be curious. If something is unclear, confusing, or unexpected you _MUST_
investigate further until you fully understand.
3. **Efficient Token Use:** The final output will be directly included into the context of the
coding assistant, so be sure to make efficient use of tokens. Think deeply, but only capture the
most important information for the coding agent in the final output
## Procedure
1. Fully explore the code before first, with a focus on understanding the architecture and how all
of the pieces fit together.
2. Develop an understanding of the mental model behind the architecture. _Why_ is the code is
architected this way? How should developers think about the system?
3. Document your findings using the given output format described in the next section.
## Output Format
Note the following placeholders below:
- `[package]`: is a unique identifier for the current code package (for example if you're looking at
code under `packages/forms/signals` you might use `signal-forms` as the `[package]`)
- `[code-location]`: is the location of the current code within the larger repository
- `[context]`: is the context to add to the coding agent when it is working with this code.
With those placeholders in mind, write a file create a new directory under `.gemini/skills` with the
name `reference-[package]/`, and under that directory add a `SKILL.md` file with the following
content:
```md
---
name: reference-[package]
description: Explains the mental model and architecture of the code under `[code-location]`. You MUST use this skill any time you plan to work with code in `[code-location]`
---
[context]
```
## Additional User Instructions
The user may have additional instructions.
- The user should indicate what package to research
- The user may indicate that they want to update a package that has already been researched. In this
case, read the existing skill and make any required updates based on your research
- The user may request supplemental information be added to the skill (if so, add this to the
existing skill in a new markdown file under a `references` directory within the skill. Add a
section to the main `SKILL.md` that mentions what supplemental information is available)
description: Comprehensive writing guide for Angular documentation (adev). Covers Google Technical Writing standards, Angular-specific markdown extensions, code blocks, and components. Use when authoring or reviewing content in adev/src/content.
---
# Angular Documentation (adev) Writing Guide
This skill provides comprehensive guidelines for authoring content in `adev/src/content`. It combines Google's technical writing standards with Angular-specific markdown conventions, components, and best practices.
## I. Google Technical Writing Guidelines
### Tone and Content
- **Be conversational and friendly:** Maintain a helpful yet professional tone. Avoid being overly casual.
- **Write accessibly:** Ensure documentation is understandable to a diverse global audience, including non-native English speakers.
- **Audience-first:** Focus on what the user needs to do, not just what the system does.
- **Avoid pre-announcing:** Do not mention unreleased features or make unsupported claims.
- **Use descriptive link text:** Link text should clearly indicate the destination (e.g., avoid "click here").
### Language and Grammar
- **Use second person ("you"):** Address the reader directly.
- **Prefer active voice:** Clearly state who or what is performing the action (e.g., "The system generates a token" vs "A token is generated").
- **Standard American English:** Use standard American spelling and punctuation.
- **Conditional clauses first:** Place "if" or "when" clauses before the instruction (e.g., "If you encounter an error, check the logs").
- **Define terms:** Introduce new or unfamiliar terms/acronyms upon first use.
- **Consistent terminology:** Use the same term for the same concept throughout the document.
- **Conciseness:** Aim for one idea per sentence. Keep sentences short.
### Formatting and Organization
- **Sentence case for headings:** Capitalize only the first word and proper nouns in titles and headings.
- **Lists:**
- **Numbered lists:** Use for sequential steps or prioritized items.
- **Bulleted lists:** Use for unordered collections of items.
- **Description lists:** Use for term-definition pairs.
- **Serial commas:** Use the Oxford comma (comma before the last item in a list of three or more).
- **Code formatting:** Use code font for code-related text (filenames, variables, commands).
- **UI Elements:** formatting user interface elements in **bold**.
- **Date formatting:** Use unambiguous formats (e.g., "September 4, 2024" rather than "9/4/2024").
- **Structure:** Use logical hierarchy with clear introductions and navigation. Headings should be task-based where possible.
### Images and Code Samples
- **Images:** Use simple, clear illustrations to enhance understanding.
- **Captions:** Write captions that support the image.
- **Code Samples:**
- Ensure code is correct and builds without errors.
- Follow language-specific conventions.
- **Comments:** Focus on _why_, not _what_. Avoid commenting on obvious code.
### Reference Hierarchy
1. Project-specific style guidelines (if any exist in `CONTRIBUTING.md` or similar).
2. Google Developer Documentation Style Guide.
3. Merriam-Webster (spelling).
4. Chicago Manual of Style (non-technical).
5. Microsoft Writing Style Guide (technical).
---
## II. Angular Documentation Specifics
### Code Blocks
Use the appropriate language identifier for syntax highlighting:
- **TypeScript (Angular):** Use `angular-ts` when TypeScript code examples contain inline templates.
- **HTML (Angular):** Use `angular-html` for Angular templates.
- **TypeScript (Generic):** Use `ts` for plain TypeScript.
- **HTML (Generic):** Use `html` for plain HTML.
- **Shell/Terminal:** Use `shell` or `bash`.
- **Mermaid Diagrams:** Use `mermaid`.
#### Attributes
You can enhance code blocks with attributes in curly braces `{}` after the language identifier:
-`header="Title"`: Adds a title to the code block.
-`linenums`: Enables line numbering.
-`highlight="[1, 3-5]"`: Highlights specific lines.
-`hideCopy`: Hides the copy button.
-`prefer`: Marks code as a preferred example (green border/check).
-`avoid`: Marks code as an example to avoid (red border/cross).
description: Explains the mental model and architecture of the code under `packages/compiler-cli`. You MUST use this skill any time you plan to work with code in `packages/compiler-cli`
---
# Angular Compiler CLI (`ngtsc`) Architecture
## Overview
The `packages/compiler-cli` package contains the Angular Compiler (Ivy), often referred to as `ngtsc`. It is a wrapper around the TypeScript compiler (`tsc`) that extends it with Angular-specific capabilities.
The core goal of `ngtsc` is to compile Angular decorators (like `@Component`, `@Directive`, `@Pipe`) into static properties on the class (Ivy instructions, e.g., `static ɵcmp = ...`). It also performs template type checking and ahead-of-time (AOT) compilation.
## Mental Model
The compiler is designed as a **lazy, incremental, and partial** compilation pipeline.
1.**Wrapper Pattern**: `NgtscProgram` wraps the standard `ts.Program`. It intercepts calls to act as a drop-in replacement for standard tooling.
2.**Traits System**: Every class with an Angular decorator is considered a "Trait". The compiler manages the state of these traits through a state machine:
- **Resolved**: Dependencies (directives/pipes in template) resolved, import cycles handled.
- **Skipped**: Not an Angular class.
3.**Lazy Analysis**: Analysis only happens when necessary (e.g., when diagnostics are requested or emit is prepared).
4.**Output AST**: The compiler generates an intermediate "Output AST" (`o.Expression`) for the generated code, which is then translated into TypeScript AST nodes during the emit phase.
## Key Subsystems
### 1. Core Orchestration (`ngtsc/core`)
- **`NgtscProgram`**: The public API implementing `api.Program`. It manages the `ts.Program` and the `NgCompiler`.
- **`NgCompiler`**: The brain of the compiler. It orchestrates the compilation phases (Analysis, Resolution, Type Checking, Emit). It holds the `TraitCompiler`.
### 2. Trait Compilation (`ngtsc/transform`)
- **`TraitCompiler`**: Manages the lifecycle of "Traits". It iterates over source files, identifies decorated classes, and delegates to the appropriate `DecoratorHandler`.
- **`Trait`**: A state container for a class, holding its handler, analysis results, and resolution results.
### 3. Decorator Handlers (`ngtsc/annotations`)
- **`DecoratorHandler`**: An interface for handling specific decorators.
- **`ComponentDecoratorHandler`**: The most complex handler. It:
- Extracts metadata (selector, inputs, outputs).
- Parses the template.
- Resolves used directives and pipes (`R3TargetBinder`).
- Generates the `ɵcmp` instruction.
- **`DirectiveDecoratorHandler`**, **`PipeDecoratorHandler`**, **`NgModuleDecoratorHandler`**: Handle their respective decorators.
### 4. Template Type Checking (`ngtsc/typecheck`)
- **`TemplateTypeChecker`**: Generates "Type Check Blocks" (TCBs). A TCB is a block of TypeScript code that represents the template's logic in a way `tsc` can understand and check for errors.
- **`TypeCheckBlock`**: The actual generated code that validates bindings, events, and structural directives.
- **`MetadataReader`**: Reads Angular metadata from source files (using `LocalMetadataRegistry`) and `.d.ts` files (using `DtsMetadataReader`).
- **`ScopeRegistry`**: Determines the "compilation scope" of a component (which directives/pipes are available to it), handling `NgModule` transitive exports and Standalone Component imports.
### 6. Emit & Transformation (`ngtsc/transform`)
- **`ivyTransformFactory`**: A TypeScript transformer factory.
- **`IvyCompilationVisitor`**: Visits classes, triggers compilation via `TraitCompiler`, and collects the Output AST.
- **`IvyTransformationVisitor`**: Translates the Output AST into TypeScript AST, injects the `static ɵ...` fields, and removes the original decorators.
## Compilation Phases
1.**Construction**: `NgtscProgram` creates `NgCompiler`, which sets up all registries and the `TraitCompiler`.
2.**Analysis** (`analyzeSync`):
- The `TraitCompiler` scans files.
-`DecoratorHandler`s extract metadata and parse templates.
- No cross-file resolution happens here (allowing for parallelism and caching).
3.**Resolution** (`resolve`):
-`TraitCompiler` resolves traits.
- Components link their templates to specific Directives and Pipes (found via `ScopeRegistry`).
- Import cycles are detected and handled (e.g., via "remote scoping").
4.**Type Checking**:
-`TemplateTypeChecker` creates TCBs for all components.
- TypeScript diagnostics are retrieved for these TCBs.
5.**Emit** (`prepareEmit`):
-`ivyTransformFactory` is created.
- TS `emit` is called.
- The transformers run, injecting the compiled Ivy instructions into the JS/DTS output.
## Important File Locations
-`packages/compiler-cli/src/ngtsc/program.ts`: Entry point (`NgtscProgram`).
description: Explains the mental model and architecture of the code under `packages/core`. You MUST use this skill any time you plan to work with code in `packages/core`
---
# Angular Core (`packages/core`) Mental Model
This document outlines the architecture and mental model for `packages/core`, the heart of the Angular framework.
## 1. High-Level Architecture
`packages/core` contains the runtime logic for Angular. Its primary responsibilities are:
1.**Rendering (Ivy/Render3)**: Transforming templates into DOM updates.
2.**Dependency Injection (DI)**: Managing object creation and lifetime.
3.**Change Detection**: Synchronizing the model with the view.
4.**Reactivity**: Signals and Zone.js integration.
## 2. Rendering Engine (Ivy / Render3)
The rendering engine (located in `packages/core/src/render3`) uses an **instruction-based** approach.
### Key Concepts
- **Instructions**: The Angular compiler transforms templates into a sequence of instruction calls (e.g., `ɵɵelementStart`, `ɵɵtext`, `ɵɵproperty`). These instructions are executed at runtime to create and update the view.
- **TView (Template View)**: An array containing the _static structure_ of a view. It is shared across all instances (`LView`s) of the same component/template. It holds:
- Configured via `@Component.providers` or `@Directive.providers`.
- **Not a class**, but a data structure embedded in the `LView` ("Expando" section).
- Uses **Bloom Filters** (`TView.data`) to quickly check if a token is present at a specific node index before traversing up the tree.
- Resolves tokens starting from the current node, walking up the view tree (Element Injector hierarchy), and falling back to the Module Injector if not found.
## 4. Change Detection
- **Dirty Checking**: Angular checks if values bound in templates have changed.
- **Strategies**:
-`Default`: Checks everything.
-`OnPush`: Checks only if inputs change, events fire, or signals update.
- **Signals**: The new reactivity primitive. Signals notify the scheduler when they change, potentially allowing for fine-grained updates (Zoneless).
## 5. Key Directories to Know
-`src/render3`: The Ivy rendering engine.
-`instructions`: The runtime instructions called by compiled code.
-`src/signal`: Signals implementation (if present in this version, otherwise likely in `primitives`).
## 6. Conventions & Gotchas
- **Prefixes**: Private/Internal exports often start with `ɵ`.
- **Global State**: Ivy relies heavily on global state (e.g., `getLView()`) during instruction execution to avoid passing context arguments everywhere. This is for performance and code size.
- **Performance**: The code is highly optimized for performance and memory. You will see arrays used instead of objects, bitmasks, and manual memory management patterns. **Respect these patterns.**
## 7. How to Modify Core
1.**Understand the Instruction**: If modifying runtime behavior, find the corresponding instruction in `src/render3/instructions`.
2.**Check `LView`/`TView` Impact**: If adding state, understand where it fits in the `LView` array.
3.**Tests**: Core has extensive tests. Run them using Bazel.
description: Explains the mental model and architecture of the code under `packages/forms/signals`. You MUST use this skill any time you plan to work with code in `packages/forms/signals`
---
# Signal Forms Architecture
The `packages/forms/signals` directory contains an experimental, signal-based forms API for Angular.
This system differs significantly from the existing Reactive and Template-driven forms.
## Mental Model
1.**Model-Driven**: The system is built around a `WritableSignal<T>` which serves as the **single source of truth**.
Unlike Reactive Forms where the `FormControl` holds the value, here the `Signal` holds the value.
The form is merely a _view_ or _projection_ of that signal, adding form-specific state (validity, dirty, touched).
2.**Proxy-Based Traversal**: The form API (`form(signal)`) returns a `FieldTree`. This object is a **Proxy**.
It allows accessing nested fields (e.g., `myForm.user.name`) without manually creating control groups.
Accessing a property on the proxy lazily resolves or creates the corresponding `FieldNode`.
3.**Schema-Based Logic**: Validation, disabled state, and other metadata are defined separately via **Schemas**.
Schemas are applied to the form structure using functions like `apply`, `applyEach` (for arrays), and `applyWhen`.
This separates the _structure_ of the data from the _rules_ governing it.
4.**Directives as Glue**: The `[formField]` directive binds a DOM element (native input or custom control) to a `FieldNode`.
It handles:
- Syncing the value between the DOM and the Signal.
- Reflecting state (valid, touched, etc.) to the UI.
- Handling user interaction events (blur, input).
## Key Components
### 1. `FieldNode` (`src/field/node.ts`)
The central internal class representing a single field in the form graph. It aggregates several state managers:
-`structure`: Manages parent/child relationships and signal slicing.
This document explains how the Signal Forms system hooks into the Angular compiler and runtime to provide seamless type-checking and efficient updates.
## 1. Compiler-CLI Integration (Type Checking)
The `packages/compiler-cli` package contains specific logic to support `[formField]`. This is primarily handled in `src/ngtsc/typecheck/src/ops/signal_forms.ts`.
### Key Mechanisms:
- **Detection**: The compiler identifies a directive as a "Field Directive" if it has the `ɵNgFieldDirective` property or comes from `@angular/forms/signals`.
- **Synthetic Binding Expansion**: When you write `<input [formField]="mySignal" />`, the type checker doesn't just check `formField`. It synthetically expands this into a set of bindings for validation:
-`[value]="mySignal()"` (or `checked` for checkboxes)
-`[disabled]="mySignal.disabled()"`
-`[required]="mySignal.required()"`
- ...and so on.
- This ensures that `mySignal` (the `FieldNode`) has all the necessary properties to drive the form control.
- **Conflict Detection**: It actively prevents "double binding". If you bind `[formField]`, you are _banned_ from also binding `[value]`, `[disabled]`, `[required]`, etc., as the signal form should be the single source of truth.
- **Element Type Validation**:
- **Native Elements**: Checks that the signal's value type matches the element type (e.g., `<input type="checkbox">` requires a `boolean` signal).
- **Custom Controls**: Detects if a custom component is a "Form Value Control" (has a `value` input/output) or "Form Checkbox Control" (has a `checked` input/output) and validates against that.
### Relevant Files:
-`packages/compiler-cli/src/ngtsc/typecheck/src/ops/signal_forms.ts`: The core logic for `TcbNativeFieldOp` and `SignalFormFieldOp`.
## 2. Core Runtime Integration
The `packages/core` package provides the low-level instructions that power the `FormField` directive. This allows it to do things normal directives cannot, like efficiently syncing state without change detection overhead for every property.
### Key Mechanisms:
- **`ɵngControlCreate` Hook**: The `FormField` directive defines a special method `ɵngControlCreate`.
- **`ɵɵcontrol` Instructions**: When the compiler sees `ɵngControlCreate`, it emits:
-`ɵɵcontrolCreate`: Called during the creation phase.
-`ɵɵcontrol`: Called during the update phase.
- **`ControlDirectiveHost`**: These instructions provide the directive with a `ControlDirectiveHost`. This is a privileged interface that allows the `FormField` directive to:
- **Access the Element**: Get direct access to the native element or component instance.
- **Set Inputs**: Write directly to inputs of _other directives_ on the same node (e.g., setting the `value` input of a custom control).
- **Listen to Outputs**: Subscribe to outputs of other directives (e.g., `valueChange`).
- **Bypass Templates**: It effectively acts as a "meta-directive" that manages the bindings for you, bypassing the need for explicit template syntax for every property.
### Relevant Files:
-`packages/core/src/render3/instructions/control.ts`: Implementation of `ɵɵcontrol` instructions.
-`packages/forms/signals/src/directive/form_field_directive.ts`: The directive that implements the hook.
# - We trust that people do the right thing and won't approve changes they don't feel confident reviewing
# - We enforce that only approved PRs are merged ensuring that unreviewed code isn't accidentally merged
# - We distribute approval rights as much as possible to help us scale better
# - Groups have one or two global approvers groups as fallbacks:
# - @angular/fw-global-approvers: for approving minor changes, large-scale refactorings, and emergency situations.
# - @angular/fw-global-approvers-for-docs-only-changes: for approving minor documentation-only changes that don't require engineering review
# - A small number of file groups have very limited number of reviewers because incorrect changes to the files they guard would have serious consequences (e.g. security, public api)
#
# Configuration nuances:
@@ -37,27 +34,10 @@
# See reviewer list under `required-minimum-review` group. Team member names and
@@ -14,20 +14,20 @@ appearance, race, religion, or sexual identity and orientation.
Examples of behavior that contributes to creating a positive environment
include:
* Use welcoming and inclusive language
* Respect each other
* Provide and gracefully accept constructive criticism
* Show empathy towards other community members
- Use welcoming and inclusive language
- Respect each other
- Provide and gracefully accept constructive criticism
- Show empathy towards other community members
Examples of unacceptable behavior by participants include:
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
* The use of sexualized language or imagery
* Unwelcome sexual attention or advances
* Other conduct which could reasonably be considered inappropriate in a
- The use of sexualized language or imagery
- Unwelcome sexual attention or advances
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
@@ -69,9 +69,9 @@ members of the project's leadership.
If you are banned you may contest the decision. To do so email conduct@angular.io with the subject line "Repeal Ban for {{your name here}}" and body with the responses to the following:
* Why do you believe you did not violate the Code of Conduct?
* Were other factors involved in this situation the leadership team may have been unaware of?
* Why do you wish to be a part of the Angular community?
- Why do you believe you did not violate the Code of Conduct?
- Were other factors involved in this situation the leadership team may have been unaware of?
- Why do you wish to be a part of the Angular community?
We would love for you to contribute to Angular and help make it even better than it is today!
As a contributor, here are the guidelines we would like you to follow:
- [Code of Conduct](#coc)
- [Question or Problem?](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Submission Guidelines](#submit)
- [Coding Rules](#rules)
- [Commit Message Guidelines](#commit)
- [Signing the CLA](#cla)
- [Code of Conduct](#coc)
- [Question or Problem?](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Submission Guidelines](#submit)
- [Coding Rules](#rules)
- [Commit Message Guidelines](#commit)
- [Signing the CLA](#cla)
## <a name="coc"></a> Code of Conduct
Help us keep Angular open and inclusive.
Please read and follow our [Code of Conduct][coc].
## <a name="question"></a> Got a Question or Problem?
Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests.
@@ -34,28 +32,25 @@ To save your and our time, we will systematically close all issues that are requ
If you would like to chat about the question in real-time, you can reach out via [the Angular community Discord server][discord].
## <a name="issue"></a> Found a Bug?
If you find a bug in the source code, you can help us by [submitting an issue](#submit-issue) to our [GitHub Repository][github].
Even better, you can [submit a Pull Request](#submit-pr) with a fix.
## <a name="feature"></a> Missing a Feature?
You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub Repository.
If you would like to *implement* a new feature, please consider the size of the change in order to determine the right steps to proceed:
* For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed.
You can _request_ a new feature by [submitting an issue](#submit-issue) to our GitHub Repository.
If you would like to _implement_ a new feature, please consider the size of the change in order to determine the right steps to proceed:
- For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed.
This process allows us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.
**Note**: Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major feature.
* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
- **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
## <a name="submit"></a> Submission Guidelines
### <a name="submit-issue"></a> Submitting an Issue
Before you submit an issue, please search the issue tracker. An issue for your problem might already exist and the discussion might inform you of workarounds readily available.
@@ -74,50 +69,67 @@ Unfortunately, we are not able to investigate / fix bugs without a minimal repro
You can file new issues by selecting from our [new issue templates](https://github.com/angular/angular/issues/new/choose) and filling out the issue template.
We strongly value open source contribution and pull requests from community contributors. Please note that every pull request is reviewed and merged by an actual person on the team, which does take time and effort. That is time and effort that does take away from other valuable work. With that in mind we have an minimum set of expectations that are required of any community contribution pull request that is opened.
1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR that relates to your submission.
- You don't want to duplicate existing efforts.
2. Be sure that an issue or pull request clearly describes the problem you're fixing, or documents the design for the feature you'd like to add. Issues require a _minimal_ reproduction.
3. Discussing the design in an issue upfront helps to ensure that we're ready to accept your work. Pull requests are not the right place to do design work.
- When in doubt, open an issue first before doing any sort of speculative implementation work
4. Ideally the PR should be tied to an issue, but this is not required
5. The change should improve code quality (i.e. addressing a TODO) or should impact / improve a feature
6. Micro optimizations will only be accepted if they are validated by an actual benchmark
7. Do not open pull requests that are addressing feature requests that are not labeled as "help wanted" as they usually need additional design work before we could accept pull requests
8. The change should be well tested
If your pull request does not meet these minimum expectations, we may close your PR. Also, if your PR introduces a breaking change, it's possible the level of churn this breaking change causes may block our ability to move forward with it. We may close your PR in that situation, as well. Otherwise, we're excited to see your contributions and enthusiasm for Angular!
### <a name="submit-pr"></a> Submitting a Pull Request (PR)
Before you submit your Pull Request (PR) consider the following guidelines:
1.Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR that relates to your submission.
You don't want to duplicate existing efforts.
2. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add.
Discussing the design upfront helps to ensure that we're ready to accept your work.
1.Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
We cannot accept code without a signed CLA.
Make sure you author all contributed Git commits with email address associated with your CLA signature.
4. [Fork](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) the [angular/angular](https://github.com/angular/angular/fork) repo.
2. [Fork](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) the [angular/angular](https://github.com/angular/angular/fork) repo.
5. In your forked repository, make your changes in a new git branch:
3. In your forked repository, make your changes in a new git branch:
```shell
git checkout -b my-fix-branch main
```
```shell
git checkout -b my-fix-branch main
```
6. Create your patch, **including appropriate test cases**.
4. Create your patch, **including appropriate test cases**.
7. Follow our [Coding Rules](#rules).
5. Follow our [Coding Rules](#rules).
8. Run the full Angular test suite, as described in the [developer documentation][dev-doc], and ensure that all tests pass.
6. Run the full Angular test suite, as described in the [developer documentation][dev-doc], and ensure that all tests pass.
9. Commit your changes using a descriptive commit message that follows our [commit message conventions][commit-message-guidelines].
7. Commit your changes using a descriptive commit message that follows our [commit message conventions][commit-message-guidelines].
Adherence to these conventions is necessary because release notes are automatically generated from these messages.
```shell
git commit --all
```
Note: the optional commit `--all` command line option will automatically "add" and "rm" edited files.
```shell
git commit --all
```
10. Push your branch to GitHub:
Note: the optional commit `--all` command line option will automatically "add" and "rm" edited files.
```shell
git push origin my-fix-branch
```
8. Push your branch to GitHub:
11. In GitHub, send a pull request to `angular:main`.
```shell
git push origin my-fix-branch
```
9. In GitHub, send a pull request to `angular:main`.
### Reviewing a Pull Request
@@ -133,16 +145,15 @@ If we ask for changes via code reviews then:
3. Create a fixup commit and push to your GitHub repository (this will update your Pull Request):
```shell
git commit --all --fixup HEAD
git push
```
```shell
git commit --all --fixup HEAD
git push
```
For more info on working with fixup commits see [here](./contributing-docs/using-fixup-commits.md).
For more info on working with fixup commits see [here](./contributing-docs/using-fixup-commits.md).
That's it! Thank you for your contribution!
##### Updating the commit message
A reviewer might often suggest changes to a commit message (for example, to add more context for a change or adhere to our [commit message guidelines][commit-message-guidelines]).
@@ -150,69 +161,68 @@ In order to update the commit message of the last commit on your branch:
1. Check out your branch:
```shell
git checkout my-fix-branch
```
```shell
git checkout my-fix-branch
```
2. Amend the last commit and modify the commit message:
```shell
git commit --amend
```
```shell
git commit --amend
```
3. Push to your GitHub repository:
```shell
git push --force-with-lease
```
```shell
git push --force-with-lease
```
> NOTE:<br />
> If you need to update the commit message of an earlier commit, you can use `git rebase` in interactive mode.
> See the [git docs](https://git-scm.com/docs/git-rebase#_interactive_mode) for more details.
#### After your pull request is merged
After your pull request is merged, you can safely delete your branch and pull the changes from the main (upstream) repository:
* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
- Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
```shell
git push origin --delete my-fix-branch
```
```shell
git push origin --delete my-fix-branch
```
* Check out the main branch:
- Check out the main branch:
```shell
git checkout main -f
```
```shell
git checkout main -f
```
* Delete the local branch:
- Delete the local branch:
```shell
git branch -D my-fix-branch
```
```shell
git branch -D my-fix-branch
```
* Update your local `main` with the latest upstream version:
```shell
git pull --ff upstream main
```
- Update your local `main` with the latest upstream version:
```shell
git pull --ff upstream main
```
## <a name="rules"></a> Coding Rules
To ensure consistency throughout the source code, keep these rules in mind as you are working:
* All features or bug fixes **must be tested** by one or more specs (unit-tests).
* All public API methods **must be documented**.
* We follow [Google's TypeScript Style Guide][ts-style-guide], but wrap all code at **100 characters**.
An automated formatter is available, see [building-and-testing-angular.md](./contributing-docs/building-and-testing-angular.md#formatting-your-source-code).
- All features or bug fixes **must be tested** by one or more specs (unit-tests).
- All public API methods **must be documented**.
- We follow [Google's TypeScript Style Guide][ts-style-guide], but wrap all code at **100 characters**.
An automated formatter is available, see [building-and-testing-angular.md](./contributing-docs/building-and-testing-angular.md#formatting-your-source-code).
We have very precise rules over how our Git commit messages must be formatted:
```
<type>(<scope>): <short summary>
```
@@ -224,21 +234,18 @@ See [Commit Message Guidelines][commit-message-guidelines] for details.
Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code
changes to be accepted, the CLA must be signed. It's a quick process, we promise!
* For individuals, we have a [simple click-through form][individual-cla].
* For corporations, we'll need you to
- For individuals, we have a [simple click-through form][individual-cla].
- For corporations, we'll need you to
[print, sign and one of scan+email, fax or mail the form][corporate-cla].
If you have more than one GitHub accounts, or multiple email addresses associated with a single GitHub account, you must sign the CLA using the primary email address of the GitHub account used to author Git commits and send pull requests.
The following documents can help you sort out issues with GitHub accounts and multiple email addresses:
# If that doesn't work, try it with the expunge flag
pnpm bazel clean --expunge
```
## High level architecture
The angular.dev website is a modern Angular application that utilizes Static Site Generation (SSG) to deliver pre-rendered, high-performance content to users.
The architecture is designed for efficiency and maintainability:
Content Sources: The documentation is sourced from two main places within the monorepo. The guides and tutorials are written in Markdown files, while the API reference pages are automatically generated by extracting documentation directly from the TypeScript source code of the Angular framework packages.
Build Process: During the build process, the Markdown files are converted into HTML. Simultaneously, the API documentation is extracted from the code comments. This content is then integrated into the Angular application.
# Generating data for `angular.dev/api` CDK packages
This script updates the Angular CDK api JSON files stored in `adev/src/content/cdk`. This files are used to generate the [angular.dev api](https://angular.dev/api) pages for the CDK packages.
This script updates the Angular CLI help JSON files stored in `adev/src/content/cli/help`. This files are used to generate the [angular.dev CLI](https://angular.dev/cli) pages.
This script updates documentation assets from other repositories for `angular.dev`.
## Aria Packages
Updates the Angular Aria API JSON files in `adev/src/content/aria`, used for the [angular.dev API](https://angular.dev/api) pages.
## CDK Packages
Updates the Angular CDK API JSON files in `adev/src/content/cdk`, used for the [angular.dev API](https://angular.dev/api) pages.
## CLI Help Pages
Updates the Angular CLI help JSON files in `adev/src/content/cli`, used for the [angular.dev CLI](https://angular.dev/cli) pages.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Andrew Scott