This allows us to test the template pipeline TS emit (where we already
caught a bug using this), and also allows us to test the proper
recognition of e.g. `input`, `output`, `viewChild` etc- while also
testing type-checking.
Currently the TS generated output (not JIT), breaks at runtime because
we emit all variables using the `Final` modifier. i.e. constants.
This breaks shallow references when we run our acceptance signal
tests using AOT.
Currently, a listener on an element containing a dash, will result in
runtime errors because the function name will be generated using a dash.
e.g.
```
function MyApp_Template_some-comp_bla_0() {}
```
throwing with a syntax error due to the dash. We fix this by re-using
the sanitize identifier function from the current template definition
builder.
Compiler portion for supporting content queries in signal components.
This is based on the preparation work, for detecting such queries. See
previous commits.
Add a test verifying that the onDirty callback:
- does not fire initially;
- fires once when a query is marked dirty (even if there are
multiple setDirty notifications).
Make sure that null, undefined and NaN interpolated values
are rendered consistently with the current ivy approach:
- null and undefined are rendered as empty strings;
- NaN is rendered as-is.
DOM bindings are wrapped into computed now so their values
are memoized. As the result expression in DOM bindings are
re-evaluated when a component is change-detected.
With the recent changes for local refs, we now also generate all
variables in the create block.
This works overall, but we end up with incorrect variable optimization
because calls of `nextContext` in listener functions end up tricking
the optimization logic into thinking that the outer `nextContext` calls
in the create block are _relevant_ for the listener function body.
e.g.
```
if (create) {
const _bla = nextContext();
i0.listener(() => {
restoreView();
const _ctx1 = nextContext();
/* do somth with _ctx1 */
});
}
```
`_bla` can safely be removed here, even though a `ContextRead/Write` has
occurred inside the listener operation. We process listeners separately.
We recently changed the pure function code to look for
all operations in a view. This ended up causing pure functions
to be generated for expressions in listeners. This might be fine
but diverges from the existing TDB and breaks compliance tests.
Culprit commit: https://github.com/angular/angular/commit/a61e41c88049eb12a0b23b1e7fa49a16b0eb91d7
New implementation of type-checking for signal inputs. Much simpler, and
without causing signficant type check block changes that would require
more changes to the language service completion logic / or rewrites of
more than 50+ handwritten code output tests for type check blocks.
See previous commits for other explored solutions.
NOTE: This is very experimental and manual type check block code is not
updated. All of this complexity arises from the fact of attempting to
support bindings where they go to the same directive with multiple
inputs of the same name.
Potentially we can deprecate this behavior for input signal based
components and avoid this complexity. Alternative solution is to simply
repeat expression diagnostics if a binding goes to two same fields.
This reverts commit 2e3fe0747990647c5cfbba5429e90ed621b18e6e.
Based on the recent design discussion we are going to express property
interpolation as a computed function and reuse the propertyCreate
infrastructure.
This commit adds support for local refs in signal property bindings, by
generating variables in the creation block. To implement this support:
* a new instruction shallowReference() is introduced, which is not tied to
the current view context.
* variables are now generated for creation mode as well as update mode
* a new template pipeline pass (`phaseCreationVarColocation`) handles
ordering of reference variable declaration and assignment in the creation
block (guaranteeing references are only read after declarations).
Previously the compiler output AST did not support using
`o.BinaryExpression` for assignments (as TypeScript does). Instead
`o.WriteVarExpr` is defined, which only allows writing to string named
variables.
There was an interesting issue that surfaced in the type checking
tests. Previously an input was type-checked using an expression like:
```ts
myDir.input = myrDir.input2 = userExpr
```
Note how the user expression was only specified once. With signals for
type-checking we cannot do this because both inputs cannot use the same
expression unless we extract it into a separate variable. This is what
this commit implemements.
```ts
const x1 = userExpr;
toWriteableSignal(myDir.input).set(x1);
toWriteableSignal(myDir.input2).set(x2);
```
Note: Even if no input is bound, due to e.g. the `inputs` decorator
field being used and no statically analyzable class member being
discoverable- the user expression should be *evaluated*. This was
something we broke with the initial signal input prototyping.
This commit adds a test for a case of a binding targetting
multiple inputs with the same name. Test passes for both
signal based components as well as a mix of zone and signal
based components.
Previously, input signals had a bug where when their backing computation or
value would change, it would notify consumers, but consumers would poll the
input signal to check if its value really changed. This polling operation
would transitively poll the input signal's previous dependencies, which of
course would report that they hadn't changed.
This commit adds logic in the `InputSignalImpl` to skip dependency polling
whenever the signal's backing computation or value changes, until that value
is read for the first time.
Compliance tests do not depend on the real typings for
`@angular/core`, but rather a fake core package is used.
We want to be able to write compliance tests using signals, so we should
add some rough types to the fake core package. This will also be useful
in `fake_core` for type checking tests.
Before this fix bindings to the same input from multiple LViews didn't
work properly as the binding expression was assigned to LView only on
the first create pass (instead of assigning on each durective usage pass).
This commit adds the `ConsumesVarsTrait` to `PropertyCreateOp` which causes
vars to be counted for use in the virtual instructions it might add. This
allows the DOM test to pass.
Previously the template pipeline would prefer to use a local variable
definition in favor of ctx. This commit improves the logic to prefer `ctx`
for the root view even if a variable for the context is available.
* splits propertyCreate virtual instructions into DOM vs zone inputs
* integrates with `InputSignal` setting (untested)
* deletes old interfaces/virtual_property impl in favor of Paul's
A minimal change to full compilation mode to work in local mode. Now compiler can compile components without ctor injections, though the compiled code missing the following items which will be added in subsequent commits:
* it does not produce `dependencies` for component definition.
* it fails if component has ctor injection
PR Close#50545
The compiler will only include analysis and compile phases in local mode. Also a new `compileLocal` method is added to the annotation handler for local compilation.
This commit makes no change to the full/partial compilation code paths.
PR Close#50545
Updates the esbuild-based browser application builder developer preview guide's known issue section as follows:
* Removed global script/style hashing problem (fixed)
* Added long build times with Sass and pnpm/Yarn PnP
PR Close#51006
⚠️Disclaimer⚠️ this PR implements syntax that is still in an open RFC. It will be adjusted once the RFC is closed.
These changes implement the `BlockGroup` and `Block` AST nodes that will then be used to generate instructions based on the new syntax. A `BlockGroup` is a container for `Block` instances. The first block of a block is always implicit and required while any subsequent blocks are optional.
PR Close#50953
An internal compiler option named `supportJitMode` is now available for use by the Angular CLI.
This option currently controls the emit of NgModule selector scope information. This emitted
information is only needed in AOT mode when an application also uses JIT. However, AOT mode
combined with JIT mode is not currently supported nor will work in the Angular CLI. With
the Angular CLI, JIT mode is only supported if the entire application is built in JIT mode.
Without this option, the CLI needs to manually perform a code transform to remove the information
and also replicate TypeScript's import eliding. This is can be a complicated operation and must
be continually kept up to date with any changes to both the Angular compiler and TypeScript.
The introduction of this new option alleviates these concerns while also removing several build
time actions that would otherwise need to be performed on every application build.
PR Close#51007
Removing the renderer from cache is not needed when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is enabled. This change retains the behaviour of keeping the renderer cached for the entire lifecycle of the application the same way it is done when `REMOVE_STYLES_ON_COMPONENT_DESTROY` is disabled.
This seems to have be causing an increase in scripting. See: http://b/290666638
PR Close#51005
This commit fixes a memory leak.
`_namespaceLookup` was cleared before the call to `processLeaveNode()` which was using the lookup.
Without that lookup `clearElementCache()` wasn't called thus keeping a reference to the element.
Fixes#24197 & #50533
PR Close#50929
⚠️Disclaimer⚠️ this PR implements syntax that is still in an open RFC. It will be adjusted once the RFC is closed.
These changes extend the lexer to recognize the concepts of a block group (`{#foo paramA; paramB}{/foo}`) and a block (`{:foo paramA; paramB;}`) which will be useful later on for the control flow and defer proposals. Block groups can be used anywhere and require a closing tag while block can only be used inside of a block.
The idea is that in the next PRs the markup AST will be expanded to have some more specialized node like `ConditionalBlock` or `DeferBlock` which will then be turned into instructions.
PR Close#50895
This commit adds the ability to generate attribute instructions as a result of property bindings such as `[attr.foo]='bar'` or `attr.foo='{{bar}}'`. "Singleton" interpolations, such as the previous example, will also be transformed into a simple `attribute` instruction.
PR Close#50818
Prior to this change, we've used `componentDef.id` as a key in a Map that acts as a cache to avoid re-creating injector instances for standalone components. In v16, the logic that generates the id has changed from an auto-incremental to a generation based on metadata. If multiple components have similar metadata, their ids might overlap.
This commit updates the logic to stop using `componentDef.id` as a key and instead, use the `componentDef` itself. This would ensure that we always have a correct instance of an injector associated with a standalone component instance.
Resolves#50724.
PR Close#50954
move the child component </view> tag just before the closing </app-child> and after the </app-inspector> tag since the app-inspector component is a child of the app-child component
PR Close#50898
replace the word Parent with Child in the code example since it's the child component that should be mentioned at this level of the code
PR Close#50898
JSDoc comments should start with 2 stars or the annotations would not be picked up by the AIO workflow.
With this fix, the internal methods are no longer visible in the doc.
PR Close#50893
JSDoc comments should start with 2 stars or the annotations would not be picked up by the AIO workflow.
With this fix, the internal methods are no longer visible in the doc.
PR Close#50893
The option 'local compile' is added for the test cases, and the locally compiled file for an input `abc.ts` is compared by default with the file `abc.local.js`. This allows to use the same input `abc.ts` for both full compilation (compared with `abc.js`) and local compilation (compared with `abc.local.js`). An example is provided in the next commit when compliance tests are added for the NgModule local compilation.
PR Close#50577
The new interface is discrete-unioned with the existing interface to cover the cases for local and global (i.e., full and partial) compilation modes.
This change of interface required some adjustmeents cross repo which explains the changes made to other files.
PR Close#50577
All attempts related to obtaining R3Reference for bootstrap, imports, exports and declarations are cut in local compilation mode.
This will allow the analysis to pass without any error diagnostics, but the result is a quite empty meta info. Next commits will add data to the meta so that the NgModule can be compiled more accurately.
PR Close#50577
In the past, we had an implementation of the "Angular 2" router that
also worked with AngularJS. Published as `@angular/router`. We continued
to expose that router implementation in G3 and some applications still
use it. Now, when upgrading, they are seeing issues where the router
throws because it cannot find a route config/ or `$canActivate` on the
controller- simply because there is no `controller` function for
downgraded components.
We can fix this and unblock the update by simply ensuring a controller
function is defined.
PR Close#50871
Previously, the template pipeline save/restore view logic only added the
save/restore operation in listeners inside embedded views. However, this
operation is also needed if local refs are accessed within a listener body.
This commit updates the logic to detect more accurately whether save/restore
is needed.
PR Close#50834
This commit updates the implementation of the `getNativeRequestAnimationFrame`
and checks whether the current code runs in the browser before retrieving
`requestAnimationFrame`. `requestAnimationFrame` is not available when the code
is running in the Node.js environment. We have to fallback to `setTimeout` for
delaying the change detection.
PR Close#50820
Even though the action is already guarded to only run for
organization members that manually trigger the action, we
can reduce the permissions by using a GitHub token without
any permissions to post the result comment.
The expression `a()?.b` should expand into `(tmp = a()) === null ? null : tmp.b`, in order to avoid calling the function `a()` twice.
This commit modifies the null-safe-expansion algorithm to emit temporary assignments, and provides the reification code to actually generate the declarations, assignments, and reads.
Note also that, with our bottom-up algorithm, there are some tricky cases when a function call exists inside an indexed access, such as `f1()?.[f2()?.a]?.b`. We add some special logic to avoid generating a double-assignment to the temporary storing the result of `f2()`.
Finally, there are opportunities to reuse the same temporary in expressions like `a?.[f()]?.[f()]`. We save this for the next commit.
PR Close#50688
Unlike other steps of the tutorial, Lesson 3, Step 1 of the tutorial does not specify that the user should be in the project directory before creating the new component.
PR Close#50849
Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.
This commit, updates this destroy logic to be call the render destroy once the animations complete.
This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5
PR Close#50860
We've recently marked the ngtsc test as flaky for the Windows
job. We should not attempt running tests 3 times locally. This
negatively impacts the debugging/developer workflow.
Instead, flaky test attempts can still be made on CI. Using the
default attempt count of 3.
PR Close#50852
Currently when `yarn benchmarks run-compare` is used, the local
repository could be converted to a shallow clone. This is not
a problem but might result in confusion. We avoid this by
not performing a shallow fetch when a comparison is initiated.
The performance gains seem neglegible.
PR Close#50851
This PR fixes GC memory numbers reported by benchpress,
where previously reported amount was always 0.
This is due to the fact that Chrome browser reports GC
events as a single X event now, instead of a B / E pair
of events.
PR Close#50760
Prior to this commit, the renderer destroy method was being called before the animation complete. This is problematic when using `REMOVE_STYLES_ON_COMPONENT_DESTROY` as it causes the styles to be removed too early.
This commit, updates this destroy logic to be call the render destroy once the animations complete.
This has been reported internally in:
- http://b/271251353#comment12
- http://b/282004950#comment5
PR Close#50677
We already collect and report benchmark results for comparison runs, but
for normal benchmark runs we should do the same to make the results
more discoverable (and not in the middle of Bazel output).
PR Close#50816
Exposes the function used to transform an input on `ComponentFactory.inputs` and `ComponentMirror.inputs`. We'll need this to support input transforms in `elements`.
PR Close#50713
The previous API design for the runtime deps tracker was done with only local compilation in mind. Now if we want to use it for JIT as well then some new requirements come along which are addressed by this commit as follows:
- JIT scopes need distinct sets for directive and pipes. Thus the ScopeData interface is modified to include these info.
- JIT needs access to scopes for various operations. So methods `getNgModuleScope` and `getStandaloneComponentScope` are added to the tracker's public api.
- Test bed needs to clear the scope cache for its override mechanism. So method `clearScopeCacheFor` is added to the tracker's public api for this reason.
PR Close#50606
The types and interfaces re;ated to the runtime deps tracker are added. Also an empty implementation is added to be completed in follow up PRs (after the interfaces are confirmed in this PR).
The added files are not used anywhere, so the change should not affect anything in anyway.
PR Close#50606
The existing microbenchmarks are not widely known
and are not used to drive design / coding decissions.
At the same time those test add to the maintanance cost:
- use hand-written instructions;
- plug into runtime internals and are fragile;
- require development of mocks for the runtime internals.
Those tests are removed since they are costly to maintain
and, at the same, don't provide enough value.
PR Close#50786
An internal compiler option named `supportTestBed` is now available for use by the
Angular CLI. This option currently controls the extraction and emit of Angular class
metadata. This emitted information is only needed in AOT mode when using certain
TestBed APIs. However, AOT mode is currently not available for unit testing within
the Angular CLI. As a result, the metadata is not used within CLI generation applications
and in particular production applications. Without this option, the CLI needs to
manually perform a code transform to remove the metadata and also replicate TypeScript's
import eliding. This is can be a complicated operation and must be continually kept
up to date with any changes to both the Angular compiler and TypeScript. The introduction
of this new option alleviates these concerns.
PR Close#50604
Pawel and myself have investigated benchpress for quite some
time now, and I believe we have the most up-to-date understanding
in the team- so it would make sense to add us to the owners.
PR Close#50769
We have a lint rule configured that enforces that any abstract member
implementation uses an explicit `override` identifier. This ensures that
downstream classes will have errors if the parent abstract class
suddenly removes the abstract member.
The lint rule, living in the dev-infra repository, occasionally does
miss some places due to a temporary TS version mismatch that causes
syntax kind indices to be different. Looks like we are now matching
again and there is a new lint failure that got introduced recently. This
commit fixes that error.
PR Close#50772
Since we updated the devkit dependencies, we need to update
the browserslist DB versions in integration tests to avoid
browser mismatches causing errors like the following:
```
BrowserslistError: [BABEL] /tmp/ng-integration-test-91jP3g/test-sandbox/node_modules/zone.js/fesm2015/zone.js: Unknown version 114 of edge (While processing: "base$0$0")
```
PR Close#50772
This commit wraps the `assertNonZeroRenderedHeight` and `assertNoImageDistortion`
with `runOutsideAngular` to setup the `load` event listener outside of the Angular zone.
This was previously causing extra change detection cycles in development mode and
interfered debugging stuff.
PR Close#50723
`rev-parse` returns the original ref name in stdout, even if it wasn't
able to resolve the reference. This was preventing the upstream
resolution from never happening- causing `main` to be never resolved
to the actual SHA.
When we fetch e.g. `main`, the branch name will not be available
locally, and `rev-parse` will fail later. We can make the logic
more safe by just using `FETCH_HEAD` then.
PR Close#50767
If we try to resolve the benchmark compare ref (which may be just
`main`), we are just looking inside the PR branch- but that may
not include the `main` SHA. i.e. it's possible to run a comparison
where the PR is slightly behind of the `main` branch, or a comparison
commit from a different branch is used.
We fix this/ and simplify the logic by resolving the SHAs directly in
the TypeScript code, instead of relying on the rather brittle Bash.
Note that current solution still works, but we sometimes may not be able
to resolve to an actual SHA- causing issues as in 864bd72cb2
PR Close#50764
Currently the compare ref might be `main`. We will use that value
and put it into the GitHub results comment. This is non-ideal because
in the future `main` might be a different SHA and the results comment
would become invalid/confusing.
We fix this by resolving the actual SHA when the benchmark was
initiated.
The checkout action always assumes the main repository, but
the branch name/SHA of the pull request will be from a fork.
We fix this by using an updated action that exposes the branch
repo owner and name, so that we can check out the actual PR
branch/SHA.
PR Close#50758
This commit creates a GitHub action that runs benchmark comparisons
for a single target whenever a command comment is created by trusted
Angular organization members:
```
/benchmark-compare <compare-ref> <benchmark-target>
```
The benchmark will be run locally in Github actions, using the same
machine to minimize number deviation. The results are then printed
to the GitHub PR using a comment.
At current time, no actual "green/red" state is computed, but rather
the raw results are printed. In the future, since we have all the
metric data from the benchpress JSON logs, we could implement something
more easy to understand- but that's a follow-up/needs more discussion.
PR Close#50745
This commit creates a new script that solves the following use-cases:
- Running benchmarks. It's not trivial to figure out the benchmark
target names, and it's also easy to mess up the right Bazel flags.
- Performing comparisons. When e.g. working on a runtime senstive
change, it should be trivial to run benchmarks between the current
working stage, and a base revision (e.g. `main`).
The script takes care of both these use-cases and comes with a
prompt-based command line tool experience.
The script will also be used by a future GitHub action that can run
comparisons triggered via GitHub PR comment (by trusted team members).
PR Close#50745
This commit updates benchpress to include the text representation of
results in the JSON report. This is useful when results of multiple
tests are read from the Bazel testlogs and then printed together in
e.g. a GitHub comment, or at the end of a script (not in the middle
of the surroundings of the Bazel executions).
The text representation could have been built directly based on the
JSON raw metrics, but it would be unnecessary work and duplication
to get a similar output as with the console reporter- so we can
just include this information in the report.
PR Close#50745
A larger investigation on why this is flaky is needed. Currently the
test is flaky with around 77% sucess rate and negatively impacts team
productivity. Subjectively, as reported by team members this it's much
more flaky than a success rate of 77%.
PR Close#50718
Enables colors for Bazel in CircleCI. Bazel does not seem to
detect color support properly, but CircleCI does support such.
Colors make debugging a little easier with larger Bazel logs.
PR Close#50720
If a library is compiling with Angular v16.1.0, the library will break
for users that are still on Angular v16.0.x. This happens because the
`DirectiveDeclaration` or `ComponentDeclaration` types are not expecting
an extra field for `signals` metadata. This field was only added to the
generic types in `16.1.0`- so compilations fail with errors like this:
```
Error: node_modules/@angular/material/icon/index.d.ts:204:18 -
error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 9 type arguments.
```
To fix this, we quickly roll back the code for inserting this metadata
field. That way, libraries remain compatible with all v16.x framework
versions.
We continue to include the `signals` metadata if `signals: true` is set.
This is not public API anyway right now- so cannot happen- but imagine
we expose some signal APIs in e.g. 16.2.x, then we'd need this metadata
and can reasonably expect signal-component library users to use a more
recent framework core version.
PR Close#50714
The component exposed by the fixture is not important thus marked as `unknown`.
Exposing the fixture of the `RouterTestingHarness` allows to use the methods & properties of that fixture and makes it compatible with testing libraries relying on `ComponentFixture`
Fixes#48855
PR Close#50280
If the compiler CLI is running through closure compiler, the trait
decorator handlers are converted from classes to functions as ES5
is picked as default output target for the bundled version.
The problem is that currently all trait handlers end up having the
same `name`. i.e. an empty string, and therefore adopting previous
traits from a previous build iteration result in the incorrect handler
being used for e.g. registrering, compiling etc- causing
ambiguous/confusing errors down the line in other parts.
We can look into changing the output target in the future, but even
then we are safer using an actual literal due to property renaming.
```$$closure$$NgModuleDecoratorHandler = function() {}`.
It is is questionable if we should just simply NOT run the compiler
through JSCompiler.
PR Close#50673
Before this commit, links to methods had to rely on a custom title (or the method name would be displayed).
With this commit, {@link MyClass#myMethod} will ouput a link as `MyClass#myMethod`.
This has a 2nd advantage : We can now rely on the validation by the `checkAnchorLinksProcessor` to ensure the method actually exist.
This commit is part of #50110 to improve linking in the documentation.
PR Close#50110
Extend toSignal to accept any Subscribable (instead of only Observable)
for consistency with AsyncPipe and for broader compatibility with any
observable library (that is compatible with the Subscribable interface).
This is only a type change as the implementation does not use anything
else than the Subscribable interface anyway.
PR Close#50162
Angular's null-safe access operators differ from Javascript's built-in semantics, in that they short-circuit to `null` instead of `undefined`. This necessitates providing a custom transformation, instead of relying on Typescript or Javascript itseld.
The old TemplateDefinitionBuilder uses a top-down approach based on the Visitor pattern, in which it recursively extracts the left-most safe access, and hoists it to a null check at the top. See `expression_converter.ts` for details.
In this commit, we replace that approach with a new bottom-up algorithm, as part of the template pipeline. This requires an intermediate expression type to represent the not-yet-expanded ternary operators, and is split into its own pass.
Null-safe function calls are not yet implemented, since they will rely on a future temporary variable allocation pass.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50594
Create a pass that expands nullish coalescing operators into null checks.
This is not yet finished because we need to emit temporary variable assignments, which we will do using a future temporary variable allocation pass. Also, TemplateDefinitionBuilder is a bit quirky, and we still need to exactly match its behavior.
Nevertheless, this is good enough to prevent the diffs from getting ruined as a result of nullish coalescing operations.
PR Close#50594
It is sometimes useful to clone an expression tree, in order to copy it and mutate it in a phase, without affecting other subtrees due to the copy-by-reference.
PR Close#50594
Refactor attribute and property binding ingestion and add an attribute extraction phase
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Dylan Hunn <dylhunn@users.noreply.github.com>
Only add the value to the ElementAttributes map for style and attribute kinds
Other kinds should not have their value represented in the consts array
Add missing attribute ingesiton for templates
Unify how template and element bindings are ingested
This resolves the issue of missing listener attributes on templates. In
order to avoid emitting extraneous instructions, listener ops on
templates are stripped in the attribute extraction phase instead.
Handle different binding types separately in ingest
Cleanup code and comments
Disable test that fails on new explicit error.
Previously the test was passing because ingestPropertyBinding treated
attribute bindings as normal bindings which happened to be ok for the
particular test. Now there's an explicit error that attrbiute bindings
aren't yet handled which causes the test to fail
Address feeback
PR Close#50664
This commit refactors the code of NgOptimizedImage directive to switch from getter/setter approach to convers inputs to use the `transform` function instead.
PR Close#50580
This commit updates an internal hydration logic to make sure that the content of components with i18n blocks is cleaned up before we start rendering it.
Resolves#50627.
PR Close#50644
Updates the guide for writing `ng add` schematics to include the new authoring utilities. I've also removed the `NodePackageInstallTask` because it's redundant.
PR Close#50667
Add a flag to disable specific tests when testing the template pipeline
Mark the currently failing tests
Add the template pipeline tests to CI
Update package.json
Co-authored-by: Paul Gschwendtner <paulgschwendtner@gmail.com>
PR Close#50582
Add info about importing RouterLink and RouterOutlet.
The existing document results in an error. The error indicates that the anchor element doesn't have the binding property for routerLink.
The corresponding module (RouterModule) should be imported in the component template.
Add description for RouterModule in housing-location component
The description is added to fix the issue with the anchor element tag binding.
PR Close#50348
The existing DevTools demo app that is used for developing on DevTools is exclusively an NgModule application. This commit creates a copy of the old demo app but with no NgModules and only standalone APIs/Components/Directives/Pipes
PR Close#48533
Clarify the role of dev-dependencies. Dependencies are required for production
ie, execution of an application, whereas devDependencies are required for
developing as well as *building* the application (dev and prod build both)
PR Close#50619
This commit introduces a new `HttpBackend` implentation which makes requests using the fetch API
This feature is a developer preview and is opt-in.
It is enabled by setting the providers with `provideHttpClient(withFetch())`.
NB: The fetch API is experimental on Node but available without flags from Node 18 onwards.
PR Close#50247
This commits adds configures `//packages/common/http/test` to use Node.js 18 toolchain which is needed to test the fetch implementation which use Node.js 18 APIs.
We also disable RBE for this target as it doesn't work with Node.js 18 right now. See https://github.com/angular/dev-infra/issues/1017
PR Close#50247
In local mode compilation the TS semantic check issues tons of diagnostics due to the fact that the file dependencies (.d.ts files) are not available in the program. So it needs to be disabled.
This commit should not cause any issue for the exsiting projects as it just removes a diagnostic in the local compilation mode.
PR Close#50486
Fixes an error that surfaced in #50580 where the compiler was throwing an error in JIT mode when reading the result of `compileDirectiveDeclaration`. It is caused by the fact that input transform functions were being passed around directly, instead of being wrapped in an AST node.
PR Close#50600
Prior to this change in some cases errors tht happen during routing were not being surfaced. This is due to the fact that the router has floating promises, and the platform was being destroyed prior to these being settled.
PR Close#50587
Components are implied to be self-referencing, but if they explicitly set themselves in the `imports` array, they would throw an error because we weren't filtering them out.
Fixes#50525.
PR Close#50559
Previously, with `mergeMap` we did not cancel previous subscriptions to zoneIsStable which caused the application to be stablized before hand.
Closes: #50562
PR Close#50573
Turbo is being deprecated and can be replaced by npm with some tweaks. In particular, the installation step needs `--legacy-peer-deps` to mimic turbo's behaviour.
PR Close#50576
In https://github.com/angular/angular/pull/49144 we introduced a change to only path `Promise.prototype.then` due to Node.js `SafePromise` complaining about `Promise.prototype.then` called on incompatible receiver. This however introduced a number of regressions. This commit reverts this change and re-introduces the changes to patch the entire promise on Node.
The original `SafePromise` problem is no longer reproducible as of Node.js version 18.13+ as it was addressed as part of https://github.com/nodejs/node/pull/45175.
While the Angular CLI does not yet generate ESM server bundles, users using ESM with dynamic imports will require using Node.js 18.13 or later.
Closes#50513, closes#50457, closes#50414 and closes#49930
PR Close#50552
This commit adds end-to-end support for pipes in the template pipeline. This
support works across multiple steps:
1. Pipes are first ingested as `ir.PipeBindingExpr`s during the ingest step.
2. A "pipe creation" phase inserts operations to instantiate each required
pipe, based on the presence of those `ir.PipeBindingExpr`s.
3. A "variadic pipe" phase transforms pipes with more than 4 arguments into
variadic pipe bindings, which use a literal array argument. This literal
array will be later memoized into a pure function invocation.
4. A special phase (`phaseAlignPipeVariadicVarOffset`) reconciles a
difference in variable slot assignment logic between the template pipeline
and the `TemplateDefinitionBuilder`, to ensure that the pipeline output can
pass the existing tests. This phase should not affect runtime semantics and
can be dropped once matching output is no longer necessary.
5. Reification emits pipe instructions based on the argument count.
PR Close#50118
The logic for `insertBefore` in template pipeline operation lists has a bug
when inserting at the end of a list. This commit fixes the safety assertions
to be more accurate.
PR Close#50118
This commit transforms literal arrays and maps within expressions in the
template pipeline into `ir.PureFunctionExpr` expressions, in order to
memoize the allocation of objects and arrays inside the update pass of
change detection.
PR Close#50118
Previously the helper operations for transforming expressions in the
template pipeline would only operate against `ir.Expression`s. This commit
changes them to process `o.Expression`s instead, paving the way to use them
for transformations of native expressions in addition to IR expressions.
PR Close#50118
This commit adds support for generating pure functions in the output
`ConstantPool` based on `ir.PureFunctionExpr`s. Note that nothing yet
generates these pure function forms - in the future they will be used both
in the implementation of the `pipeBindV` instruction as well as literal
arrays and maps in expressions.
PR Close#50118
This commit adds the `ConstantPool` to `ComponentCompilation`, making it
available to all phases of the template pipeline. Constant extraction is a
common operation in pipeline phases.
PR Close#50118
This commit adds a "shared constant" concept to the `ConstantPool`. This
is a generalization of the `LiteralFactory` concept the pool previously
supported. For stability's sake, the existing concept isn't modified, but
could be unified in the future.
PR Close#50118
This commit introduces a new trait `UsesVarOffset` for expressions which
consume variable slots and thus need an offset into the variable slot space
to locate their slots.
PR Close#50118
The template pipeline implements variadic instruction generation for text
node interpolation using an `InterpolationConfig` concept. This commit
refactors that code to generalize it to work not just with interpolations,
but with all instruction generation for variadic instructions.
PR Close#50118
This commit adds support to the template pipeline to ingest and process
literal array and map expressions. A future phase may process these literal
expressions and memoize them into pure functions where required.
PR Close#50118
Prior to this commit, comments in CSS were being removed. This caused inline sourcemaps to break to the shift in lines.
This caused sourcemaps to break in the ESBuild based builder as this always adds comments at the top of the file with the filename.
Example
```css
/* src/app/app.component.scss */
* {
color: red;
background: transparent;
}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9hcHAvYXBwLmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBOzs7Ozs7Ozs7Q0FBQTtBQVdBO0VBQ0UsVUFBQTtFQUNBLHVCQUFBO0FBREYiLCJzb3VyY2VzQ29udGVudCI6WyIvL01FRElBIFFVRVJZIE1BTkFHRVJcbi8qXG4gIDAgLSA2MDA6IFBob25lXG4gIDYwMCAtIDkwMDogVGFibGV0IHBvcnRyYWl0XG4gIDkwMCAtIDEyMDA6IFRhYmxldCBsYW5kc2NhcGVcbiAgMTIwMCAtIDE4MDA6IE5vcm1hbCBzdHlsZXNcbiAgMTgwMCsgOiBCaWcgRGVza3RvcFxuICAxZW0gPSAxNnB4XG4gIFRoZSBzbWFsbGVyIGRldmljZSBydWxlcyBhbHdheXMgc2hvdWxkIHdyaXRlIGJlbG93IHRoZSBiaWdnZXIgZGV2aWNlIHJ1bGVzXG4gIEZpeGluZyBPcmRlciA9PiBCYXNlICsgVHlwb2dyYXBoeSA+PiBHZW5lcmFsIExheW91dCArIEdyaWQgPj4gUGFnZSBMYXlvdXQgKyBDb21wb25lbnRcbiovXG5cbioge1xuICBjb2xvcjogcmVkO1xuICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0= */
```
Closes#50308
PR Close#50346
This commit wraps the actual subscription/unsubscription in the `async`
pipe with `untracked`, to ensure that any signal reads/writes which might
take place in `Observable` side effects are not attributed to the template.
Fixes#50382
PR Close#50522
The PreloadLinkCreator instance was assigned to a variable named preloadLinkChecker, which is confusing because PreloadLinkChecker is also a thing.
PR Close#50521
Before this commit, building everything to run `@angular/core` tests:
```
INFO: Elapsed time: 76.496s, Critical Path: 72.92s
INFO: 225 processes: 125 internal, 5 linux-sandbox, 2 local, 93 worker.
INFO: Build completed successfully, 225 total actions
```
After:
```
Use --sandbox_debug to see verbose messages from the sandbox
INFO: Elapsed time: 15.952s, Critical Path: 10.75s
INFO: 200 processes: 128 internal, 4 linux-sandbox, 2 local, 66 worker.
```
This being on a specialist Cloudtop.
PR Close#50426
[x] The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
[] Tests for the changes have been added (for bug fixes / features)
[] Docs have been added / updated (for bug fixes / features)
What kind of change does this PR introduce?
[] Bugfix
[] Feature
[] Code style update (formatting, local variables)
[] Refactoring (no functional changes, no api changes)
[] Build related changes
[] CI related changes
[] Documentation content changes
[x] angular.io application / infrastructure changes
[] Other... Please describe:
[] Yes
[x] No
Based on information provided [here](https://github.com/WebGDEProgram/main/tree/master/Angular)
PR Close#49759
According to the HTML specification most attributes are defined as strings, however some can be interpreted as different types like booleans or numbers. [In the HTML standard](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes), boolean attributes are considered `true` if they are present on a DOM node and `false` if they are omitted. Common examples of boolean attributes are `disabled` on interactive elements like `<button>` or `checked` on `<input type="checkbox">`. Another example of an attribute that is defined as a string, but interpreted as a different type is the `value` attribute of `<input type="number">` which logs a warning and ignores the value if it can't be parsed as a number.
Historically, authoring Angular inputs that match the native behavior in a type-safe way has been difficult for developers, because Angular interprets all static attributes as strings. While some recent TypeScript versions made this easier by allowing setters and getters to have different types, supporting this pattern still requires a lot of boilerplate and additional properties to be declared. For example, currently developers have to write something like this to have a `disabled` input that behaves like the native one:
```typescript
import {Directive, Input} from '@angular/core';
@Directive({selector: 'mat-checkbox'})
export class MatCheckbox {
@Input()
get disabled() {
return this._disabled;
}
set disabled(value: any) {
this._disabled = typeof value === 'boolean' ? value : (value != null && value !== 'false');
}
private _disabled = false;
}
```
This feature aims to address the issue by introducing a `transform` property on inputs. If an input has a `transform` function, any values set through the template will be passed through the function before being assigned to the directive instance. The example from above can be rewritten to the following:
```typescript
import {Directive, Input, booleanAttribute} from '@angular/core';
@Directive({selector: 'mat-checkbox'})
export class MatCheckbox {
@Input({transform: booleanAttribute}) disabled: boolean = false;
}
```
These changes also add the `booleanAttribute` and `numberAttribute` utilities to `@angular/core` since they're common enough to be useful for most projects.
Fixes#8968.
Fixes#14761.
PR Close#50420
This commits refactors the HTTP client to use `InitialRenderPendingTasks` instead of Zone.js macrotask. This is another approach to https://github.com/angular/angular/pull/50406 which was revert due to a failure in G3.
PR Close#50425
This commit updates the `ApplicationRef.isStable` API to account for
pending rendering task. This is needed as once a pending rendering task
is done, new macrotask and microtask could be created which previously caused these not
to be intercepted and thus ignored when doing SSR.
PR Close#50425
At this point in the tutorial we are still talking about the `getHeroes()` method. Corrected the method name to reflect that since the final piece of code within this section is for `getHeroes()`
PR Close#50479
Injecting `ViewContainerRef` into a component makes it effectively a container. The leave animation wasn't triggered on containers before this fix.
fixes angular#48667
PR Close#48705
Previously, we've used to have server-specific logic for HttpClient, so there was a need to re-provide it with the right config. Since v16, that logic was refactored and there is no need to re-provide HttpClient anymore. The code in the `provideServerRendering()` was retained for historical reasons and it makes application configuration more difficult, because it forces developers to copy HttpClient config into server config as well (otherwise it would not be take into account).
This commit removes the `provideHttpClient()` call from the `provideServerRendering()` function. This is **not** a breaking change, since we've also merge browser application config in the `app.config.server.ts`, so if an application is configured to use HttpClient, it will continue to work on both client and server sides.
Resolves#50454.
PR Close#50459
We have a code path that accesses the `originalKeywordKind` property which logs a deprecation warning in version 5.1, but isn't available in some of the earlier versions that we support. These changes add a compatibility layer that goes through the non-deprecated function, if it exists.
PR Close#50460
This commit schedules the macrotask creation to happen before the XHR `loadStart` event. This is needed as in some cases, Zone.js becomes stable too early.
With this commit, we also update the internal `createBackgroundMacroTask` method to use Zone.js `scheduleMacroTask` as otherwise the `setTimeout` would cause `fakeAsync` tests to fail due to pending timers.
Closes#50405
PR Close#50406
When an embedded view injector is present anywhere above a node in the tree, the `Self` flag was effectively ignored. With this change, embedded view injectors are not checked at all when the `Self` flag is present, because resolution should stop at the current node before reaching any embedded view injector(s).
Fixes#49959
PR Close#50270
We still seem to be having Gulp installed for the ZoneJS changelog
generation. Arguably this can be replaced with a simpler JS script,
but in either case, this commit removes an unused file from the old
Gulp task setup.
PR Close#50428
Lesson 11 proposes to add styles to the `details.component.css` file, which isn't created with the current command. The change brings the component creation to consistency with the other components in the first app tutorial.
PR Close#50390
As a preliminary work for #50399, I'd like to add this test to see the effect of treeshaking that will be brought by the incomming refactoring of the AnimationModule.
This is animations test ported to standalone.
PR Close#50413
Remove convertIndexImportShorthand tsickle option. It's going to be
removed from tsickle in https://github.com/angular/tsickle/pull/1442.
`false` is the default value, so setting it here has no effect
currently.
PR Close#50343
Since v15, `protected` class member can be used in templates, Inputs & Outputs.
Other Decorated class members, like @HostBindings or Children queries can be private.
Fixes#27467
PR Close#50398
Adds the necessary compiler changes to support input transform functions. The compiler output has changed in the following ways:
### Directive handler
The directive handler now extracts a reference to the input transform function and it resolves the type of its first parameter. It also asserts that the type can be referenced in the compiled output and that it doesn't clash with any pre-existing `ngAcceptInputType_` members.
### .d.ts
In the generated declaration files the compiler now inserts an `ngAcceptInputType_` member for each input with a `transform` function. The member's type corresponds to the type of the first parameter of the function, e.g.
```typescript
// foo.directive.ts
@Directive()
export class Foo {
@Input({transform: (incomingValue: string) => parseInt(incomingValue)}) value: number;
}
// foo.directive.d.ts
export class Foo {
value: number;
static ngAcceptInputType_value: string;
}
```
### Type check block
If an input has `transform` function, the TCB will use the type of its first parameter for the setter type. This uses the same infrastructure as the `ngAcceptInputType_` members.
### Directive declaration
The generated runtime directive declaration call now includes the `transform` function in the `inputs` map, if the input is being transformed. The function will be picked up by the runtime in the next commit to do the actual transformation.
```typescript
// foo.directive.ts
@Directive()
export class Foo {
@Input({transform: (incomingValue: string) => parseInt(incomingValue)}) value: number;
}
// foo.directive.js
export class Foo {
ɵdir = ɵɵdefineDirective({
inputs: {
value: ['value', 'value', incomingValue => parseInt(incomingValue)]
}
});
}
```
PR Close#50225
Closes#49686
Revert "docs(docs-infra): Remove unused annotation template (#50114)" (#50206)
This reverts commit a1ca162fd6.
This commit causes failures in g3, because `@Annotation` is load-bearing for
tsickle's decorator downleveling transformation.
PR Close#50206
refactor(compiler): generate ng-container instructions (#50008)
ElementContainer instructions refer to `ng-container` element tags, which don't produce corresponding DOM nodes. Much like element instructions, container instructions can also have their start and end tags combined.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Andrew Scott <atscott@users.noreply.github.com>
PR Close#50008
refactor(compiler): handle binary operators (#50008)
We should be able to ingest binary operators. This involves parsing the left and right ASTs, and converting the operator string to a logical `BinaryOperator`.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): handle chains in event listeners (#50008)
It's possible to have chains of statements, exclusively in event listeners. A listener with a chain looks like the following:
```
(click)="onClick($event); 1 == 1"
```
We handle this by generating multiple statements, one for each expression in the chain, and only making the final statement the return statement. We place this logic in code specific to listeners, since they are the only place this construct can appear.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): generate property instructions for `ng-template` inputs (#50008)
When ingesting an `ng-template`, inputs might be on the `inputs` or the `templateAttrs` field. More investigation is required to pinpoint the specifics of `templateAttrs`.
For now, we can process them both and generate the appropriate update-mode property instructions.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(compiler): support `KeyedRead` expressions (#50008)
The compiler can now accept key read expressions (e.g. `foo[bar]`), where both the receiver and index are sub-expressions.
PR Close#50008
refactor(compiler): extract save/restore view logic to separate phase (#50008)
Saving and restoring the view is significant enough that it makes sense to handle it independently. This makes for easier reasoning about how view save/restore works.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
refactor(core): remove webworker related checks on `assertDomNode` (#50061)
Since the drop of the webworker platform the node can't be a `WebWorkerRenderNode`.
PR Close#50061
refactor(platform-server): import `xhr2` dynamically in the ServerXhr class (#50095)
This commit updates the `@angular/common/http` and `@angular/platform-server` packages to allow dynamic import of the `xhr2` dependency. The `xhr2` dependency has side-effects that rely on a global scope and as a result in some environments those side-effectful calls fail. With the changes from this PR, the import is delayed until it's actually needed, which gives a chance for the underlying platform to setup global scope (via shims) as needed.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50095
build: remove unused deps (#50116)
* All `@types` package removed have typings in their package.
* brotli is unused
* tmp is unused
* vlq is unused
PR Close#50116
fix(core): bootstrapApplication call not rejected when error is thrown in importProvidersFrom module (#50120)
Fixes that the promise returned by `bootstrapApplication` wasn't being rejected when a module imported using `importProvidersFrom` throws an error. The problem was that the function that resolves the providers happens very early as the injector is being constructed.
Fixes#49923.
PR Close#50120
docs(forms): warn the user about getting old values and show how to avoid (#50123)
PR Close#50123
docs(forms): warn the user about getting old values and show how to avoid (#50123)
Co-authored-by: Andrew Kushnir <43554145+AndrewKushnir@users.noreply.github.com>
PR Close#50123
docs(forms): warn the user about getting old values and show how to avoid (#50123)
PR Close#50123
refactor(core): Throw an error when the document is not initialized. (#50143)
In case the document is accessed but not available we should throw ASAP an error to prevent non explicit errors.
PR Close#50143
fix(core): only try to retrieve transferred state on the browser (#50144)
Prior to this commit we tried to retrieve transferred state on both browser and server. Doing this on the server was redundant and could causes issues as `document` might be undefined.
Closes#50138
PR Close#50144
build: update dependency https-proxy-agent to v6 (#50152)
See associated pull request for more information.
PR Close#50152
docs: changed component name to home.component.ts in point 2 of step 3 (#50170)
PR Close#50170
docs: fix obs variable name to obs$ (#50196)
PR Close#50196
docs: Fixed Spelling 'servivce' to 'service' (#50204)
PR Close#50204
docs: fix filename in first-app (#50207)
Same mistake as #50204 but a different file.
PR Close#50207
refactor(core): Update CD traversal to use 'modes' (#50005)
Rather than maintaining separate traversal functions that act differently, this change
updates the change detection traversal to share more code and use different modes
to control the type of traversal being performed.
PR Close#50005
docs: delete aborted documentation files (#49962)
Those files were created as part of #47391 but the content was never merged.
PR Close#49962
refactor(compiler): Remove unused TransformVisitor & NullVisitor (#48646)
NullVisitor & TransformVisitor are unused and unexported outside the compiler package, we can remove them.
PR Close#48646
build: lock file maintenance (#49914)
See associated pull request for more information.
PR Close#49914
test(zone.js): update zone.js test for jasmine upgrade (#49914)
Update test cases to pass jasmine 6.x update.
PR Close#49914
refactor(common): cleanup platformLocation (#50054)
* Drop the usage of @Inject()
* Drop `supportsState` as its supported by evergreen browsers.
PR Close#50054
refactor(compiler): introduce internal transplanted type (#50104)
Adds a new AST for a `TransplantedType` in the compiler which will be used for some upcoming work. A transplanted type is a type node that is defined in one place in the app, but needs to be copied to a different one (e.g. the generated .d.ts). These changes also include updates to the type translator that will rewrite any type references within the type to point to the new context file.
PR Close#50104
build(devtools): make sure linker runs on fesm2022 bundles (#50086)
Since DevTools' Angular framework dependencies are built from local files, they are always up to date. [Recently](https://github.com/angular/angular/pull/49332) these dependencies started being published as fesm2022 instead of fesm2020. We also have an Angular dependency `ngx-flamegraph` that was built and published as fesm2020.
The easiest fix to make sure all of our Angular based dependencies are processed by the linker would be to update the filterPaths field in that file from `/fesm2020/` to `/fesm2020|fesm2022/`. When v16 releases, we can update ngx-flamegraph and publish it with the new APF, letting us change filterPaths to just `/fesm2022/`.
PR Close#50086
build(devtools): target es2020 explicitly (#50086)
We do this because of a bug caused by https://github.com/evanw/esbuild/issues/2950 and a recent change to how angular static properties are attached to class constructors. Targeting esnext or es2022 will cause the static initializer blocks that attach these static properties on class constructors to reference a class constructor variable that they do not have access to.
Because of this we explicitly target es2020 in our Angular DevTools builds.
PR Close#50086
docs: update releases guide for v16 (#50128)
Also clarify that the deprecations guide is for _noteworthy_ deprecations and may not be comprehensive.
PR Close#50128
docs: update starter lesson to contain example images from the start (#50212)
We received feedback that the starter lesson should also include the stock images.
PR Close#50212
fix(core): handle hydration of root components with injected ViewContainerRef (#50136)
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly.
Resolves#50133.
PR Close#50136
feat(core): support TypeScript 5.1 (#50156)
Updates the project to support building with TypeScript 5.1.
PR Close#50156
docs: standalone component preloading config (#50193)
The preloading modules documentation were missing information about how to apply preloading strategies to standalone application ( `ng new AppName --standalone` ).
Feel free to fix anything not in line with the Angular documentation style guide, as this is my first attempt at contributing :)
- Added example for `app.config.ts` providing info on the `withPreloading(<preloading strategy>)` you can add to the `provideRouter()` RouterFeatures.
- Specified that preloading modules also applies for standalone components.
PR Close#50193
refactor(router): remove private export of `withPreloading` (#50194)
`withPreloading` is part of the public API.
PR Close#50194
fix(core): handle projection of hydrated containters into components that skip hydration (#50199)
This commit updates hydration logic to support a scenario where a view container that was hydrated and later on projected to a component that skips hydration. Currently, such projected content is extracted from the DOM (since a component that skips hydration needs to be re-created), but never added back, since the current logic treats such content as "already inserted".
Closes#50175.
PR Close#50199
fix(core): add additional component metadata to component ID generation (#50203)
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
See: https://github.com/angular/angular/issues/50158#issuecomment-1537061939
PR Close#50203
docs: fix link label. (#50209)
Removing a duplicate https protocol.
PR Close#50209
docs: fix typos on first-app tutorial (#50211)
PR Close#50211
refactor(core): drop `next` prefix from hydration guide link (#50214)
This commit updates the content of the console log to drop the `next.` prefix from hydration guide link.
PR Close#50214
build: update github/codeql-action action to v2.3.3 (#50216)
See associated pull request for more information.
PR Close#50216
docs(docs-infra): Remove warning for `@Annotation`. (#50218)
Per #50206, `@Annotation` is needed for tsickle. This commit removes the warning "Invalid tags found" produced by dgeni for the annotation decorator.
PR Close#50218
docs: fix typo on hydration in Preserve Whitespaces Configuration (#50236)
PR Close#50236
docs: release notes for the v16.0.1 release
release: cut the v16.1.0-next.0 release
refactor(core): simplify state transfer escaping (#50201)
This commit removes unnecessary transfer state escaping and updates this process to be done by the means of a `replacer` and `reviver` method as this removes the need to export the escaping and unescaping methods.
The only thing that we need to escape is `<script` and `</script` which are done by the browsers, but not Node.js.
PR Close#50201
build: lock file maintenance (#50227)
See associated pull request for more information.
(cherry picked from commit d5f92bdd64)
PR Close#50227
refactor: remove unused benchmarks (#50108)
The benchmarks in the 'old' directory are not used / maintained.
PR Close#50108
refactor: remove benchpres tests for other frameworks (#50108)
Some of the benchpress tests were written against other UI
frameworks (ex.: incremental DOM, initial version of ivy)
and those frameworks are no longer a valuable comparision target.
PR Close#50108
docs(docs-infra): Warning message when using absolute links to aio in the documentation (#50213)
This commit adds a processor to check for absolute links to angular.io. Absolute links to aio should be avoided because they will appear as external links.
PR Close#50213
docs: replace absolute links to aio with relative links. (#50213)
This change follows the introduction of the warning message from a transform processor to prevent absolute links to angular.io.
PR Close#50213
refactor(elements): remove unnecessary polyfill deps (#50115)
`webcomponents/custom-elements` and `document-register-element` are unnecessary now that we support only evergreen browsers.
PR Close#50115
build: update dependency firebase-tools to v12 (#50223)
See associated pull request for more information.
PR Close#50223
fix(core): allow onDestroy unregistration while destroying (#50237)
Ensure that all onDestroy callbacks are called by allowing unregistering of onDestroy hooks while destroying.
Fixes#50221
PR Close#50237
docs: fix v13 dependencies versions. (#50243)
Fixing a small mistake.
Fixes#50242
PR Close#50243
docs: split unsupported versions table in two. (#50243)
To ease the maintenance of this table and keep the same number of columns between active and unsupported versions.
PR Close#50243
build: bump in-memory-web-api dependency versions (#50246)
This commit updates in-memory-web-api package versions from v15 -> v16.
PR Close#50246
build: lock file maintenance (#49879)
See associated pull request for more information.
PR Close#49879
docs: update Angular CLI help [main] (#50256)
Updated Angular CLI help contents.
PR Close#50256
docs: fix mistake in tutorial (#50261)
PR Close#50261
build: update dependency @rollup/plugin-commonjs to v25 (#50264)
See associated pull request for more information.
PR Close#50264
docs: add missing "when" (#50262)
PR Close#50262
fix(docs-infra): labels with links should have the same font weight (#50258)
Fix anchor tag styling inside label.api-status-label to match font weight of label styling that does not have anchor tag.
PR Close#50258
build: update all non-major dependencies (#50217)
See associated pull request for more information.
PR Close#50217
build: share Saucelabs browsers between karma test targets using background Saucelabs daemon and custom karma launcher (#49200)
This upgrades the Saucelabs Bazel step on CI to use the more efficient Saucelabs daemon
PR Close#49200
build: address review feedback; added scripts/test/run-saucelabs-tests.sh script for local testing (#49200)
more chars to meet the linters requirements
PR Close#49200
build: address review feedback; should be ready to land now... additional chars to meet commit msg formatting requirements (#49200)
plus more additional chars here
PR Close#49200
build: don't run saucelabs tests yet on PRs... that will happen in a followup (#49200)
additional test to make linter happy
PR Close#49200
refactor(core): remove legacy way of preventing default actions (#50257)
Setting `returnValue = false` to prevent the default action of events hasn't been necessary since IE9.
PR Close#50257
docs: fix inconsistencies in getting started (#50275)
Fixes#50274
PR Close#50275
docs: fix mistake in first-app-lesson-03 (#50278)
The correct filename is `home.component.ts`.
fixes#50277
PR Close#50278
docs(docs-infra): Remove internal constructors from the doc. (#50282)
Internal constructor should not be exposed in the doc. This removes them.
Related to #50281
PR Close#50282
docs(docs-infra): Add a deprecated label to APIs (#50287)
This adds a deprecated label next to the other labels on the API pages for methods & properties.
Fixes#44265
PR Close#50287
docs: Glossary link to N (#50294)
The shortcut to N was missing resulting in a rendering issue.
PR Close#50294
docs: add Enea to GDE contributors list (#50254)
PR Close#50254
docs: update events (#50309)
Generated `events.json` with the latest events retrieved from the Firebase DB.
PR Close#50309
fix(core): allow passing value of any type to `isSignal` function (#50035)
Unlike the current signature where the input argument must a function, this change allows an input of any type to be passed to the `isSignal` function.
PR Close#50035
refactor(common): Reduce the precision to 2 digits in the ngOptimizedImage distortion warning message (#50276)
Using toFixed().
fixes#50273
PR Close#50276
refactor(core): Improve `ExpressionChangedAfterItHasBeenCheckedError` (#50286)
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
PR Close#50286
refactor(forms): remove unnecessary Array.from (#50314)
The Array.from isn't necessary since we're just iterating over the map keys.
PR Close#50314
docs: updated 'conceptual preview' title (#50326)
PR Close#50326
docs: fix typo in NG0912 error guide (#50322)
PR Close#50322
docs: fix typo in dependency injection guide (#50323)
PR Close#50323
docs: fix typo in security guide (#50324)
PR Close#50324
Revert "fix(core): add additional component metadata to component ID generation (#50203)" (#50334)
This reverts commit 52c74d3b4a.
The reason for revert: breaking some apps in Google's codebase.
PR Close#50334
docs: added wiki link for domain model (#50180)
Closes#49570
PR Close#50180
build: update all non-major dependencies (#50316)
See associated pull request for more information.
PR Close#50316
docs: update live demo for change detector (#50328)
fixes#44553
PR Close#50328
docs: remove plnkr link from markForCheck example (#50328)
PR Close#50328
refactor(core): Add a warning when `ApplicationRef.isStable` doesn't emit `true` (#50295)
Hydration requires a stable App to run some logic.
With this warning developers will be informed about potential issues encountered when running an unstable app.
Fixes#50285
PR Close#50295
fix(core): add additional component metadata to component ID generation (#50336)
This commit add `exportAs`, `signals`, `inputs` and `outputs` into account when generating a component ID.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50336
docs: release notes for the v16.0.2 release
release: cut the v16.1.0-next.1 release
docs: fixed typo
PR Close#50145
The blossom emoji is referred to as "yellow flower" in the docs, but it's not yellow on all platforms. Since "flower" or "blossom" is too generic, the "tulip" emoji is used instead.
Fixes#50347
PR Close#50349
Fixes that the host directives feature was incorrectly throwing the conflicting alias error when an aliased binding was being exposed under the same alias.
Fixes#48951.
PR Close#50364
Hydration requires a stable App to run some logic.
With this warning developers will be informed about potential issues encountered when running an unstable app.
Fixes#50285
PR Close#50295
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
PR Close#50286
Unlike the current signature where the input argument must a function, this change allows an input of any type to be passed to the `isSignal` function.
PR Close#50035
This commit adds a processor to check for absolute links to angular.io. Absolute links to aio should be avoided because they will appear as external links.
PR Close#50213
Some of the benchpress tests were written against other UI
frameworks (ex.: incremental DOM, initial version of ivy)
and those frameworks are no longer a valuable comparision target.
PR Close#50108
This commit removes unnecessary transfer state escaping and updates this process to be done by the means of a `replacer` and `reviver` method as this removes the need to export the escaping and unescaping methods.
The only thing that we need to escape is `<script` and `</script` which are done by the browsers, but not Node.js.
PR Close#50201
Per #50206, `@Annotation` is needed for tsickle. This commit removes the warning "Invalid tags found" produced by dgeni for the annotation decorator.
PR Close#50218
This commit updates hydration logic to support a scenario where a view container that was hydrated and later on projected to a component that skips hydration. Currently, such projected content is extracted from the DOM (since a component that skips hydration needs to be re-created), but never added back, since the current logic treats such content as "already inserted".
Closes#50175.
PR Close#50199
The preloading modules documentation were missing information about how to apply preloading strategies to standalone application ( `ng new AppName --standalone` ).
Feel free to fix anything not in line with the Angular documentation style guide, as this is my first attempt at contributing :)
- Added example for `app.config.ts` providing info on the `withPreloading(<preloading strategy>)` you can add to the `provideRouter()` RouterFeatures.
- Specified that preloading modules also applies for standalone components.
PR Close#50193
This commit fixes an issue where a root component with an injected ViewContainerRef (for ex. `inject(ViewContainerRef)`) was triggering a certain code path during hydration which didn't handle this case correctly.
Resolves#50133.
PR Close#50136
We do this because of a bug caused by https://github.com/evanw/esbuild/issues/2950 and a recent change to how angular static properties are attached to class constructors. Targeting esnext or es2022 will cause the static initializer blocks that attach these static properties on class constructors to reference a class constructor variable that they do not have access to.
Because of this we explicitly target es2020 in our Angular DevTools builds.
PR Close#50086
Since DevTools' Angular framework dependencies are built from local files, they are always up to date. [Recently](https://github.com/angular/angular/pull/49332) these dependencies started being published as fesm2022 instead of fesm2020. We also have an Angular dependency `ngx-flamegraph` that was built and published as fesm2020.
The easiest fix to make sure all of our Angular based dependencies are processed by the linker would be to update the filterPaths field in that file from `/fesm2020/` to `/fesm2020|fesm2022/`. When v16 releases, we can update ngx-flamegraph and publish it with the new APF, letting us change filterPaths to just `/fesm2022/`.
PR Close#50086
Adds a new AST for a `TransplantedType` in the compiler which will be used for some upcoming work. A transplanted type is a type node that is defined in one place in the app, but needs to be copied to a different one (e.g. the generated .d.ts). These changes also include updates to the type translator that will rewrite any type references within the type to point to the new context file.
PR Close#50104
Rather than maintaining separate traversal functions that act differently, this change
updates the change detection traversal to share more code and use different modes
to control the type of traversal being performed.
PR Close#50005
Prior to this commit we tried to retrieve transferred state on both browser and server. Doing this on the server was redundant and could causes issues as `document` might be undefined.
Closes#50138
PR Close#50144
Fixes that the promise returned by `bootstrapApplication` wasn't being rejected when a module imported using `importProvidersFrom` throws an error. The problem was that the function that resolves the providers happens very early as the injector is being constructed.
Fixes#49923.
PR Close#50120
This commit updates the `@angular/common/http` and `@angular/platform-server` packages to allow dynamic import of the `xhr2` dependency. The `xhr2` dependency has side-effects that rely on a global scope and as a result in some environments those side-effectful calls fail. With the changes from this PR, the import is delayed until it's actually needed, which gives a chance for the underlying platform to setup global scope (via shims) as needed.
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#50095
Saving and restoring the view is significant enough that it makes sense to handle it independently. This makes for easier reasoning about how view save/restore works.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
When ingesting an `ng-template`, inputs might be on the `inputs` or the `templateAttrs` field. More investigation is required to pinpoint the specifics of `templateAttrs`.
For now, we can process them both and generate the appropriate update-mode property instructions.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
It's possible to have chains of statements, exclusively in event listeners. A listener with a chain looks like the following:
```
(click)="onClick($event); 1 == 1"
```
We handle this by generating multiple statements, one for each expression in the chain, and only making the final statement the return statement. We place this logic in code specific to listeners, since they are the only place this construct can appear.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
We should be able to ingest binary operators. This involves parsing the left and right ASTs, and converting the operator string to a logical `BinaryOperator`.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
PR Close#50008
ElementContainer instructions refer to `ng-container` element tags, which don't produce corresponding DOM nodes. Much like element instructions, container instructions can also have their start and end tags combined.
Co-authored-by: Alex Rickabaugh <alxhub@users.noreply.github.com>
Co-authored-by: Andrew Scott <atscott@users.noreply.github.com>
PR Close#50008
This reverts commit a1ca162fd6.
This commit causes failures in g3, because `@Annotation` is load-bearing for
tsickle's decorator downleveling transformation.
PR Close#50206
The `main` bundle fell below the threshold. No actual investigation
was done here because it's a reduction in size, and the AIO size
matches the `AIO-local` size now. This is expected because the latest
RC closely matches the `main` branch (or even is equivalent at this
point).
PR Close#50107
Relative links have 2 advantages :
* They're not marked as external links
* When on a specific doc version, the link point to the same version.
PR Close#50080
This commit moves changelog entries before v14.0.0 to the `CHANGELOG_ARCHIVE.md` file to make sure we do not reach Github limit, which would make CHANGELOG.md non-viewable in a browser.
PR Close#49957
Update the introduction page to include a link to the new tutorial and to remove links to the other tutorials to give learners a clearer path forward. Also, add files to pull approve.
PR Close#49980
Adds the content for lesson 13, fixes some code inconsistencies for the services code in the examples, and adds this lesson to the navigation.
PR Close#49980
Updated the content for the tutorial lesson 10, added doc regions to the code and updated the service. Also added a placeholder for lesson 11.
PR Close#49980
Updates the content of the lesson and adds a placeholder for the next lesson. Also, updates the code for the example to reflect the patterns from the previous iterations.
PR Close#49980
Adds the content for lesson 07, a new image, a navigation entry and some updates to the example code for this lesson. Also, this updates previous lessons where typos and copy/pasta errors show up
PR Close#49980
Adds lesson 06 as well as fixes up some code inconsistencies. Adds docregions to some lessons and adds a missed step, misspellings and more to previous lessons.
PR Close#49980
Each individual lesson should have the images available in the download since a learner can start from any lesson. So, we're adding images here. Also, sync'ing styles for consistency across the lessons. This is fixing some previous commits that didn't include these changes. The goal is that for future commits we can have less changes and focused solely on that lesson
PR Close#49980
This commit does the following:
- Add the instructional content for lesson 05
- Add an entry to navigation.json for this lesson
- Adds doc regions to the housing-location.component file
- Adds a placeholder for lesson 06 (that way links work now)
PR Close#49980
Update the tutorial for lesson 04 on interfaces. Also added images required for the base app. Created the placeholder for the next lesson so the app works if built from this branch. Updated navigation to include this step in the navigation menu.
PR Close#49980
Updates the learning content, the snippet regions from the code examples, and adds screenshots for the lesson. Also, add a base page for lesson-03
PR Close#49980
Update the content to complete the instructions required for users to build the app as described in lesson one. Also, added a new image that represents that app as of completing lesson-01.
PR Close#49980
Add application screenshot (and create the directory to host images for this tutorial). Also, update index.md instructions and complete TODOs/missing content.
PR Close#49980
Angular v16 will move the esbuild-based browser application builder from
an experimental status to a developer preview status. This newly added
guide provides instructions and information regarding the use of the new
build system.
PR Close#50068
Using `@angular/platform-browser-dynamic` is no longer required for JIT scenarios with Ivy. Instead `@angular/compiler` should be imported instead.
This change is part of the effort to reduce the server bundles sizes, which is needed to support cloud workers.
BREAKING CHANGE:
Users that are using SSR with JIT mode will now need to add `import to @angular/compiler` before bootstrapping the application.
**NOTE:** this does not effect users using the Angular CLI.
PR Close#50064
These two concepts are a crucial addition to component destruction, and are added to the existing lifecycle doc (which is retitled more generally).
PR Close#50042
Adds the developer preview signals guide to AIO, under the preview section.
This guide explains signals, computed properties, and effects.
PR Close#50053
This commit introduces an interface for `toSignal` options to mirror that of
`toObservable`, and adjusts docs for both symbols. It also adds the ability
for `toSignal` to manually specify `DestroyRef` (similarly to
`toObservable` accepting an injector) or for `toSignal` automatic cleanup to
be disabled (in which case the subscription persists until the Observable
completes). Either option allows `toSignal` to be used outside of a DI
context, like `toObservable`.
PR Close#50071
This commit adds back `ngcc` as a no-op operation. When invoked it will warn providing details about removing `ngcc`.
In Angular 17, this will be removed.
PR Close#50045
The original code uses clientWidth and clientHeight which returns the
width and height of the element including the padding. This results in
the aspect ratio being determined incorrectly and the image distortion
warning triggering. The new code uses getComputedStyle which returns
the width and height without padding.
Another advantage of using getComputedStyle is that, unlike clientWidth
and clientHeight, the number returned is a decimal which provides
greater accuracy. This could allow for lowering the ASPECT_RATIO_TOLERANCE.
PR Close#49889
Due to assertNoImageDistortion using clientWidth and clientHeight, and these properties returning integers, rounding errors occur that exceed the aspect ratio tolerance.
Increasing the tolerance could hide actual distortion so correcting the calculation to use floats would be best and could even allow for a lower tolerance.
PR Close#49889
The image distortion detection performed uses clientWidth/clientHeight which includes the padding.
This leads to images with padding being detected as distorted while they are not and distortion being masked by padding.
PR Close#49889
This commit adds an LView flag to indicate that a view is a "signal"
view and updates view creation code to correctly set the flag
based on the declaration component metadata.
PR Close#49988
Both the render and update instructions live in the same file and are
only separated via a "render*" vs "refresh*" naming convention. This
commit moves these functions to completely separate files.
PR Close#50017
It's likely that the flag and counters used to track transplanted views
needing a refresh will be reused to signal views as well. The two follow
a similar rule: While the parents might not be "Dirty", there is still a
child/descendant view somewhere that needs to be refreshed during change
detection.
PR Close#50000
This commit fixes a styling issue were the default values are not being displayed in https://angular.io/cli/build which is because in some cases the option description has a long anchor tag which causes the content to be pushed to the right and gets hidden.
PR Close#50012
This commit refactors the logic of the `platform-server` to avoid using `platformDynamicServer` when `ngJitMode` is disabled. This is needed to avoid including JIT compiler into the source code of the server bundle, when this compil
er is not needed.
PR Close#50007
The LViewFlags are using manually written 0bxxxxx numbers which can be very hard to read
once there are more than a handful of 0s and 1s. The bit shifting feels a lot more
legible.
PR Close#49987
This commit adds the `signals: boolean` property to the internal
directive/component metadata. This does not add it to the public API
yet, as the feature has no internal support other than compiler
detection.
PR Close#49981
The `semi` rule a duplicate since `plugin:@angular-eslint/ng-cli-compat--formatting-add-on` already includes `@typescript-eslint/semi` as error.
PR Close#49970
This adds context to the error message in the case that a DOM node is not found during the hydration process. It outputs the expected DOM structure based on the lView and tNode rather than an unhelpful text message.
PR Close#49977
As described in
https://github.com/angular/angular/discussions/49681#discussioncomment-5628930,
if an `Observable` created from a signal with `toObservable` is
subscribed to in a template, it will initially have `null` as the value.
Immediately after the template is done executing, effects are flushed
and this results in the `AsyncPipe` getting a new value before the
`checkNoChanges` pass, resulting in `ExpressionChanged` error.
```
template: '{{obs$ | async}}'
...
obs$ = toObservable(signal(0));
```
Instead, this commit updates the `toObservable` to synchronously emit
the initial value to the Observable stream.
Side note here: We don't exactly encourage this pattern. Instead of
using `AsyncPipe`, the template should just read signals.
PR Close#49894
saying that providers of this NgModule is available to components,pipes and directive of "this" ngModule is not accurate sentence to describe the fact.
I am referring from: https://angular.io/guide/hierarchical-dependency-injection.
It says that "ModuleInjector is configured by the @NgModule.providers and NgModule.imports property. ModuleInjector is a flattening of all the providers arrays that can be reached by following the NgModule.imports recursively."
So, any component,pipe or directive of other NgModule within same ModuleInjector can use providers of this NgModule.
PR Close#49966
Hydration relies on a signal from ZoneJS when it becomes stable inside an application, so that Angular can start serialization process on the server or post-hydration cleanup on the client (to remove DOM nodes that remained unclaimed).
Providing a custom or a "noop" ZoneJS implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration.
This commit adds a warning (non-blocking) for those cases.
PR Close#49944
In this mode the compiler generates code based on each individual source file without using its dependencies. This mode is suitable only for fast edit/refresh during development.
PR Close#49846
This commit updates hydration logic to hanlde a case when the same component is used multiple times in a template and in some of those cases, component is opted-out of hydration, for example:
```
<cmp ngSkipHydration />
<cmp />
```
Previously, the first occurrence of the `<cmp>` would result in storing the `ssrId` on a TView as `null` (since hydration is disabled for the component) and the second component instance reused the `null` as a value, thus also skipping hydration.
With the changes from this commit, the `ssrId` would be set when we come across a hydratable instance. We also make sure that the `ssrId` value never changes after we first set it to a non-`null` value.
PR Close#49943
This change explicitly resets a reactive consumer before setting inputs
on directive instances. This is to assure that any potential input setters
do _not_ run in the reactive context.
PR Close#49906
When binding an array to `class` like `[class]="['foo', 'bar']"`, the runtime treats it the same as a literal binding with all the values being `true`, e.g. `{foo: true, bar: true}`. While object literals can only have string keys, arrays can have any value which can lead to errors if the array contains non-string values.
These changes add some logic to stringify the keys and ignore invalid ones.
Fixes#48473.
PR Close#49924
This commits update the platform-server test structure to add 2 applications in the Angular CLI workspace one based on ngmodules and another standalone. The same E2E suit is ran on both apps.
PR Close#49927
This commit updates hydration logic to handle cases when there are projection slots present in a template inside of an `<ng-container>` and when there are regular elements follow an <ng-content> slot (see tests for additional information). With this combination, the logic that annotates regular element locations should fallback to calculating a path from a reference node to that node. In case of an <ng-container>, the comment node is located *after* the node that needs an annotation. An existing logic was mistakenly returning an empty path, which was represented as a pointer to teh reference node. This commit fixes that and triggers a fallback to using a component host node as a reference in this case.
Resolves#49918.
PR Close#49920
This commit updates the platform-server integration tests to use the Angular CLI as it makes it easier to add more tests and remove the custom webpack setup.
PR Close#49900
Empty text nodes are not present in the server-rendered HTML output, thus we inject a special marker
at a text node location to later restore an empty text node at the client. Currently, we treat text nodes with spaces as "empty" as well, however those spaces are present in the HTML and text nodes are created in a browser. Adding extra annotation in this case results in extra text nodes created on the client and may trigger hydration issues. This commit updates the code to avoid treating text nodes with spaces as "empty".
PR Close#49877
This commit adds a phase to the template pipeline to merge `nextContext()`
instructions that follow each other without context reads in between. That
is, the sequence:
```typescript
nextContext();
var v1 = nextContext();
```
becomes:
```typescript
var v1 = nextContext(2);
```
PR Close#49797
This commit modifies the `ListenerOp` operation to capture the context
needed to generate the "correct" (per `TemplateDefinitionBuilder`) function
name for the handler function for the listener.
PR Close#49797
The `resetView` instruction in the template pipeline had a copy-paste error
where it was emitting a call to `reference` instead. This commit fixes the
issue.
PR Close#49797
This commit adds a chaining phase which post-processes reified template
pipeline operations, and collapses chainable instructions into chained
calls. Performing chaining as a post-processing step after reification
allows the specifically selected instruction variants to be known when
considering chaining two operations.
PR Close#49797
This commit adds a variable optimization pass to the template pipeline. The
pipeline generates all variables which might be referenced within a given
view's template function, regardless of whether other operations will read
those values.
The variable optimizer post-processes the IR and performs several variable-
related optimizations:
* It transforms variable declarations to side effectful expressions when the
variable is not used, but its initializer has global effects which other
operations rely upon.
* It removes variable declarations if those variables are not referenced and
either they do not have global effects, or nothing relies on them.
* It inlines variable declarations when those variables are only used once
and the inlining is semantically safe.
PR Close#49797
This commit teaches the template pipeline how to generate `textInterpolate`
when there's a single expression with no surrounding static text.
PR Close#49797
This commit reverses the generate template functions when adding them to the
constant pool in the template pipeline. This seems to better match the
ordering in which `TemplateDefinitionBuilder` generates template functions.
Further study is needed to determine if this is exactly accurate.
PR Close#49797
`advance()` was not emitted correctly by the template pipeline. There were
two problems:
* it was not handled in `transformExpressionsInOp()`.
* it was not added to the list correctly in `phaseGenerateAdvance()`.
This commit addresses both problems.
PR Close#49797
This commit fixes a broken assertion in the template pipeline concerning the
ownership of nodes in `insertBefore`, as well as adjusts a few other
assertions.
PR Close#49797
The template pipeline previously included an error when a static attribute
binding was found on an `<ng-template>`, under the assumption that this case
didn't happen in reality. It turns out that it does, so this commit removes
the error in favor of a comment to investigate the case further.
PR Close#49797
The template pipeline previously reified the parameters to `template()`
incorrectly. This commit adjusts the output to correctly reference the
attributes of the `template()` call.
PR Close#49797
This commit introduces a flag which is tracked while visiting expression
nodes in the template pipeline. This flag can be used to differentiate when
in an immediate evaluation context vs. a closure, which is useful for
certain operations.
PR Close#49797
The `TemplateDefinitionBuilder` has a specific pattern it uses for template
function names for embedded view template functions. This commit changes the
template pipeline to use the same format, allowing the generated code to
match between them.
PR Close#49797
The `TemplateDefinitionBuilder` uses the same name for the same semantic
variables across different views declared in a component. This commit
refactors the template pipeline's concept of `ir.SemanticVariable` to share
instances across all `ViewCompilation`s. This allows the `name` of the
variable to be stored on the `ir.SemanticVariable` instance instead of on
the `ir.VariableOp` (which makes sense as variables are often named based on
the `ir.SemanticVariable` anyway).
PR Close#49797
The template pipeline was previously reading the context of the wrong view,
resulting in incorrect generated code. Previously only `ctx` was being used,
since the context read was always that of the current view being compiled,
even for variables which exist on the contexts of parent views.
PR Close#49797
The template pipeline was emitting fields on the component definition in a
different order than the `TemplateDefinitionBuilder`, which causes test
failures. Additionally, the `consts` field was being emitted even if it was
empty.
PR Close#49797
This fix assures that templates functions executed in the creation mode
are run outside of the reactive context. This avoids the situation where
signal reads in a directive constructor (executed as part of the creation
mode) would mark the host component as dirty.
Fixes#49871
PR Close#49883
This commit updates the docs for the `withNoDomReuse` function, which lets to opt out of non-destructive hydration.
The docs now mention the need to configure an initial navigation option for the Router to be blocking, i.e.
use `withEnabledBlockingInitialNavigation()` Router feature.
PR Close#49895
Updates the PullApprove config to add myself to `fw-compiler` and `fw-core` with the following reasoning:
* We talked about `fw-compiler` some time ago, because it would help with TypeScript updates and because I'm familiar with the compiler.
* Also adding myself to `fw-core` to make it easier with some upcoming features and because I can help with the review load for the runtime changes.
PR Close#49878
The `targetPageId` was pre-calculated at the start of a navigation using
the same logic that exists in `setBrowserUrl` now. Doing the calculation
ahead of time is not necessary and complicates the transition state.
PR Close#49799
Effects should run in the same zone they were created in. However, if ZoneJS is not used at all,
effects should just run (without zone). This is similar to what's done
in the elements `ComponentNgElementStrategy`.
fixes#49798
PR Close#49890
DevMode is when the ng debug object is available. `Optimization:true` is responsible for treeshaking everything behind `ngDevMode`.
Fixes#48968
PR Close#48970
NgModules which import standalone components currently list those components
in their injector definitions, because we assume that any standalone
component may export providers from its own imports.
This commit adds an optimization for that emit, which attempts to statically
analyze the NgModule imports and determine which standalone components, if
any are present, do not export providers and thus can be omitted.
This analysis is imperfect, because some imported components may be declared
outside of the current compilation, or transitively import types which are
declared outside the compilation. These types are therefore _assumed_ to
carry providers and so the optimization isn't applied to them.
PR Close#49837
This commit replaces (non material-related) deprecated code present in the aio app.
* `pageYOffset` can be replaced by `scrollY`
* RxJs' `mapTo()` is just a `map()`
* `createNgModuleRef` can be replaced by `createNgModule`
* HttpEmits `ProgressEvent` not `ErrorEvent` (see #34748)
* `SwUpdate.available` is replaced by `versionUpdates` with a `filter`
* `SwUpdate.activated` is replaced by the returned promised of `SwUpdate.activateUpdate`.
PR Close#49671
Currently, the `ViewRef.rootNodes` output is missing anchor (comment) nodes for inner `ViewContainerRef`s,
when an achor node was created for that instance of a `ViewContainerRef` (which happens in all cases except
when an <ng-container> was used as a host for a view container).
This issue affects hydration logic, which relies on the number of root nodes within a view to properly determine
segments in DOM that belong to a particular view.
Resolves#49849.
PR Close#49867
This commit updates the code to log hydration setup warning in dev mode only. Previously, the warning was retained in the code even after optimization, thus making it into production bundles. The warning is meant to let developers know that hydration was enabled, but wasn't activated, so it's safe to tree-shake it away from production bundles.
PR Close#49876
The `canceledNavigationResolution: 'computed'` option does not correctly
assign page IDs or restore them when redirects result in navigating to
the current URL. This change ensures that the page IDs are still
incremented and restored correctly in this scenario.
PR Close#49793
Since v15, prod mode is handled by the CLI with the `optimization` flag. We can remove the environement files and `enableProdMode` when the tests use the CLI.
PR Close#49746
It might happen that the lifecycle scope represented by DestroyRef becomes
invalid before an onDestroy hook is registered (ex. injector or component
instance got destroyed). In such cases registration of the onDestroy hooks
should no longer be possible.
Fixes#49658
PR Close#49804
The new asReadonly method on the WritableSignal interface makes
it possible to create readonly instance of a writable signal.
Readonly signals can be accessed to read their value,
but can't be changed using set, update or mutate methods.
PR Close#49802
This commit fixes an issue were on the server the HTTP cache was being disabled prematurely which caused HTTP calls performed in `ngOnInit` life cycle hooks not to be cached.
PR Close#49826
This commit updates the code to avoid deep links into the `@angular/core`, which triggers a build issue in apps when a code is referenced.
PR Close#49823
This commit renames an internal token to better align it with the naming of the function (to highlight the fact that it's responsible for DOM part of the hydration).
PR Close#49800
Angular doesn't support IE anymore. We can remove the workarounds related to IE.
Some workarounds are keep because of the support of domino but the comments related to IE are removed.
PR Close#49763
Some libraries could use numbers in headers. this fix prevents Angular from
throwing an error by casting those numerical values into strings.
Fixes#49353
PR Close#49379
This commit improves the HTTP transfer state integration test by using `provideClientHydration` method and validates that no HTTP calls are performed during the client bootstrapping.
PR Close#49810
`toObservable` creates an `effect` that watches for updates to the
source signal. We should allow writes to signals in this effect, which
would be consumed by downstream observers.
PR Close#49769
From Ben:
> When dealing with any reactive function call you don't control
> like `observer.next()` (or anything similar), you want to catch the error
> in the producer call, in this case `signal()`. You don't want to catch errors
> in the `observer.next` call itself.
PR Close#49769
The initial value used for signals by default is now `undefined`. In
addition, there is a new option to express that the signal should emit a
value synchronously (`requireSync: true`). When this value is specified,
the function will throw _on creation_ if the subscribing to the
`Observable` does not result in a synchronous emit.
PR Close#49769
`RouterOutlet` components can initialize _during_ change detection (for
example, if they exist in an embedded view). When this happens, data
from the router should be bound immediately to the routed components
rather than not being available until the next round of change
detection. This is mostly just a problem for testing because change
detection is triggered manually. It would be surprising to have to
detect changes _twice_ on the fixture in order to get data bound to the
routed component.
PR Close#49741
The `ActivatedRoute` exposes several `Observable` members that are
`BehaviorSubject` under the hood. In order to update the values of those
subjects, we cast the `Observable` type internally. Instead, the
`BehaviorSubject` should be kept and re-exposed as public API
separately.
PR Close#49741
Accessing `pendingTasks.whenAllTasksComplete` too early causes the `InitialRenderPendingTasks` to return a resolved promise too early. This commit changes the way we access `whenAllTasksComplete` to only happen when the application is stabilized.
PR Close#49784
Current in the `InitialRenderPendingTasks` when the `collection` size is 0 a new promise is created a the status is changed to completed. This causes the promise that is created during the class initialization phase to never be resolved which causes SSR to hang indefinitely.
PR Close#49784
The compiler currently does not check to make sure that directives in
the host bindings are exported. These directives are part of the public
API of the component so they do have to be.
PR Close#49527
Previously, since the `HttpXhrBackend` is a singleton, the macrotask was created and completed only for the initial request since it was stored as in property in the class instance. This commit replaces this logic to create a macro task for every XHR request.
Closes#49730
PR Close#49776
This change makes is possible to use async functions
(ones returning a promise) as effect run functions.
To make it possible, the signature of the effect function
changed: effect cleanup function is registered now
(using a dedicated callback passed to the effect creation)
instead of being returned from the effect function.
PR Close#49783
This commit updates the logic that adds the "ng-server-context" attribute to the root elements to also include information about SSR feature enabled got an application.
PR Close#49773
Fixes that the compiler was matching directives based on `attr` bindings which doesn't correspond to the runtime behavior. This wasn't a problem until now because the matched directives would basically be a noop, but they can cause issues with required inputs.
PR Close#49713
This commit adds a Bazel flag which controls a constant in the compiler code.
When this flag (`--//packages/compiler:use_template_pipeline`) is specified, the
prototype template pipeline code is enabled.
This is not used in any production workflows and only works in the local Angular
repository. It will be used to develop the template pipeline against the
existing compliance tests.
PR Close#48580
This commit adds `transformTemplate` and `emitTemplateFn()` to the template
pipeline. These operations respectively apply all template compilation phases
in the right order, and then generate a final template function AST from the
template IR.
PR Close#48580
This commit introduces `phaseReify()` which performs "reification" of IR
operations. This converts previously semantic operations (e.g. `ir.Element`)
into generated instruction calls (`element(...)`). At the end of reification,
all operations have been converted into `ir.StatementOp`s, and the IR AST should
be suitable for emitting as generated code.
Note that after reification, more transformations may still be applied. For
example, instruction chaining will be performed post-reification, since it
depends on the exact selected instructions for each operation.
PR Close#48580
This commit introduces a new pipeline phase `phaseNaming()`, which tags
operations that generate function and variable declarations with generated names
to use when emitting those operations.
Currently this phase is using placeholder names. Eventually, we will want to
align its output with the current `TemplateDefinitionBuilder` names, in order to
pass the existing tests.
PR Close#48580
When executing the template update pass, the runtime keeps an internal
declaration slot pointer for which declaration (element, template, etc) is
the current subject of any binding or interpolation instructions. In between
update operations which reference different declarations, this pointer needs to
be adjusted, which is the job of the `advance()` instruction.
This commit introduces `phaseGenerateAdvance()` which inserts `advance()`
operations wherever necessary to satisfy this runtime requirement.
PR Close#48580
Operations and expressions in component update blocks can make use of variable
slots for storing data between executions (for example, the previous values of
expressions to use in change detection comparisons). The runtime must be told
how many variable slots to allocate for each view in a component declaration.
This commit adds a `phaseVarCounting()` phase to count the number of variables
used in different operations and expressions in a view. It makes uses of a new
marker trait `ConsumesVarsTrait` to determine which operations & expressions to
consider.
PR Close#48580
Every declaration a template is stored in a data slot in the runtime. The
indices of these slots are passed to the declaration instructions in the
creation mode. In the update mode, several instructions (like `reference()` for
local references) also use the slot indices to reference declared items.
This commit introduces `phaseSlotAllocation()` to the template pipeline, which
allocates slots for declarations which need them, and propagates those slot
indices to other instructions which need to reference declared items via their
slot indices. To perform this association, the `XrefId` of the declared items
is used to link declarations with usages.
Slot allocation is abstracted from operations by the way of a new concept in the
pipeline: traits. A trait is a "mixin" on an operation, expression, or both that
allows phases to process any operation/expression which implements the trait
without needing specific logic for each concrete implementing type. Two traits
are introduced to support slot allocation: the `ConsumesSlotOpTrait` for
declarations which require a slot to be allocated, and the
`UsesSlotIndexExprTrait` for expressions which reference a declaration by its
slot index.
PR Close#48580
This commit serializes the attributes on element-like structures in the template
and converts them to constant arrays, which it lifts into the `consts` array for
the entire component compilation.
PR Close#48580
As an optimization, the runtime provides an `element()` instruction to use in
place of `elementStart()` and `elementEnd()` when there are no instructions
between them. This commit merges `ElementStart` and `ElementEnd` IR operations
into `Element` operations in that special case.
PR Close#48580
Local references declared on elements need to be represented in element/template
instructions via an index into the `consts` array. This commit adds the
`phaseLocalRefs()` phase to lift local reference declarations into the `consts`
array accordingly.
PR Close#48580
`phaseResolveContexts()` resolves `ir.ContextExpr` expressions within views.
Each `ir.ContextExpr` represents a reference to a particular view context. For
the context of the view being compiled, this is available in the view's template
function `ctx` parameter. For parent views, this is available in context
variables which were added previously.
`phaseResolveContexts()` replaces these `ir.ContextExpr` operations with
resolved references to the requested views.
PR Close#48580
This commit introduces `phaseResolveNames()` to the template pipeline. This
phase processes any `ir.LexicalReadExpr`s, which represent unresolved
identifiers from the user's expressions in the template, and attempts to match
them to concepts in the lexical scope of the template (such as local refs) or
to a property read of a component or embedded view context.
PR Close#48580
This commit implements the first "phase" of the template pipeline. Phases are
individual steps in compilation that perform a transformation of the IR in order
to move closer to generating runtime code for the template.
This first phase is `phaseGenerateVariables()`. This phase introduces variable
definition operations into the IR to define variables in each view. These
variables either represent internal operations (saving/restoring the view
context for listeners, for example) or variables created from user-defined names
such as local references or template context properties.
Every view has all possibly-referenced variables generated, regardless of
whether they're actually referenced by other operations. A future phase will
optimize the variables in each view, inlining those which are only read once and
removing those which are not referenced at all.
PR Close#48580
This commit implements `ingest()`, which converts a parsed template AST into
template pipeline IR. This is the first step of template compilation.
PR Close#48580
This commit adds the IR operations and expressions required to "ingest" a
template into the template pipeline. They form the starting point for template
compilation.
Ingestion is implemented in a following commit.
PR Close#48580
This commit adds support for custom derived `o.Expression` types in the template
pipeline. A base class is added with one current implementor
(`ir.LexicalReadExpr`). `ir.Expression`s encode semantic operations within
expression ASTs of IR operations.
PR Close#48580
This commit introduces the "template pipeline", a new compilation flow for
template compilation. This new flow is intended to eventually replace the
`TemplateDefinitionBuilder`. For now, it's being implemented in parallel with
the existing system with the goal of eventually passing all of the existing
compliance tests.
The new pipeline is based on an "intermediate representation" of a template -
operations which semantically encode what needs to happen at runtime to render
and change-detect the template. Using an IR allows for different concerns of
template compilation to be processed independently, which solves the biggest
problem with `TemplateDefinitionBuilder` today (the lack of separation of
concerns).
This commit introduces the IR concept of an operation and related typings, as
well as the structures used to represent templates and views during compilation.
Future commits will expand on this foundation as work on the pipeline proceeds.
PR Close#48580
Currently we have multiple integration apps which are instrumented with the payload size checks. In addition to that, there is a separate CI job that performs similar checks. The checks in CI job are redundant, thus this commit disables a separate CI job.
PR Close#49788
The cache state is only used only the first server request. Restarting the server uses the cache on first request.
Subsequent requests skip the cache because the value is mutated.
This change ensures a new cache state is returned on every request.
PR Close#49749
* Adds a small script to conveniently re-generate lock files for
integration tests.
* Updates the `.gitignore` for integration tests to ignore node
modules. Some tests do not have a `.gitignore` (like the CLI
boilerplate tests).
PR Close#49787
This reverts commit 2279f4d4620eba083a9832ed096890b69a25ec42.
Reverting that commit based off PR feedback that this change should only affect the parsing of sergments and node encoding of the url
PR Close#47332
fix router segment name parsing to allow segements to container an unscaped = character. Currently if you have a url like /some-site/folder=/some-file then then middle segment "folder=" will stop parsing at the = sign and register that part of the path as just "folder"
Fixes#21381
PR Close#47332
This commit updates the minimum supported Node version across packages from 16.13.0 -> 16.14.0 to ensure compatibility with dependencies.
PR Close#49771
Currently, a change in an error guide triggers a review for the `public-api` group (requests 3 reviewers and al least 2 must approve). This is overly aggressive and we can relax this by moving the guides under `fw-core` and extended diagnistics under `fw-compiler`. In this case 1 reviewer would be requested.
PR Close#49770
This commit updates the logic to avoid enabling hydration in case server response doesn't contain hydration-related info serialized. It can happen when `provideClientHydration()` call only happens on the client, but not on the server.
PR Close#49750
This commit updates the logic to detect a situation when hydration support was enabled only on the client. If that happens, Angular produces a warning in a console with a link to the error guide.
PR Close#49743
In archive mode the link to the current doc will now point to same page.
If the page doesn't exist anymore, it will show a contextualized warning message.
See #46850
PR Close#49063
New `ng new` apps no longer generate `enableProdMode` calls when an app is created. The prod mode is enabled via CLI flags (and configuration in the `angular.json` if needed).
PR Close#49723
The Domino DOM emulation library doesn't support shadow DOM. For such components we can not guarantee that client and server representations would match perfectly. To avoid hydration mismatch errors, such components are opted out of hydration.
PR Close#49722
Currently, non-destructive hydration for i18n blocks is not supported (but support is coming!).
This commit updates the serialization logic from throwing an error when it comes across an i18n
block to annotating a component with a skip hydration flag.
PR Close#49722
The `TransferState` class was updated in v14 in a way that the `BrowserTransferStateModule` was no longer required. The `BrowserTransferStateModule` was deprecated in v14.1 and it's currently empty. This commit removes the `BrowserTransferStateModule`.
BREAKING CHANGE: The deprecated `BrowserTransferStateModule` was removed, since it's no longer needed. The `TransferState` class can be injected without providing the module. The `BrowserTransferStateModule` was empty starting from v14 and you can just remove the reference to that module from your applications.
PR Close#49718
This commits updates the render to able to handle the slight differences between platform-server and platform-browser.
This is needed to eventually be able to remove `ServerRendererFactory2` and `EmulatedEncapsulationServerRenderer2` from platform-server.
PR Close#49630
This commit adds a hook to `WritableSignal` that is called whenever the
signal's value is updated via the mutation API. This hook allows consumers
to implement logic which is synchronous with signal sets (e.g. executing
effects). It's currently unused.
PR Close#49708
Angular lifecycle hooks should never be run as part of the reactive
context: we do not expect that signal reads in lifecycle hooks
report to any consumers.
In the current Angular some of the lifecycle hooks can be flushed
early, while executting template update pass. We need to make sure
that signal reads in those lifecycle hooks do not register as part
of the effect that marks components for check.
"
PR Close#49701
`ComponentRef.setInput` internally calls `markDirtyIfOnPush` which only marks
the given view as dirty but does not mark parents dirty like `ChangeDetectorRef.markForCheck` would.
https://github.com/angular/angular/blob/f071224720f8affb97fd32fb5aeaa13155b13693/packages/core/src/render3/instructions/shared.ts#L1018-L1024
`markDirtyIfOnPush` has an assumption that it’s being called from the parent’s template. That is, we don’t need to mark dirty to the root, because we’ve already traversed down to it.
The function used to only be called during template execution for input
bindings but was added to `setInput` later. It's not a good fit because
it means that if you are responding to events such as an emit from an `Observable`
and call `setInput`, the view of your `ComponentRef` won't necessarily get checked
when change detection runs next. If this lives inside some `OnPush` component tree
that's not already dirty, it only gets refreshed if you also call
`ChangeDetectorRef.markForCheck` in the host component (because it will be "shielded" be a non-dirty parent).
PR Close#49711
Previously, attempting to turn off the `experimentalDecorators` TypeScript configuration
option within an Angular project would result in build time errors. These errors were due
to an exposed Decorator signature from `@angular/core` that TypeScript thought was incompatible
with standard decorators. However, Angular's class decorators (`Component`, `Directive`, `Pipe`,
`Injectable`, `NgModule`) are actually already compatible with standard decorators. The export types for
the decorators only needed to be updated to reflect that compatibility. With the updated exported types,
applications will now successfully compile and execute in AOT mode with one important dependency injection
caveat explained in the note below.
For JIT mode applications that are built with the Angular CLI, `@ngtools/webpack`, or use `tsickle`,
there were also no additional changes required. These tools automatically convert property decorators
(now called field decorators) at build time to store Angular property metadata directly on the relevant
class. Building with these tools is the overwhelmingly common method of building an application. Any
applications that do not use one of these tools will not function at runtime in JIT mode if using standard
decorators. The behavior and code for when experimental decorators is enabled has been left intact.
NOTE: Angular constructor dependency injection that requires parameter decorators is not supported.
The standard decorator specification does not support parameter decorators. The `inject` function must be
used for all cases that previously required a parameter decorator. This includes such decorators as `Inject`,
`Optional`, `Self`, `SkipSelf`, `Host`, and `Attribute`. Constructor dependency injection that relies only
on the supplied parameter type will continue to function as expected if using AOT; as well as in JIT mode
if using the Angular CLI, `@ngtools/webpack` directly, or `tsickle`.
Documentation for the `inject` function can be found at: https://angular.io/api/core/inject
The decorator specification proposal can be found at: https://github.com/tc39/proposal-decorators
PR Close#49492
Previously, this PR cleaned up a bug introduced by #48679. However, since that PR needed to be rolled back, this PR now just checks in the test, to prevent that issue from re-occurring in the future.
PR Close#49693
The `ReflectiveInjector` symbol has been deprecated in v5 (11 major versions ago). This commit removes ReflectiveInjector and related symbols.
BREAKING CHANGE: The `ReflectiveInjector` and related symbols were removed. Please update the code to avoid references to the `ReflectiveInjector` symbol. Use `Injector.create` as a replacement to create an injector instead.
PR Close#48103
`RouterTestingModule` is not needed as of v16. Instead, TestBed
automatically provides `MockPlatformLocation` in order to help test
navigations in the application. The location mocks in the
RouterTestingModule aren't necessary anymore.
There doesn't appear to be any real documentation around
`RouterTestingModule` other than the API docs.
PR Close#49427
The previous fix for squashing empty children didn't quite work when the
existing route had segments. The result would be that the segments from
the existing route were dropped from the final URL.
PR Close#49691
This commit adds support by default for HTTP caching when using `provideClientHydration`. Users can opt-out of this behaviour by using the `withoutHttpTransferCache` feature.
```ts
import {
bootstrapApplication,
provideClientHydration,
withNoHttpTransferCache,
} from '@angular/platform-browser';
// ...
bootstrapApplication(RootCmp, {
providers: [provideClientHydration(withNoHttpTransferCache())]
});
```
PR Close#49699
In modern browsers, the 'javascript:' URL scheme is the only scheme that
can execute JavaScript when passed in a navigation URL context (e.g.
`a.href` value). Validate URL shemes to only contain characters allowed
in the URL specification ([a-zA-Z-+.]), and that are not javascript
(case insensitive). This is not a breaking change. The URL sanitization
is loosen.
PR Close#49659
This commit updates the Universal guide with hydration-related information. Also, this commit updates the content to introduce a sequence of steps to enable SSR (previously it was hard to follow the information flow of the document).
PR Close#49694
This commit adds the `provideClientHydration` function to the public API. This function can be used to enable the non-destructive Angular hydration.
Important note: the non-destructive hydration feature is in Developer Preview mode, learn more about it at https://angular.io/guide/releases#developer-preview.
Before you can get started with hydration, you must have a server side rendered (SSR) application. Follow the [Angular Universal Guide](https://angular.io/guide/universal) to enable server side rendering first. Once you have SSR working with your application, you can enable hydration by visiting your main app component or module and importing `provideClientHydration` from `@angular/platform-browser`. You'll then add that provider to your app's bootstrapping providers list.
```typescript
import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';
// ...
bootstrapApplication(RootCmp, {
providers: [provideClientHydration()]
});
```
Alternatively if you are using NgModules, you would add `provideClientHydration` to your root app module's provider list.
```typescript
import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
@NgModule({
declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
})
export class AppModule {}
```
You can confirm hydration is enabled by opening Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated.
Co-authored-by: jessicajaniuk <72768744+jessicajaniuk@users.noreply.github.com>
Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com>
PR Close#49666
To match the behaviour of Array.filter, typeguards can now be used on QueryList.filter to narrow the return type.
Fixes#38446
BREAKING CHANGE: QueryList.filter now supports type guard functions, which will result in type narrowing. Previously if you used type guard functions, it resulted in no changes to the return type. Now the type would be narrowed, which might require updates to the application code that relied on the old behavior.
PR Close#48042
It seems that changes in prior commits led to a new error in the Windows CI job,
likely due to its sandboxing setup in Bazel. This commit adds an explicit type
annotation that should avoid the error.
PR Close#49136
There used to be a subclass of `TraitCompiler` in ngcc, but now that ngcc has been removed
we can update `TraitCompiler` to no longer expose certain fields and methods.
PR Close#49136
There's an issue where formatting with `clang-format` doesn't agree with itself on how
the docblock for a field named `import` should be indented; if it is indented then it
removes the indentation, but then linting the source file reports an error where it
wants to revert the indentation change. By using computed property syntax this bug
is avoided.
PR Close#49136
The concept of "internal" and "adjacent" type expression used to be necessary to support
ngcc, as it had to process downleveled class declarations using an IIFE, where the class
name within the IIFE could be different from the outer class name. With the removal of
ngcc we no longer need to make this distinction, so this commit removes these concepts
entirely.
PR Close#49136
ngcc's reflection host would recognize tslib helpers and some JS builtin methods to allow
the static interpreter to evaluate compiled and downleveled JS code, but now that ngcc
has been removed this functionality is no longer being used.
PR Close#49136
This commit simplifies various parts of ngtsc to no longer support synthetic decorators,
downleveled enum members and inline declarations. These concepts were present to support
ngcc, but can be dropped now that ngcc has been removed.
PR Close#49136
With this commit, Sets are displayed with the label Set(#) where # is the size of the set. They are not expandable/editable though.
Partial fix for #49312
PR Close#49316
This commit adds a new option for `provideHttpClient` called
`withHttpTransferCache()`. When this option is passed, requests done on the server are cached and reused during the bootstrapping of the application in the browser thus avoiding duplicate requests and reducing load time.
This is the same as `TransferHttpCacheModule` in https://github.com/angular/universal/blob/main/modules/common/src/transfer_http.ts
PR Close#49509
This commit updates the logic to handle a case when the `ngSkipHydration` attribute is applied to the root node of an app. In this case, the hydration info should not be serialized and the contents of the app on the client should be cleared up before initial rendering.
PR Close#49675
This change exposes the onDestroy callback on the ApplicationRef
as the public API. It is useful for cases where people need to
execute cleanup logic on application teardown.
Closes#49087
PR Close#49677
The navigation transition clears the current navigation in the finalize
operator of the current navigation Observer. This commit both completes
the `bootstrapDone` observable and updates the transition to only take 1
emit from the completed navigation. Either of these changes on their own
would fix the issue. The latter is a preventative measure in case a
mistake like the former is made again.
fixes#49567
PR Close#49572
This commit adds a provider function that allows developers to configure
the `NgZone` instance for the application. In the future, this provider
will be used for applications to specifically opt-in to change detection
powered by ZoneJS rather than it being provided by default.
This API does _not_ specifically provide support for developers to define their own
`NgZone` implementation or opt in to `NoopNgZone` directly. Both of
these are possible today, but are effectively unsupported (applications
that use these are left to their own devices to run change detection at
the appropriate times). That said, developers can still use DI in
`bootstrapApplication` to provide an `NgZone` implementation instead,
it's just not specifically available in the
`provideZoneChangeDetection` function.
PR Close#49557
This commit updates the `bootstrapApplication` method to get the
`NgZone` instance from DI. This will allow a future change to enable
developers to configure `NgZone` in DI rather than adding the options to
the top level like in `bootstrapModuleFactory` (which is done in order
to get the NgZone instance without going through DI).
PR Close#49557
This commit removes a code that increments the `rendererCreateComment` counter unnecessarily. The counter gets incemented even in hydration scenarios where we do not create a comment node. The counter still gets incemented in the right locations (when we *actually* create a node).
PR Close#49656
The easiest way to access route data is now to use direct bindings to
component inputs rather than going through `ActivatedRoute`.
The tour of heroes guide still uses `ActivatedRoute` for now. I was
hesitant to remove all of the content in one swoop and the tour of
heroes is quite a bit more involved.
PR Close#49633
Adds ability for `RouterOutlet` to bind `Router` information to the routed
component's inputs. This commit also exposes some helpers for
implementers of custom outlets to do their own input binding if desired.
Resolves#18967
PR Close#49633
* Prevent reads of signals during the notification process. This shouldn't
ever be triggered by user code but is more of a preventative for
internal misuse. Reading a signal during notification would/could create
glitches where the values being read are not updated to reflect the
values being updated by the notification.
* Prevent signal writes inside of computed's. These are meant to be
derived values and should not have any side-effects like writing new
values to other signals
* Prevent signal writes inside of effects by default. Writing to signal
values during the execution of an effect can lead to the
`ExpressionChangedAfterItHasBeenCheckedError` if writing to signals
that represent global state which is read in a parent component. This is
mostly just a problem for `OnPush`/`CheckAlways` components, but with
signals being new and pure signal components not even available yet,
it will be the majority for a long time.
PR Close#49631
The change in effect timing collided with the introduction of these
rxjs-interop tests, resulting in them failing after the merge.
This commit adjusts the tests to rely on the real effect timing.
PR Close#49651
This commit removed the deprecated `EventManager` method `addGlobalEventListener`.
BREAKING CHANGE: Deprecated `EventManager` method `addGlobalEventListener` has been removed as it is not used by Ivy.
PR Close#49645
This commit implements an RxJS operator `takeUntilDestroyed` which
terminates an Observable when the current context (component, directive,
etc) is destroyed. `takeUntilDestroyed` will inject the current `DestroyRef`
if none is provided, or use one provided as an argument.
PR Close#49154
This commit adds the basic sketch for the implementation of `fromObservable`
and `fromSignal`, the two basic primitives which form the RxJS interop layer
with signals.
PR Close#49154
This commit adds the infrastructure for `@angular/core/rxjs-interop`, a new
core entrypoint which provides bidirectional interoperability between
Angular's built-in reactivity system of synchronous signals, and the RxJS
`Observable` abstraction.
The new entrypoint is set up as an empty shell in this commit, with its
implementation to follow in a followup.
PR Close#49154
We've been experimenting with the DeepReadonly type that would make
signal values deeply read-only and prevent accidental changes without
going to the owner of data. What we've found out during the experiments
is that additional safety net has more drawbacks than benefits: it just
introduces too much friction to be practical for daily usage.
PR Close#49154
This commit adds a logic to output basic hydration stats into a console. This is also helpful to ensure that hydration is enabled and works.
PR Close#49617
This commit adds a new metric into the `ngDevMode` to count a number of components that skipped hydration (where `ngSkipHydration` attribute was applied).
PR Close#49617
This commit updates the `effect` primitive and significantly changes the
timing of effect execution.
Previously, effects were scheduled via the microtask queue. This commit
changes effects to run throughout the change detection process instead.
Running effects this way avoids needing additional rounds of change
detection to resolve effects, with the tradeoff that they're harder to use
for model-to-model synchronization (which can be seen as a good thing).
PR Close#49641
This commit consolidates the `RendererFactory` and `Sanitizer` properties
of `LView` onto a single object, the `LViewEnvironment`. These properties
are both set from DI when the root view is created, and not overridden when
child views are created (but inherited from the parent view).
This is a precursor commit to adding the `EffectManager` into the
`LViewEnvironment`.
PR Close#49641
When navigating in the Router, the current approach does the redirects
and the creation of the `RouterStateSnapshot` in two separate steps
(applyRedirects and recognize). These two steps duplicate the route
matching logic, resulting in user code on routes being executing twice
(custom `UrlMatcher` and `canMatch` guards). This also duplicates the
complex matching logic in two places, which increases the bundle size
and maintenance burden.
This commit combines the `applyRedirects` and `recognize` steps into a
single matching algorithm.
fixes#26081
PR Close#49163
This change extends the effect API surface so effects can, optionally,
return a cleanup function. Such function, if returned, is executed
prior to the subsequent effect run.
PR Close#49625
This commit updates the logic in the Router that keep track of the initial navigation from being a synchronous to a microtask (Promise.resolve) to allow redirects during the initial navigation.
PR Close#49619
This commits adds `makeStateKey`, `StateKey` and `TransferState` methods in `@angular/core` as public API and deprecated the same exported symbols in `@angular/platform-browser`.
DEPRECATED: `makeStateKey`, `StateKey` and `TransferState` exports have been moved from `@angular/platform-browser` to `@angular/core`. Please update the imports.
```diff
- import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
+ import {makeStateKey, StateKey, TransferState} from '@angular/core';
```
PR Close#49563
Setting the `nonce` attribute using the property is not supported by Domino. This change update the usage to use `setAttribute` and also add a test to verify that the `nonce` is set when it should.
PR Close#49624
These two options where created for a feature which was never completed. https://github.com/angular/universal/pull/1860
Eventually these options should be added to `withTransferCache` HTTP logic.
DEPRECATED: `PlatformConfig.baseUrl` and `PlatformConfig.useAbsoluteUrl` platform-server config options are deprecated as these were not used.
PR Close#49546
This commit adds a background macrotask when an XHR request is performed. The macrotask is started during `loadstart` and ended during `loadend` event.
The macrotask is needed so that the application is not stabilized during HTTP calls. This is important for server rendering, as the application is rendering when the application is stabilized.
The application is stabilized when there are no longer pending Macro and Micro tasks intercepted by Zone.js, Since an XHR request is none of these, we create a background macrotask so that Zone.js is
made aware that there is something pending.
Prior to this change, we patched the `HttpHandler` in `@angular/platform-server` but this is not enough, as there can be multiple `HttpHandler` in an application, example when importing `HttpClient` in a lazy loaded component/module.
Which causes a new unpatched instance of `HttpHandler` to be created in the child injector which is not intercepted by Zone.js and thus the application is stabalized and rendered before the XHR request is finalized.
NB: Zone.js is fundamental for SSR and currently, it's not possible to do SSR without it.
Closes: #49425
PR Close#49546
Signal functions are marked with a `[SIGNAL]` symbol property, which was
previously set to `true`.
This commit changes the `[SIGNAL]` property to have the `ReactiveNode` as
its value instead. This doesn't change the behavior of the signal library
itself, but exposes the signal internals in a way where developer tooling
can look at any signal and interact with its dependency graph.
PR Close#49529
Previously the signals implementation maintained separate interfaces for
`Producer` and `Consumer` nodes, with implementers choosing to implement
one or both interfaces. Operations defined against those interfaces were
exposed as importable functions to be called with the object implementing
the relevant contract as the first argument.
This commit refactors the implementation to merge both abstractions into a
single `ReactiveNode` base class, which represents both producers and
consumers in the graph. Implementers choose to interact with a subset of the
`ReactiveNode` API depending on their role in the graph. Operations are now
available as protected methods on the base class, instead of separate
functions.
PR Close#49529
Previously, effects were queued in the global microtask queue and executed
directly. This had an undesired consequence: whichever effect scheduled
first determined the zone in which all other effects would run, *and* that
zone depended on where the signal happened to be set which triggered that
first effect. This behavior would be extremely unpredictable.
This commit adds zone awareness to the effect API. effects now capture the
current zone when they're created, and this zone is used to run the effect
callback regardless of which zone set the signal.
PR Close#49529
This commit adds a `DeepReadonly` type to the signals API, and makes signal
getters return an immutable version of their value type. This doesn't
prevent all mutation but adds some friction against modifying the values
within signals outside of the proper mutation APIs.
PR Close#49529
The `effect` implemented in the signal library is useful for testing but
does not integrate with Angular. This commit moves that code to the
actual framework package and integrates it with automatic cleanup via
`DestroyRef`. A simpler effect implementation is used in the signal tests to
test the `Watch` primitive.
Further commits will update the scheduling to tie effects together with
change detection.
PR Close#49529
This commit switches the `signal` and `computed` APIs to accept an optional
options argument as their second argument, instead of an equality function
directly. The equality function has moved to an option in the options
argument.
PR Close#49529
This commit renames the `SettableSignal` interface to align with recent
naming changes. `WritableSignal` is considered a more suitable name since
it supports more mutation operations than just directly setting.
PR Close#49529
This commit adds an assertion function to the public API, which allows
authors of functions which rely on `inject` to validate that they're being
called with the right context. This mostly produces a nicer error message
than calling `inject()` and relying on Angular's default error message for
that.
PR Close#49529
This fixes two cases where DOM node navigation during hydration would be broken. It also fixes an infinite loop on clearing DOM during skip hydration blocks
PR Close#49615
This commit implements a simple tracker of the pending tasks during initial rendering. The class allows adding and removing tasks from the set. The class also exposes a promise that gets resolved once the last task is removed.
This tracker is needed to keep track of ongoing processes like Router navigation (and potentially HTTP requests) and acts as a signaling mechanism to SSR and hydration that the application is in the "stable" state and a serialization can be performed.
This class would also act as a future replacement for the `ApplicationRef.isStable` for zoneless applications.
PR Close#49576
When navigating in the Router, the current approach does the redirects
and the creation of the `RouterStateSnapshot` in two separate steps
(applyRedirects and recognize). These two steps duplicate the route
matching logic, resulting in user code on routes being executing twice
(custom `UrlMatcher` and `canMatch` guards). This also duplicates the
complex matching logic in two places, which increases the bundle size
and maintenance burden.
This commit combines the `applyRedirects` and `recognize` steps into a
single matching algorithm.
fixes#26081
PR Close#49163
`ComponentRef.setInput` currently sets the input on the component regardless
of the previous value the method was called with. This results in
different behavior from bindings in templates, which only set inputs
when the value differs in the `Object.is` check from its previous value.
BREAKING CHANGE: ComponentRef.setInput will only set the input on the
component if it is different from the previous value (based on `Object.is`
equality). If code relies on the input always being set, it should be
updated to copy objects or wrap primitives in order to ensure the input
value differs from the previous call to `setInput`.
PR Close#49607
Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.
Example:
```html
<div style="width:"1px;""></div>
```
In the above case, `width` has an invalid value of `"1px"`, however the compiler will transform it to `1px` which makes it valid.
On the other hand, in the below case
```html
<div style="content:"foo""></div>
```
`content` has a valid value of `"foo"`, but since the compiler unwraps it to `foo` it becomes invalid. For correctness, we should not remove quotes.
```js
const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';
div.style.width; // ''
div.style.content; // ''
div.style.width='1px';
div.style.content='"foo"';
div.style.width; // '1px'
div.style.content; // '"foo"'
```
More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
PR Close#49460
Currently when the value of a styling property that has a unit is empty string a invalid value is generated.
Example:
`[style.width.px] = ""` will generate a value of `"px"`, when instead it should be `""`.
This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in https://github.com/angular/domino/commit/bfc9114d1eb5b7591c43a7c6aef6ad50d24e369f.
This commit fixes the issues and generate correct values.
PR Close#49460
The class-based guard and resolver interfaces are deprecated. The
`Router` types only support functional guards definitions. Classes can
still be used as the underlying implementation of functional guards and
resolvers but there will not be an interface requiring a specific structure
for those classes.
There are also helper functions like `mapToCanActivate` that allow
converting the existing class-based guards directly to functional guards
at the route definition. This will be done in a separate migration.
PR Close#49337
This commit updates the serialization logic to avoid serializing a path for a node that was content projected (based on template information), but is not present in the DOM. This can happen if a <ng-content> is used with the *ngIf="false", for example: `<ng-content *ngIf="false" />`.
PR Close#49590
This commit updates the `LView` in Angular to be a `Consumer` of
signals. If a signal is read when executing a template, it marks the
view dirty. In addition, if a signal is read when executing host
bindings, it also marks views dirty.
One interesting thing about signal reads in host bindings
is that they perform a bit better than what we can do with today's
APIs. In order to re-execute host bindings for an `OnPush` component that
might have changed, you would probably inject `ChangeDetectorRef` and call
`markForCheck`. This will mark the _current component_ and parents
dirty. However, host bindings are executed as part of refreshing the
_parent_ so there is really no need to re-execute the current component
if the only thing that changed is the host bindings. When a signal is
read in host bindings, it marks the parent dirty and not the component
that defined the host binding.
Additionally, this commit avoids allocating a full consumer for each
`LView` by re-using a consumer until template execution results in a
signal read. At this point, we assign that consumer to the `LView` and
create a new consumer to "tentatively" use for the future `LView`
template executions.
Co-authored-by: Dylan Hunn <github@dylanhunn.com>
PR Close#49153
Close#49110
From jest 29 and jest-preset-angular v13, the module transform logic
changed, and now jest-preset-angular use the use the tsconfig target
other than the hardcoded one, https://github.com/thymikee/jest-preset-angular/issues/2010
But jest-angular-preset doesn't introduce the @babel/plugin-transform-async-to-generator
which is needed by angular since `async/await` still need to be transformed
to promise for ES2017+ target.
So for now, we disable to output the uncaught error console log for a temp solution,
until jest-preset-angular find a proper solution.
PR Close#49325
Close#47209
Remove legacy browsers support, so we don't need to patch EventTarget
for very old browsers and cause issues in the new environment.
PR Close#49327
The preloading strategy did not handle a `loadComponent` on a route with
a static `children`. It only preloaded children if they were also
`loadChildren` or both were not lazy loaded.
fixes#49558
PR Close#49571
We are no longer publishing Angular Bazel to npm, but we are still
using it in the components repo. We should still publish it to
benefit from e.g. the APF v16 changes.
PR Close#49583
The `moduleId` directive field does not have any effect as of Ivy. In
View Engine it was used for resolving template and styles relative
to the component source location- but ultimately this is not needed
as the Angular compiler knows the source file location at build time,
and at runtime never even consulted `moduleId`. An XHR is always issue
using the extact specified URL.
For Angular CLI users, relative URLs in JIT are still possible because
the CLI has a TS transform that will replace the references with actual
Webpack imports.
`moduleId` does not seem worth keeping in the future, as it's not used
currently, and even if we would consider supporting relative JIT resource
URLs through it, it would be deeply coupled to CommonJS `module.id`.
DEPRECATED: The `@Directive`/`@Component` `moduleId` property is now
deprecated. It did not have any effect for multiple major versions and
will be removed in v17.
PR Close#49496
Previously, we've annotated all disconnected DOM nodes, even if they are not used in content projection. However, this situation is only possible in content projection and if it happens in other cases (for example, when a node was removed using direct DOM manipulations), this should be a mismatch error.
PR Close#49549
This diagnostic ensures that the special attribute `ngSkipHydration` is not a binding and has no other value than `"true"` or an empty value.
Fixes#49501
PR Close#49512
When we create a context to inject inside our ngTemplateOutlet, the context was declare as Object, therefore, there are no compilation error.
Now if we add a context, we get error at compile type.
BREAKING CHANGE: If the 'ngTemplateOutletContext' is different from the context, it will result in a compile-time error.
Before the change, the following template was compiling:
```typescript
interface MyContext {
$implicit: string;
}
@Component({
standalone: true,
imports: [NgTemplateOutlet],
selector: 'person',
template: `
<ng-container
*ngTemplateOutlet="
myTemplateRef;
context: { $implicit: 'test', xxx: 'xxx' }
"></ng-container>
`,
})
export class PersonComponent {
myTemplateRef!: TemplateRef<MyContext>;
}
```
However, it does not compile now because the 'xxx' property does not exist in 'MyContext', resulting in the error: 'Type '{ $implicit: string; xxx: string; }' is not assignable to type 'MyContext'.'
The solution is either:
- add the 'xxx' property to 'MyContext' with the correct type or
- add '$any(...)' inside the template to make the error disappear. However, adding '$any(...)' does not correct the error but only preserves the previous behavior of the code.
fix#43510
PR Close#48374
`entryComponents` have been deprecated since version 9, because with Ivy they weren't necessary. These changes remove any remaining references.
BREAKING CHANGE:
* `entryComponents` has been deleted from the `@NgModule` and `@Component` public APIs. Any usages can be removed since they weren't doing anyting.
* `ANALYZE_FOR_ENTRY_COMPONENTS` injection token has been deleted. Any references can be removed.
PR Close#49484
This commit patches `ts_library` to be able to produce `ES2022`. Also, updates the build tsconfig and sets `useDefineForClassFields` to `false` to keep the same behaviour of `ng_module`.
PR Close#49559
This commit updates parts of the FW to be ES2022 complaint.
These changes are needed to fix the following problems problems with using properties before they are initialized.
Example
```ts
class Foo {
bar = this.buz;
constructor(private buz: unknown){}
}
```
PR Close#49559
Several updates to Angular Package Format.
BREAKING CHANGE:
Several changes to the Angular Package Format (APF)
- Removal of FESM2015
- Replacing ES2020 with ES2022
- Replacing FESM2020 with FESM2022
PR Close#49559
This commit patches `ts_library` to be able to produce `ES2022`. Also, updates the build tsconfig and sets `useDefineForClassFields` to `false` to keep the same behaviour of `ng_module`.
PR Close#49332
This commit updates parts of the FW to be ES2022 complaint.
These changes are needed to fix the following problems problems with using properties before they are initialized.
Example
```ts
class Foo {
bar = this.buz;
constructor(private buz: unknown){}
}
```
PR Close#49332
Several updates to Angular Package Format.
BREAKING CHANGE:
Several changes to the Angular Package Format (APF)
- Removal of FESM2015
- Replacing ES2020 with ES2022
- Replacing FESM2020 with FESM2022
PR Close#49332
This adds user friendly error messages outlining exactly where hydration
mismatches occur and what was expected with easy to read stringified
DOM. It also includes a pointer to exactly where the mismatch happened
and lets the user know what was expected.
PR Close#49502
This commit updates the hydration logic to handle situations where DOM nodes might end up
being disconnected from the DOM tree. We serialize ids of those nodes into the hydration
state transfer data and use the information to switch from hydration to the regular "creation
mode" at runtime.
This situation may happen during the content projection, when some nodes don't make it
into one of the content projection slots (for example, when there is no default
<ng-content /> slot in projector component's template).
Note: we leverage the fact that we have this information available in the DOM emulation
layer (in Domino) for now. Longer-term solution should not rely on the DOM emulation and
only use internal data structures and state to compute this information.
PR Close#49471
This is based on some internal feedback. Adds logic to the standalone migration that attempts to preserve trailing commas when updating existing AST nodes. When creating new ones, it tries to infer whether to generate the trailing comma based on the surrounding code.
PR Close#49533
This commit removes the `renderApplication` overload that accepts a root component as the first parameter.
BREAKING CHANGE:
`renderApplication` method no longer accepts a root component as first argument. Instead, provide a bootstrapping function that returns a `Promise<ApplicationRef>`.
Before
```ts
const output: string = await renderApplication(RootComponent, options);
```
Now
```ts
const bootstrap = () => bootstrapApplication(RootComponent, appConfig);
const output: string = await renderApplication(bootstrap, options);
```
PR Close#49463
These ticks appear in the actual documentation and when copied verbatim while following the tutorial, running this command in the terminal simply does nothing.
PR Close#49525
This commit increases the threshold of payload size tracking tests from
500 bytes to 5,000 bytes, and from 1% to 5%. This is done to minimize merge
conflicts while still catching real regressions.
PR Close#49520
This commit updates the serialization logic to detect a situation when i18n was used for a template and throw an error to indicate that hydration for i18n blocks is not yet supported.
Hydration for i18n blocks will be added in follow up versions.
PR Close#49497
Angular Hydration uses Components as a hydration boundary, i.e. you can enable/disable hydration on per-component basis. This commit enforces that the `ngSkipHydration` can only be applied on component host nodes (an error if thrown otherwise).
PR Close#49500
This commit updates the serialization logic to recognized similar repeated views and instead of including the same info over and over again, a special field is added to the serialized view object with a number of repetitions. The hydration logic also recognizes the flag and creates the necessary number of dehydrated views in a container.
This optimization should help minimize the amount of extra annotations required for cases like *ngFor with large number of items.
PR Close#49475
This commit adds a logic to remove all views that were not cleaimed during the hydration. The process is started once the ApplicationRef becomes stable on the client (which matches the timing of serialization on the server).
PR Close#49455
This commit updates the logic to store references to the comment (anchor) node as a segment head, when a container is empty (no views). Previously, the logic verified whether a container is non-empty and only stored segment head in this case. The problem is that the ViewContainerRef later on uses the segment head to start the DOM lookup and as a result, the process can not be started, since we have `null`. Now the segment head reference would point to a comment node (the anchor node) and ViewContainerRef would be able to start the lookup process. For empty views, the segment head would become an anchor of the container (which is exactly what we need).
PR Close#49455
This commit adds serialization and hydration logic for content projection.
While hydration for regular elements relies on their location in the TNode tree, the content projection may move elements around, so in order to hydrate them correcty, the runtime needs some extra information. This commit adds a serialization logic that adds element locations (instructions on how to navigate to a particular element from another known location of other element) into the hydration state for the following cases:
- when a TNode is a first element in projection segment (other nodes are linked from that node)
- when a TNode's next sibling is different before and after projection (we serialize extra info about the template-based sibling)
- when a TNode's previous sibling was a content projection (i.e. `<ng-content>` slot), because we can not rely on the previous element in this case (projection happens at a later point)
PR Close#49454
This change makes it possible to remove a previously registered destroy
callback - to do so it is enough to call the unregistration function
returned from the onDestroy method call.
PR Close#49493
Excludes draft PRs from triage queue. Note that we cannot use
`draft:false` as otherwise all issues would be filtered. Rather
we need to negate `draft:true` which matches non-draft PRs and
normal issues.
PR Close#49515
Before this change the effect creation function was returning
an instance of the Effect interface with explicit destroy and
schedule operations. This commit makes the following changes
to the return type of effect:
- the interface is renamed from Effect to EffectRef;
- the only available method on this interface is destroy.
We want to tighten the interface in question so only a minimal
set of useful operations is initially exposed.
PR Close#49490
The `i18n` integration size test golden has been updated with
an increase 20hrs ago, but now with the recent Angular update,
it seems back to the previous size, a decrease in size.
https://github.com/angular/angular/pull/49495.
PR Close#49514
This commit adds serialization and hydration logic for content projection.
While hydration for regular elements relies on their location in the TNode tree, the content projection may move elements around, so in order to hydrate them correcty, the runtime needs some extra information. This commit adds a serialization logic that adds element locations (instructions on how to navigate to a particular element from another known location of other element) into the hydration state for the following cases:
- when a TNode is a first element in projection segment (other nodes are linked from that node)
- when a TNode's next sibling is different before and after projection (we serialize extra info about the template-based sibling)
- when a TNode's previous sibling was a content projection (i.e. `<ng-content>` slot), because we can not rely on the previous element in this case (projection happens at a later point)
PR Close#49454
This commit adds the ability to override the `WeakRef` implementation used
by signals as a private API. This can be used in certain environments to
allow tests which use older browsers to still run, albeit without weak
references.
PR Close#49466
Showing a minimum app to reproduce the bug.
1. Create the app and add angular material.
```
ng new project
cd project
ng add @angular/material
```
1. Overwrite the src/app/app.component.html with minimal content.
```
<button mat-button *ngIf="true"><span *ngIf="true" class="{{'a'}}"></span></button>
```
1. Run the app. The button is not shown because of an exception.
```
main.ts:6
ERROR TypeError: item.toLowerCase is not a function
at isCssClassMatching (core.mjs:8726:35)
at isNodeMatchingSelector (core.mjs:8814:22)
at isNodeMatchingSelectorList (core.mjs:8931:13)
at matchingProjectionSlotIndex (core.mjs:14179:13)
at Module.ɵɵprojectionDef (core.mjs:14222:49)
at MatButton_Template (button.mjs:113:99)
at executeTemplate (core.mjs:10534:9)
at renderView (core.mjs:10356:13)
at renderComponent (core.mjs:11529:5)
at renderChildComponents (core.mjs:10216:9)
```
Because isCssClassMatching() function does not take care if the value is not string, while attrs[] may contain AttributeMarker which is actually numbers, item.toLowerCase() throws the exception.
Just inserted a check if the item is string.
Created a testcase for the original fix. It causes an exception without the fix.
fix(core): add a check code to avoid an exception inside isCssClassMatching
Showing a minimum app to reproduce the bug.
1. Create the app and add angular material.
```
ng new project
cd project
ng add @angular/material
```
1. Add `import { MatButtonModule } from '@angular/material/button'`,
and also MatButtonModule inside @NgModule imports in src/app/app.module.ts to use MatButtonModule.
1. Overwrite the src/app/app.component.html with minimal content.
```
<button mat-button *ngIf="true"><span *ngIf="true" class="{{'a'}}"></span></button>
```
1. Run the app. The button is not shown because of an exception.
```
main.ts:6
ERROR TypeError: item.toLowerCase is not a function
at isCssClassMatching (core.mjs:8726:35)
at isNodeMatchingSelector (core.mjs:8814:22)
at isNodeMatchingSelectorList (core.mjs:8931:13)
at matchingProjectionSlotIndex (core.mjs:14179:13)
at Module.ɵɵprojectionDef (core.mjs:14222:49)
at MatButton_Template (button.mjs:113:99)
at executeTemplate (core.mjs:10534:9)
at renderView (core.mjs:10356:13)
at renderComponent (core.mjs:11529:5)
at renderChildComponents (core.mjs:10216:9)
```
Because isCssClassMatching() function does not take care if the value is not string, while attrs[] may contain AttributeMarker which is actually numbers, item.toLowerCase() throws the exception.
Just inserted a check if the item is string.
PR Close#48888
This PR adds missing documentation for `@angular/localize` package and fixes a tiny one-word typo in the `README.md` file for `@angular/localize schematic`.
Fixes#49219.
PR Close#49393
Adds support for marking a directive input as required. During template type checking, the compiler will verify that all required inputs have been specified and will raise a diagnostic if one or more are missing. Some specifics:
* Inputs are marked as required by passing an object literal with a `required: true` property to the `Input` decorator or into the `inputs` array.
* Required inputs imply that the directive can't work without them. This is why there's a new check that enforces that all required inputs of a host directive are exposed on the host.
* Required input diagnostics are reported through the `OutOfBandDiagnosticRecorder`, rather than generating a new structure in the TCB, because it allows us to provide a better error message.
* Currently required inputs are only supported during AOT compilation, because knowing which bindings are present during JIT can be tricky and may lead to increased bundle sizes.
Fixes#37706.
PR Close#49468
When having a recursive circle of imports on standalone components, `queueTypesFromModulesArrayRecur` triggered a `Maximum call stack size exceeded` error.
This commit fixes this.
Fixes#49469
PR Close#49473
This reverts commit 13dd614cd1.
This breaks a g3 Typescript compilation tests where diagnostics are
expected for a missing input in the component.
PR Close#49467
Angular uses inline styles to insert the styles associated with a component. This violates the strict styles [Content Security Policy](https://web.dev/strict-csp/) which doesn't allow inline styles by default. One way to allow the styles to be applied is to set a `nonce` attribute on them, but because the code for inserting the stylesheets is deep inside the framework, users weren't able to provide it without accessing private APIs.
These changes add a new `CSP_NONCE` injection token that will allow users to provide a nonce, if their app is using CSP. If the token isn't provided, the framework will look for an `ngCspNonce` attribute on the app's root node instead. The latter approach is provided as a convenience for apps that render the `index.html` through a server, e.g. `<app ngCspNonce="{% randomNonceAddedByTheServer %}"></app>`.
This PR addresses adding the nonce to framework-generated styles. There will be follow-up PRs that add support for it in critical CSS tags in the CLI, and in Angular Material.
Fixes#6361.
PR Close#49444
Adds support for marking a directive input as required. During template type checking, the compiler will verify that all required inputs have been specified and will raise a diagnostic if one or more are missing. Some specifics:
* Inputs are marked as required by passing an object literal with a `required: true` property to the `Input` decorator or into the `inputs` array.
* Required inputs imply that the directive can't work without them. This is why there's a new check that enforces that all required inputs of a host directive are exposed on the host.
* Required input diagnostics are reported through the `OutOfBandDiagnosticRecorder`, rather than generating a new structure in the TCB, because it allows us to provide a better error message.
* Currently required inputs are only supported during AOT compilation, because knowing which bindings are present during JIT can be tricky and may lead to increased bundle sizes.
Fixes#37706.
PR Close#49453
`ng-app` is an AngularJS attribute, see https://docs.angularjs.org/api/ng/directive/ngApp. Using this attribute on a non AngularJS element can cause DI issues in AngularJS when running an AngularJS and Angular application on the same page.
As such, we avoid such problems the Angular `ng-app` attribute is renamed to `ng-app-id`.
PR Close#49424
The mentioned 2 classes have been combined since it is no longer required to have a separate `SharedStylesHost` for SSR. This changes also reduces the memory usage footprint as remove 1 Map that stores the CSS strings.
PR Close#49424
This reverts commit 1a6ca68154.
This breaks tests in google3 which might be depending on private APIs. We
need to update these tests before we can land this PR.
PR Close#49449
This restores the separation between adjacent text nodes that is lost during server serialization when parsed by the browser. It adds a special comment node just prior to the serialization process that is then restored as a separated node during hydration.
PR Close#49419
During DOM serialization, empty text nodes are lost when the client parses the DOM. To solve this problem comment nodes are added where the empty nodes are located right before serialization. Those comments then get replaced during hydration with the proper empty text nodes.
PR Close#49419
The below error is displayed during some tests
```js
ERROR: 'Unhandled Promise rejection:', 'Cannot read properties of null (reading 'markForCheck')', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', TypeError: Cannot read properties of null (reading 'markForCheck')
TypeError: Cannot read properties of null (reading 'markForCheck')
at AsyncPipe2._updateLatestValue (http://angular-ci.local:9876/base/dist/legacy-test-bundle.spec.js?49174f830d8743d5c8a9551b77550b859b934291:51947:19)
```
This is caused by the fact that `ref` in `AsyncPipe` is initialized with a value of `null` which causes `_updateLatestValue` to fail since it is not expected to be `null`.
This change ensures that a `ref` is always provided and that all subscriptions are disposed off after each test.
PR Close#49433
Prior to this change, a random application ID was generated each time which forced users using server rendering to provide an application ID themselves. This was needed to handle rare cases when multiple Angular applications are rendered on the same page.
With this change the application ID is no longer generated randomly and instead it is hard coded.
BREAKING CHANGE:
The `APP_ID` token value is no longer randomly generated. If you are bootstrapping multiple application on the same page you will need to set to provide the `APP_ID` yourself.
```ts
bootstrapApplication(ComponentA, {
providers: [
{ provide: APP_ID, useValue: 'app-a' },
// ... other providers ...
]
});
```
PR Close#49422
This commit deprecated ` BrowserModule.withServerTransition` instead `APP_ID` should be used instead to configure the app id.
DEPRECATED: `BrowserModule.withServerTransition` has been deprecated. `APP_ID` should be used instead to set the application ID.
NB: Unless, you render multiple Angular applications on the same page, setting an application ID is not necessary.
Before:
```ts
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
...
]
```
After:
```ts
imports: [
BrowserModule,
{ provide: APP_ID, useValue: 'serverApp' },
...
],
```
PR Close#49422
Adds support for marking a directive input as required. During template type checking, the compiler will verify that all required inputs have been specified and will raise a diagnostic if one or more are missing. Some specifics:
* Inputs are marked as required by passing an object literal with a `required: true` property to the `Input` decorator or into the `inputs` array.
* Required inputs imply that the directive can't work without them. This is why there's a new check that enforces that all required inputs of a host directive are exposed on the host.
* Required input diagnostics are reported through the `OutOfBandDiagnosticRecorder`, rather than generating a new structure in the TCB, because it allows us to provide a better error message.
* Currently required inputs are only supported during AOT compilation, because knowing which bindings are present during JIT can be tricky and may lead to increased bundle sizes.
Fixes#37706.
PR Close#49304
This commit implements hydration support for view containers, which should make `*ngIf`, `*ngFor` and other structural directive work with hydration.
The logic also respects the `ngSkipHydration` flag and skips hydration in such cases.
PR Close#49382
This commit updates the serialization logic to include information about views from view containers (based on underlying LContainer info). The information is needed during hydration to pick a correct instance of dehydrated view (this logic will be implemented in a followup commit).
PR Close#49382
This commit updates the serialization logic to include information about templates that were used to create embedded views. The information is needed during hydration to pick a correct instance of dehydrated view (this logic will be implemented in a followup commit).
PR Close#49382
BREAKING CHANGE:
`ComponentFactoryResolver` has been removed from Router APIs.
Component factories are not required to create an instance of a component
dynamically. Passing a factory resolver via resolver argument is no longer needed
and code can instead use `ViewContainerRef.createComponent` without the
factory resolver.
PR Close#49239
With the introduction of `EnvironmentInjector`, we added an operation to run
a function with access to `inject` tokens from that injector. This operation
only worked for `EnvironmentInjector`s and not for element/node injectors.
This commit deprecates `EnvironmentInjector.runInContext` in favor of a
standalone API `runInInjectionContext`, which supports any type of injector.
DEPRECATED: `EnvironmentInjector.runInContext` is now deprecated, with
`runInInjectionContext` functioning as a direct replacement:
```typescript
// Previous method version (deprecated):
envInjector.runInContext(fn);
// New standalone function:
runInInjectionContext(envInjector, fn);
```
PR Close#49396
This commit adds the `provideServerSupport()` function that returns the `EnvironmentProviders` needed to setup server rendering without NgModules.
PR Close#49380
This commit moves the providers for `NgZone`-based change detection to a
single provider function. This function is currently called by default
in all places where `NgZone` was provided
(`bootstrapApplication`, `bootstrapModule`, and `TestBed`).
When we want to make Angular applications zoneless by default, we
can make a public provider method that has to be used in order to enable
the zone change detection features. When this method is not called,
Angular would use `NoopNgZone` by default and not initialize any
subscriptions to the `NgZone` stability events.
Side note: There are actually two places that `NgZone` is provided for `TestBed`
(providers in `compileTestModule` and `BrowserTestingModule`). This
likely doesn't need to be in both locations.
PR Close#49373
This refactor extracts the `NgZone` microtask subscription to a new
"ChangeDetectionScheduler". With this change, `ApplicationRef` not
longer injects `NgZone` directly. In the future, we can update the
providers that depend on `NgZone` to not use zones by default but
instead require a specific-opt in.
PR Close#49373
This extracts the zone-based error handling in `ApplicationRef` to a new
token. This works towards removing `NgZone` as a dependency in
`ApplicationRef`.
PR Close#49373
`ApplicationRef.isStable` is entirely powered by the state of `NgZone`.
The implementation should be part of `NgZone` code rather than built in
to `ApplicationRef`. In the future, `ApplicationRef.isStable` should
likely be removed in favor of the API living on the `NgZone`
class/interface instead.
PR Close#49373
add function `provideServiceWorker` to register a service worker in standalone applications without using `ServiceWorkerModule.register()`
PR Close#48247
Prior to this change component styles generated on the server where removed prior to the client side component being rendered and attached it's own styles. In some cases this caused flickering. To mitigate this `initialNavigation: enabledBlocking'` was introduced which allowed the remove of server styles to be defer to a latter stage when the application has finished initialization.
This commit changes the need for this, by not removing the server generated component styles and reuse them for client side rendering.
PR Close#48253
Prior to this change the component IDs where generated based on a counter. This is problematic as there is no guarantee that a component will get the same ID that was assigned on the server when generated on the client side.
This is paramount to be able to re-use the component styles generated on the server.
PR Close#48253
Before this change `ɵɵdefineDirective` called `ɵɵdefineComponent` under the hood. This is problematic for the consistent component id generation as it could result in hash collisions for certain directives. Directives however do not require an id.
This changes moves common definition generation logic into a separate function that is re-used in `ɵɵdefineDirective` and `ɵɵdefineComponent`.
PR Close#49350
The decorator downlevel transform is never used for actual class
decorators because Angular class decorators rely on immediate execution
for JIT. Initially we also supported downleveling of class decorators
for View Engine library output, but libraries are shipped using partial
compilation output and are not using this transform anymore.
The transform is exclusively used for JIT processing, commonly for
test files to help ease temporal dead-zone/forward-ref issues. We can
remove the class decorator downlevel logic to remove technical debt.
PR Close#49351
The private util `isObservable` was actually just testing the same thing as`isSubscribable()`. As the implementation is closer to the function's name, let's only keep ``isSubscribable`.
PR Close#49295
This adds the ngSkipHydration annotation, which allows users to
opt hydration boundaries out of hydration. This enables incremental
adoption of hydration by letting users skip hydration on components
that have implementation issues that conflict with hydration.
co-authored-by: AndrewKushnir <akushnir@google.com>
PR Close#49345
This commit incrementally builds on top of #49285 and adds the logic to hydrate <ng-container>s and their contents. This implementation supports simple <ng-container>s that don't have any Angular features (like *ngIf/*ngFor, etc) and are not content-projected.
The subsequent commits will extend the logic further to support more complex scenarios.
PR Close#49303
This commit incrementally builds on top of https://github.com/angular/angular/pull/49271 and adds the logic to hydrate elements and text nodes that don't have any Angular features (like *ngIf/*ngFor, etc) and are not content-projected.
The subsequent commits will extend the logic further to support more complex scenarios.
Co-authored-by: Jessica Janiuk <jessicajaniuk@google.com>
Co-authored-by: Andrew Kushnir <akushnir@google.com>
PR Close#49285
Close#45698
KeyEventsPlugin now has different behavior with EventsPlugin, it will
always run inside ngZone with ngZone.runGuarded() no matter the
component is initialized inside or outside of NgZone, this PR
make sure KeyEventsPlugin bahave the same with other events.
PR Close#49330
Previously (at the early days of Ivy) a TNode used to keep an array of TViews, but the logic was changed since that time, but the `tViews` field remained on TNode interface (+ corresponding typings).
This commit renames TNode.tViews to TNode.tView and cleans up typings.
PR Close#49313
**Important note**: this is a first commit in a series of commits that will be needed
to support non-destructive hydration. Stay tuned for further updates!
This commit lays the foundation on top of which more hydration logic will be
added in follow up PRs. This PR includes:
* Initial serialization of hydration data
* Data transfer of hydration annotations from server side to client
* Accessing hydration info and populating internal data structures
* Initial APIs (currently private) that enable hydration (in a tree-shakable manner)
* Cleanup of annotations post hydration
* Initial test infrastructure and basic test cases
This commit does **not** expose any public APIs. They'll be exposed later, when
more hydration logic is implemented to a state when it can cover most common
use-cases.
Co-authored-by: Jessica Janiuk <jessicajaniuk@google.com>
Co-authored-by: Andrew Kushnir <akushnir@google.com>
PR Close#49271
We recently migrated the testing example to use the router testing
harness. There was one instance of the previous non-`TestBed` examples
left that still relies on a stub that has already been removed.
This example is not used anywhere and we should rather encourage
a single pattern of testing. i.e. the harness as per recent changes.
This commit removes the broken file.
PR Close#49293
Currently, examples with test commands like `ng build` are *never*
using the local version of `//packages/compiler-cli`. This is because
the CLI is invoked accidentally from within `external/aio_example_deps`.
Since the CLI relies on importing the compiler-cli, it will always
resolve the dependency from that directory- causing it to be always
the version installed via `aio/examples/tools/shared/package.json`.
We should never resolve symlinks and escape the e2e sandbox. That way
the compiler-cli would be resolved properly and could also become the
locally built one, depending on the test mode (i.e. npm or "local").
PR Close#49293
Chromium is launched via Karma from within the Bazel AIO example e2e
tests. This breaks depending on the platform and sandbox mechanism used.
We should never use Chromium's sandbox on top of Bazel's sandbox
invocation. The Angular CLI exposes a browser exactly for this use-case.
PR Close#49293
Whenever we run example tests using the local framework packages, the
e2e tests will have the local framework packages symlinked in the
`node_modules`.
This works well in general, but due to NodeJS by default resolving
symlinks to the target location, NodeJS will end up looking for
transitive dependencies in the `bazel-bin` instead of in the example
`node_modules` folder. This means that we end up incorrectly resolving
older versions of `@angular/core` that end up existing in the main
project dependencies. This causes errors like:
```
Error: ../../home/circleci/.cache/bazel/_bazel_circleci/9ce5c2144ecf75d11717c0aa41e45a8d/execroot/angular/bazel-out/k8-fastbuild/bin/packages/common/npm_package/http/testing/index.d.ts:12:21 - error TS2307: Cannot find module '@angular/common/http' or its corresponding type declarations.
12 import * as i1 from '@angular/common/http';
~~~~~~~~~~~~~~~~~~~~~~
Error: ../../home/circleci/.cache/bazel/_bazel_circleci/9ce5c2144ecf75d11717c0aa41e45a8d/execroot/angular/bazel-out/k8-fastbuild/bin/packages/common/npm_package/index.d.ts:1630:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.
1630 static ɵdir: i0.ɵɵDirectiveDeclaration<NgClass, "[ngClass]", never, { "klass": "class"; "ngClass": "ngClass"; }, {}, never, never, true, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
```
We can fix this by properly ensuring that NodeJS does not resolve
symlinks, but rather preserves them.
In the error above, the e2e tests end up accidentally resolving
`@angular/core` v14 that comes from `@angular/benchpress`. Angular
Benchpress is installed via `@angular/build-tooling` in the project
root.
PR Close#49293
This causes the e2e tests to fail. The tests were compiled using a
tsconfig with `lib=dom`, but the tests explicitly tried to pull in the
Node types. This causes a conflict for e.g. `AbortController` types.
PR Close#49293
The `run-example-e2e` script does not properly fail if configured
tests of examples are failing. This happens when a CLI example
configures multiple tests in the `example-config`. Due to incorrect
usage of promises in combination with reduce, only the last test
command had an effect on the overall test conclusion.
A similar issue seems to occur with SystemJS Protractor tests.
This commit fixes the problem and also cleans up the code a little
by switching it to `async/await`.
PR Close#49293
The `Router` already has the `getCurrentNavigation()` helper function to
expose information about the ongoing navigation.
`lastSuccessfulNavigation` is actually already exposed in the
`Navigation` object. This commit only _slightly_ extends the current API
surface by providing access to the `lastSuccessfulNavigation` object
outside of an ongoing navigation.
fixes#45685
PR Close#49235
This commit updates the documentation on testing the
`Router` to use the `RouterTestingHarness` rather than stubs.
The stubs described in the previous form of this document actually
creates tests which are incapable of catching bugs related to the
component's interaction with the `Router`. In addition, managing the
stubs is more difficult than using the real `Router` classes.
Stubbing something like the `RouterLink` is quite harmful because it
neither tests the actual URL being created, nor the end result of the
navigation. There have been serveral bug fixes in the Router over the
years the would change the outcome of these but would not be caught by
tests which create a stub.
PR Close#48553
* With tsc improvements some types can be refined.
* Removing unnecessary non-null assertions.
* Using std native methods instand of custom functions
* Using @ts-expect-error instead of `any` type assertion to keep code navigation.
PR Close#49206
The `renderApplication` now also accepts a bootstrapping function call with return `Promise<ApplicationRef>`as the first parameter.
Example:
```ts
const bootstrap = () => bootstrapApplication(RootComponent, appConfig);
const output: string = await renderApplication(bootstrap);
```
PR Close#49248
This zone code was added with the incorrect assumption that it would
avoid scheduling a new change detection by creating the timeout outside
of the Angular zone. However, it has recently been (re)discovered that
calling `zone.run` when you are outside the angular zone results in a
synchronous change detection. With that, this bit of code doesn't
actually accomplish what it set out to do so it can be removed.
minimal repro: https://stackblitz.com/edit/angular-hbzbqs?file=src%2Fmain.ts
PR Close#49238
The deprecated `XhrFactory` export from `@angular/common/http` has been removed.
BREAKING CHANGE:
Deprecated `XhrFactory` export from `@angular/common/http` has been removed. Use `XhrFactory` from `@angular/common` instead.
PR Close#49251
The deprecated `renderModuleFactory` has been removed as it is no longer necessary with Ivy.
BREAKING CHANGE: `renderModuleFactory` has been removed. Use `renderModule` instead.
PR Close#49247
This commits add a utility method to merge multiple `ApplicationConfiguration` into one from left to right. This is useful for server rendering were an application might have several configurations.
Usage Example:
```ts
const config = mergeApplicationConfig(appConfig, appServerConfig);
```
PR Close#49253
This is needed to provide the merge configuration method which will reside in core.
DEPRECATED: `ApplicationConfig` has moved, please import `ApplicationConfig` from `@angular/core` instead.
PR Close#49253
This commit moves the `APP_BOOTSTRAP_LISTENER` token into the `application_ref.ts` to avoid a risk of circular dependencies. The main problem is that the token refers to the `ComponentRef`, which in turn refers to more symbols, thus making the `application_tokens.ts` file susceptible to circular dependencies. Such a dependency was identified in https://github.com/angular/angular/pull/49271.
PR Close#49273
The new `bootstrapApplication` API doesn't include Protractor support anymore which may cause existing e2e tests to break after the migration. These changes add some logic that will provide Protractor support if any imports to `protractor` or `protractor/*` are detected.
PR Close#49274
The example in the code snippet below this line of text shows `ActivatedRouter` being injected into a component's constructor. When I read instruction to inject A`ActivatedRouter` into **application's** constructor, I assumed this meant the constructor for `app.component.ts`.
Editing to clarify/match code example below.
PR Close#49270
DestroyRef represents a concept of lifecycle scope where destroy
callbacks can be registered. Such callbacks are automatically
executed when a given scope ends it lifecycle.
In practice the most common lifecycle scopes would be represented by:
- a component or en embedded view;
- instance of `EnvironnementInjector`.
PR Close#49158
BREAKING CHANGE: Node.js v14 support has been removed
Node.js v14 is planned to be End-of-Life on 2023-04-30. Angular will stop supporting Node.js v14 in Angular v16. Angular v16 will continue to officially support Node.js versions v16 and v18.
PR Close#49255
If a class is declared in multiple modules, the standalone migration may end up generating invalid code. While declaring a class in multiple modules is an error, it can happen with modules in tests. These changes avoid the issue by using a `Set` to track the classes being migrated.
PR Close#49245
This change makes the `createUrlTreeFromSnapshot` added in #45877 the
default and only behavior in the Router. This now addreses #42191, #38276, #22763,
and #48472 without needing to create custom handling to
call `createUrlTreeFromSnapshot` (since it's now called by `Router.createUrlTree`).
BREAKING CHANGE: Tests which mock `ActivatedRoute` instances may need to be adjusted
because Router.createUrlTree now does the right thing in more
scenarios. This means that tests with invalid/incomplete ActivatedRoute mocks
may behave differently than before. Additionally, tests may now navigate
to a real URL where before they would navigate to the root. Ensure that
tests provide expected routes to match.
There is rarely production impact, but it has been found that relative
navigations when using an `ActivatedRoute` that does not appear in the
current router state were effectively ignored in the past. By creating
the correct URLs, this sometimes resulted in different navigation
behavior in the application. Most often, this happens when attempting to
create a navigation that only updates query params using an empty
command array, for example `router.navigate([], {relativeTo: route,
queryParams: newQueryParams})`. In this case, the `relativeTo` property
should be removed.
PR Close#48508
After the move of the `TransferState` logic, this file only contains a module that used to have the `TransferState` in provider list (but was refactored a while ago after `TransferState` became tree-shakable).
PR Close#49222
This commit moves the `TransferState` class implementation to `@angular/core`. This class will be needed in core in followup changes and `core` can not depend on `platform-browser` package.
The `core` package does **not** export those symbols into public API surface.
The `platform-browser` package re-exports the symbols under same names for backwards-compatibility.
PR Close#49222
This commit introduces helper functions to easily convert `Injectable`s with
functions compatible with `Route` guards to the corresponding guard functions.
These functions will serve to aid in migrating off of the now deprecated
class-based guards, but also provide an easy avenue to still defining
guards as `Injectable` classes if that is desired.
PR Close#48709
Add a more specific error message when defining a lazy-loaded route using
`loadComponent` and passing it a NgModule instead of a standalone component,
when the user should actually be using `loadChildren`.
PR Close#49164
Fix the function stripping the base path from the URL, as the current implementation uses the base path as part of a regex, which wrongly makes paths fails that contain characters such as a parenthesis (example: C:/Users/MyUser(Test)/project).
Fixes#49179
PR Close#49181
This commit updates the `TNode` to include a reference to the previous sibling node. Currently, TNode has references to the next sibling and parent nodes, but in followup changes we'd need to have access to previous TNodes (to determine position of the current node).
PR Close#49223
Close#47872
zone-node only patches `Promise.prototype.then` instead of patch
`Promise` itself. So the new NodeJS `SafePromise` will not complain
the Promise.prototype.then called on incompatible receiver.
We should also do this change on browser zone.js patch, but it will
be a big breaking change, because Promise.prototype.then will not work
with `fakeAsync` any longer.
PR Close#49144
This commit updates the TransferState class to move its init logic from the `useFactory` function to its constructor. The change is needed to make the init behavior consistent across different injection scenarios and tolerate the issue described in https://github.com/angular/angular/issues/49190.
PR Close#49191
This commit updates the `elementStart` instruction to avoid creating DOM nodes before creating a corresponding TNode. This refactoring is needed to make sure this internal logic is consistent across all instructions.
PR Close#49172
Consider the following scenario:
1. A TS file with a component and templateUrl exists
2. The template file does not exist.
3. First build: ngtsc will properly report the error, via a FatalDiagnosticError
4. The template file is now created
5. Second build: ngtsc still reports the same errror.
ngtsc persists the analysis data of the component and never invalidates
it when the template/style file becomes available later.
This breaks incremental builds and potentially common workflows
where resource files are added later after the TS file is created. This
did surface as an issue in the Angular CLI yet because Webpack requires
users to re-start the process when a new file is added. With ESBuild
this will change and this also breaks incremental builds with
Bazel/Blaze workers.
To fix this, we have a few options:
* Invalidate the analysis when e.g. the template file is missing. Never
caching it means that it will be re-analyzed on every build iteration.
* Add the resource dependency to ngtsc's incremental file graph. ngtsc
will then know via `host.getModifiedResources` when the file becomes
available- and fresh analysis of component would occur.
The first approach is straightforward to implement and was chosen here.
The second approach would allow ngtsc to re-use more of the analysis
when we know that e.g. the template file still not there, but it
increases complexity unnecessarily because there is no **single**
obvious resource path for e.g. a `templateUrl`. The URL is attempted
to be resolved using multiple strategies, such as TS program root dirs,
or there is support for a custom resolution through
`host.resourceNameToFileName`.
It would be possible to determine some candidate paths and add them to
the dependency tracker, but it seems incomplete given possible external
resolvers like `resourceNameToFileName` and also would likely not have
a sufficient-enough impact given that a broken component decorator is
not expected to remain for too long between N incremental build
iterations.
PR Close#49184
Adds some logic to automatically delete `export * from './foo'` style imports. Previously they weren't being picked up, because finding all the references using the language service doesn't include barrel exports.
PR Close#49176
Drops support for TypeScript 4.8 from the compiler and removes all of the compatibility code we had for it.
BREAKING CHANGE:
* TypeScript 4.8 is no longer supported.
PR Close#49155
The `standalone-bootstrap` migration now migrates `HttpClientModule` imports to `provideHttpClient(withInterceptorsFromDi())` instead of `importProvidersFrom(HttpClientModule)`.
The `withInterceptorsFromDi()` feature is added to make sure class-based interceptors still works if there are any in the application.
Fixes#48948
PR Close#48949
un-commented tags are responsible for rendering problem of markdown document. This commit fixes the http make jsonp request guide.
fixes#49151
PR Close#49152
This commit exposes `signal`, `computed`, `effect` and various helpers from
the `@angular/core` entrypoint.
These APIs are marked as `@developerPreview` and are still prototypes in
active development. Their final shapes will be subject to our internal
design reviews as well as one or more community RFCs. We're exporting them
now to allow for experimentation using 16.0.0 next and RC releases.
PR Close#49150
Tests sometimes do not mock out the `PlatformLocation` and end up
affecting real browser state. This can mean changing the real URL of the
browser during a test, updating the History state object, or any number
of other stateful operations. This can result in a test unintentionally affecting
other tests in the suite because the browser state does not usually get
reset before the next test runs. Providing `MockPlatformLocation` by
default prevents these types of accidental test leakages.
In addition, not providing `MockPlatformLocation` by default led to
developers needing to add `RouterTestingModule` to their test suite to
avoid the problems above. This module has spy `Location` providers which
prevent those issues. This commit now makes `RouterTestingModule`
obsolete. Developers can now just use `RouterModule.forRoot` or
`provideRouter` directly in tests _without_ needing to learn to import
additional test providers or modules.
With this, we should consider deprecating `RouterTestingModule` altogether and
migrating developers to `RouterModule.forRoot` or `provideRouter` instead. There
are some small differences between `SpyLocation` and
`MockPlatformLocation` that might cause tests to fail after the
migration (`MockPlatformLocation` is actually more correct in its
behaviors). If this happens, we can advise developers to also add
`provideLocationMocks()` to their test providers, which would re-provide
the `SpyLocation` like before and should make the tests pass again.
BREAKING CHANGE: `MockPlatformLocation` is now provided by default in tests.
Existing tests may have behaviors which rely on
`BrowserPlatformLocation` instead. For example, direct access to the
`window.history` in either the test or the component rather than going
through the Angular APIs (`Location.getState()`). The quickest fix is to
update the providers in the test suite to override the provider again
`TestBed.configureTestingModule({providers: [{provide: PlatformLocation, useClass: BrowserPlatformLocation}]})`.
The ideal fix would be to update the code to instead be compatible with
`MockPlatformLocation` instead.
PR Close#49137
41e2a68e30 added a `type` property on all router events, and added all type of events to the `Event` union type, but forgot to remove `RouterEvent`.
This removes the benefit of the `type` field, because it is not possible to write:
```
this.router.events.pipe(filter((event: Event): event is NavigationEnd => event.type === EventType.NavigationEnd)).subscribe(/*...*/);
```
as `RouterEvent` does not have a `type` field (hence TS complains).
This commit fixes the issue by removing `RouterEvent` from the union type.
BREAKING CHANGE: The `RouterEvent` type is no longer present in the `Event` union type representing all router event types. If you have code using something like `filter((e: Event): e is RouterEvent => e instanceof RouterEvent)`, you'll need to update it to `filter((e: Event|RouterEvent): e is RouterEvent => e instanceof RouterEvent)`.
PR Close#46061
This commit checks in (but does not export) a prototype implementation of
Angular Signals, along with its unit test suite and a README explaining the
algorithms used.
Signals are not a new concept in the framework space, but there are many
different flavors of implementations. These differ radically both in terms
of public API as well as behavioral details (such as eager vs lazy
computation, batching behavior, equality, cleanup, nesting, etc).
This commit comprises a bespoke implementation that we've designed to best
meet Angular's needs, especially when it comes to compatibility and
flexibility of use within existing applications.
Many of the API features of this implementation of signals, as well as the
larger direction of reactivity in Angular, will be discussed in future RFCs.
Co-Authored-By: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
PR Close#49091
Since we have less information about how to copy test components, we copy all the `imports` from the `configureTestingModule` call into the component's `imports`. It fixes some tests, but it can cause issues with animations modules, because they throw errors if they're imported multiple times.
These changes add an exception for animations modules imported in testing modules.
PR Close#49147
Very cosmetic, but it might be necessary :
I updated the ```canAccess``` method second signature name and type in the provided sample. As it stands, it triggers `TS(2345): Argument of type 'Route' is not assignable to parameter of type 'string'`.
PR Close#49140
Fixes that the `ImportManager` was returning the `propertyName` instead of the `name` when there's an import with a conflicting identifier.
PR Close#49139
The options to generate NgFactory and NgSummary files were added to Ivy for backwards compatibility with ViewEngine. Since ViewEngine was deprecated and removed, the NgFactory and NgSummary files are no longer used as well.
This commit drops obsolete options to generate NgFactory and NgSummary files. Also, the logic that generates those files is also removed.
PR Close#48268
Ocasionally Node is randomly not installed in the Windows job. We've
been trying to debug this for a while. With the additonal debug
information it looks like in some situations the NodeJS folder from
NVM is not even present.
One idea is to use `nvm on` to ensure NVM is actually enabled. It's
unclear why it would be `off` at VM start, but it's worth giving a try.
Trying `nvm off` via SSH yields similar issues as we saw in the flaky
workflows:
https://app.circleci.com/pipelines/github/angular/angular/56160/workflows/2f1b80b3-29c7-4274-804e-cb994c20aff0/jobs/1287228
PR Close#49142
While unlikely, prior to this change it was possible to provide a nested array of styles to the render. This required the framework to handle this by doing a flatten operation. This change also renames the `flattenStyles` method as it no longer flattens the styles.
BREAKING CHANGE: `RendererType2.styles` no longer accepts a nested arrays.
Closes#48317
PR Close#49072
This reverts commit 2fc5b70fce as this change is no longer needed since `type=module` script are deferred by default. Which causes the transfer data to be queried after the browser has finished parsing the DOM.
PR Close#49112
The Router scroller only listens for NavigationEnd events. However, the
default behavior of the Router is to ignore navigations to the same URL.
This breaks the anchor scrolling when clicking on an anchor whose
fragment is already in the URL.
fixes#29099
BREAKING CHANGE: The `Scroll` event's `routerEvent` property may also be
a `NavigationSkipped` event. Previously, it was only a `NavigationEnd`
event.
PR Close#48025
This commit removes the NGCC code and all the related infra setup required to support it.
BREAKING CHANGE: Angular Compatibility Compiler (ngcc) has been removed and as a result Angular View Engine libraries will no longer work
PR Close#49101
This commit updates the `renderApplication` function to avoid duplicate serialization of the data from the `TransferState` class. The `renderApplication` function imports providers from the `ServerModule`, which already include the `TransferState` serialization providers, but the same providers were also included inside the `renderApplication` as well, which led to the duplication.
PR Close#49094
This warning was put in place to surface an error when developers use an ActivatedRoute
with an invalid structure in tests. However, there isn't a clear path to fixing it and
the tests continue to pass (ideally - that's what the recovery code is there for).
Rather than surfacing an error that developers would be confused by and likely ignore,
it would be better to not warn at all unless there is a clearer action to take to
resolve the issue.
resolves#49116
PR Close#49117
Adds a guide describing how to use the standalone migration schematic. The new guide is grouped together with the existing standalone guide.
PR Close#49044
The experimental allow tags propagation flag is a `BuildLanguage` option
and causes all Starlark code to be re-invoked. This causes a slow-down
when switching between bazel query/ bazel build because the option is not set for `bazel query`.
We fix it by applying the option to all commands, using `common`.
PR Close#49106
Currently style of components using `encapsulation`, `None` or `Emulated` will not be removed from the DOM once the component get destroyed.
This change addresses this by keeping track of the number of times a component is rendered, when the component is destroyed the counter is decreased and once this reaches zero the style element is removed from the DOM.
Currently, this new behaviour is on opt-in bases, but it will be changed in the next major version.
To opt-in, set the `REMOVE_STYLES_ON_COMPONENT_DESTROY` DI token to `true`.
Example
```ts
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule
],
providers: [
{ provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Closes#16670
PR Close#48298
Uses an alternate approach of preserving default imports that doesn't involve the `getMutableClone` function that is being removed in TypeScript 5.0.
The alternate approach was already used in the downlevel transform and it works by patching the EmitResolver of the current transformation context to tell TypeScript to preserve the import.
PR Close#49070
We are no longer publishing the @angular/bazel package in prepeartion for its removal from the angular/angular repo.
The piece that we still rely on for our own infrastructure will be moved to angular/dev-infra.
PR Close#49093
Previously the DevTools demo app and browser app had duplicated styles in their respective styles.scss files.
This commit creates a global styles.scss that is imported with sass @use into the demo and browser app styles.scss files. This will prevent any issues where css changes to one are missed in the other. Also reduces duplication of material css theme definitions by consolidating it inone place. The respective styles.scss files for the demo app and browser app continue to exist incase those need environment specific css. For example the browser app requires that height: 100% is set on a document in order to render properly in a browsers devtools tab.
PR Close#49001
RxJS has deprecated the `publishReplay` & `publishLast` operators which will be removed in RxJS 8. `connectable()` should be used instead.
PR Close#48969
We recently switched some of the monitoring e2e tests to Bazel. These
tests should never be cached because they rely on an external URL and
on network access. The URL itself might stay the same for quite a while,
but the underlying site might change based on new deployments. Bazel
only sees the URL and caches the test then. We want to avoid this.
PR Close#49039
Currently as a part of the bootstrapping API migration we comment out the metadata of the root module and instruct users to re-run the module pruning step which can be cumbersome. These changes run the module pruning automatically.
Note that initially I tried to reuse the module pruning logic and to run it against the existing program, but it was problematic, because it was common to have conflicting changes for the same AST nodes.
PR Close#49030
The terser update included various changes, including changes to the
inline optimizations. Constants like for the bloom filter are no longer
inlined multiple times, but instead the constant is preserved and used
with a shortened/mangled name.
Note this also applies to other symbols like `SimpleChanges` too.
This means that such new variables now show up in the symbols goldens.
Concrete examples of inlined & no-longer inlined constants can be
seen in the PR description: https://github.com/angular/angular/pull/49000#issue-1576416106
PR Close#49000
This commit does three things that all related and required to get
rid of `webdriver-manager`:
* Our puppeteer protractor setup in AIO relies on webdriver-manager
because we install a corresponding chromedriver based on the puppeteer
chromium version. We would like to get rid of this brittle setup.
* We don't use `puppeteer` in many places because we manage chromium and
the driver through Bazel. This commit removes the remaining puppeteer
usage and replaces it with the Bazel-managed canonical browser
* We need to migrate the AIO production URL tests to Bazel. These
weren't part of Aspect's migration. This is needed so that we can drop
puppeteer and use the Bazel browser setup.
* Migrates some at-runtime TS `ts-node` test setup to proper idiomatic
Bazel code. Needed because it depends on code that also had to be
migrated to Bazel given the production e2e test Bazel migration (above
points).
Note: The xregexp dependency had to be added to the root project because
`ts_library` does not support compilation deps from `@aio_npm`. This is
something we will fix anyway when we have a more modern toolchain!
PR Close#49025
The Angular devkit updated Terser. Terser landed various changes
related to variable inlining. Most constants are no longer inlined,
but instead the variables are re-used.
This led to a bundle size increase of around ~600B in AIO and most
integration tests.
Here is an example diff:
https://screenshot.googleplex.com/4M8owBYDAqU982T
PR Close#48996
Adds a function that allows for the import resolution for files to be customized in the standalone migration. Externally it's only use is to change `NgForOf` to `NgFor`, but we'll need it internally to deduplicate some Material modules.
Fixes#49006.
PR Close#49022
`setDisabledState` is supposed to be called whenever the disabled state of a control changes, including upon control creation. However, a longstanding bug caused the method to not fire when an *enabled* control was attached. This bug was fixed in v15.
This had a side effect: previously, it was possible to instantiate a reactive form control with `[attr.disabled]=true`, even though the the corresponding control was enabled in the model. (Note that the similar-looking property binding version `[disabled]=true` was always rejected, though.) This resulted in a mismatch between the model and the DOM. Now, because `setDisabledState` is always called, the value in the DOM will be immediately overwritten with the "correct" enabled value.
Users should instead disable the control directly in their model. (There are many ways to do this, such as using the `{value: 'foo', disabled: true}` constructor format, or immediately calling `FooControl.disable()` in `ngOnInit`.)
If this incompatibility is too breaking, you may also opt out using `FormsModule.withConfig` or `ReactiveFormsModule.withConfig` at the time you import it, via the `callSetDisabledState` option.
However, there is an exceptional case: radio buttons. Because Reactive Forms models the entire group of radio buttons as a single `FormControl`, there is no way to control the disabled state for individual radios, so they can no longer be configured as disabled.
In this PR, we have special cased radio buttons to ignore their first call to `setDisabledState` when in `callSetDisabledState: 'always'` mode. This preserves the old behavior.
PR Close#48864
We no longer need webdriver-manager as everything is tested
using Bazel with the Bazel-managed browsers and chrome/gecko drivers.
The drivers and browser binaries are managed as part of dev-infra's
shared browser/driver configuration in `bazel/browsers`.
PR Close#49009
Fixes that the migration was unnecessarily traversing top-level nodes. This was a large performance bottle-neck, because it involves a lot of language service lookups.
PR Close#49010
In some internal migrations the language service was throwing for some file reads which was crashing the migration. These changes add a `try/catch` to avoid interrupting it.
PR Close#49010
For the module pruning and bootstrap API migration steps we depend heavily upon the TypeScript `LanguageService` which ends up being slow on a large project. E.g. in some large internal projects single-file lookups were taking around 30s.
These changes introduce a wrapper around the `LanguageService` that we can use to trick it into not traversing the entire project every time.
PR Close#49010
We're using Node's `path` utilities to remap existing imports and create new ones which can yield paths with forward slash separators.
These changes add some logic to ensure that we only generate forward slashes.
PR Close#48993
Normally having a standalone declaration in the `imports` array is an error and something we handle in the conversion to standalone, but tests can end up in this situation, because apps may have separate tsconfigs for the main app and for tests.
These changes make it so that we move any incorrectly-defined standalone declarations, even if they aren't part of the current migration.
PR Close#48987
For the standalone migration we need to pass a couple of compiler flags which accidentally also overwrote the project's compiler options. These changes extend the options instead.
PR Close#48987
Fixes that we were copying all expressions in the `imports` array of the test to the `imports` of the component, including any potential `ModuleWithProviders`.
Fixes#48971.
PR Close#48987
The first step of the migration updates the tests of the component being migrated, however it also skips any bootstraped declarations. We get back to the these declarations when converting to the standalone bootstrapping APIs, but we weren't updating their tests.
These changes rework some of the logic so that we migrate any remaining tests as a part of the final step.
Relates to #48944.
PR Close#48987
Currently the standalone migration is set up to skip any modules that have a `bootstrap` array with at least one element. This ends up being misleading for small apps who have everything in the root module.
These changes add some logic to only skip the root component.
Fixes#48944.
PR Close#48987
v16 will have a breaking change to the way `UrlTree`s are constructed.
This change is actually a bug fix that makes `UrlTree` creation correct
in more scenarios (see #48508). However, this can affect applications that are
relying on the current incorrect behavior. This commit adds a dev mode
warning when the target of a navigation will change once #48508 is
submitted.
PR Close#48688
In #48898 the `isForwardRef` flag was added to indicate whether a reference should be wrapped in a `forwardRef`. This logic assumed that the node can't be referring to another node within the same file, however from testing it looks like that's not actually the case, because we hit the same code path when an external import to the same symbol exists already.
PR Close#48988
The commit enables the @typescript-eslint/quotes rule which mendates single quotes over doubles and allows template literals with backticks.
PR Close#48952
Fixed a typo and updated the hyphenation in a couple of words to keep consistency across schematics docs style. Assuming beginners reading docs, I also added the property called
public showGreeting = true;
This is because it is available in the examples `.HTML` `*ngIf` directive snippets without being present in the `.ts` class properties declarations. also this removes potential inference that this absence is a result of the standalone migration schematics work.
PR Close#48961
Internally we'll need to remap some imports to generate better import statements. These changes add an API that we can use to do the remapping.
PR Close#48974
Adds some logic to prefer non-Angular-internal modules when generating imports. This allows us to generate better code for some cases like the `ɵInternalFormsSharedModule` in Forms.
Also adds some logic to prefer symbols that are already in the same file.
Fixes#48942.
PR Close#48958
Fixes that the standalone migration was throwing the "Could not find any paths to migrate..." error on a per-tsconfig-basis, preventing the migration from running on any configs that might occur further down in the project.
These changes move the error to after all the configs have been checked.
PR Close#48958
Add a new loaderParams attribute, which can be used to send arbitrary data to a custom loader, allowing for greater control of image CDN features.
PR Close#48907
Previously if the standalone migration saw a `RouterModule.forRoot` with a config object, it wouldn't migrate it. These changes add some logic that convert the config object to a set of features from the new router API.
PR Close#48935
In the `PotentialImport` we indicate if it's in the same file by not setting a `moduleSpecifier`, but if that's the case, the imported symbol might need to be wrapped in a `forwardRef` to avoid generating an error. These changes expose this information so the various tools can take advantage of it.
PR Close#48898
This commit updates the docs of the functional guards and resolvers to improve the migration
experience when moving away from class-based equivalents.
PR Close#48873
`strictStyling` was an option provided by Polymer but it's not needed by Angular. This commit removes the dead code and updates related comments.
PR Close#48824
Some 1p module which uses the method TscPlugin.wrapHost requires to import this type to make its internal class definitions compatible with this type.
PR Close#48874
Currently the migration is set up to assume that any elements that exist in a `declarations` array will be converted to standalone and copied into the `imports` array, however that might be incorrect for some special cases like the root component.
These changes rework the declaration merging logic so that they take all the declarations being migrated into account.
PR Close#48882
Fixes that running the standalone migration with `--defaults` was throwing an error, because all the properties were specified as required. We don't need to set them as required, because they have default values.
Fixes#48845.
PR Close#48921
Fixes that we were changing the testing modules that have no `declarations` unnecessarily, resulting in more formatting changes that users would have to clean up.
PR Close#48921
Jasmine has deprecated the `expectationFailOutput` argument and replaced it by the `withContext()` method
Also removing all references to #24571 from the forms unit tests as the non null assertions are fine in the context.
PR Close#48894
Previously, the state `script` was always appended as the last item in the `body` tag. This can result in the state not being available when the Angular application is bootstrap.
A workaround for this was to delay the bootstrapping of the application until by using the `DOMContentLoaded` event listener.
```ts
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
document.addEventListener('DOMContentLoaded', bootstrap);
```
With this change the above workaround is no longer necessary as the state `script` tag is now added prior of any other `script` which guarantees that the state is present prior of the Angular application is bootstrapped.
PR Close#48868
StrongBrew has stopped a few years back.
We are taking over at https://simplified.courses where we have an Angular blog, do on-site training and create content.
PR Close#48340
It seems that the description of the `FormControl` usage is incorrect or at least the copy is not very helpful for beginners and can be very confusing as we do not have a command to generate a `FormControl`, as far as I know 😄. Additionally, the link for component generation points to the CLI page instead of the component generation section on the CLI page. It would be DX/UX for readers and users to get where the link's text is supposed to take them.
PR Close#48858
the easing "prop" used to specify the easing function to
apply to animations isn't a valid css property, it is thus
considered not animatable but different values for such
property shouldn't cause non-animatable warnings
resolves#48571
PR Close#48583
Adds a new mode to the `@angular/core:standalone` schematic that allows users to switch from `bootstrapModule` to `bootstrapApplication`, as well as `provideRouter`, `provideAnimations` and `provideNoopAnimations`.
PR Close#48848
Fixes that the migration host was doing a basic falsy check if the content was read correctly which meant that a component with an empty template would be considered as having a missing template file.
Fixes#48846.
PR Close#48849
Both TypeScript and Angular Schematic rely on posix system paths which can cause issues on Windows if paths are not normalized correctly.
Such as `sourceFile.fileName.startsWith(pathToMigrate)` on Windows will always return falsey.
PR Close#48850
Currently the `mode` is validated during schematic execution. While this cover a case of incorrect value this caused other parts were the correct values cannot be determined.
Options in schemas are used for a number of reasons during runtime.
- These are used to build auto complete
- Validation of inputs prior of the schematic is built with meaningful errors such as suggested inputs.
- Generation of help output.
Eventually these should also be used to generate DTS. This is already done in the CLI to avoid having to write Types manually.
PR Close#48851
In order to test components and services which depend on router navigations, such as `ActivatedRoute` instances, tests currently need to provide a fair bit of boilerplate _or_ they can set up a stub for `ActivatedRoute` and list it in the `providers` to override it in `TestBed`. This approach of stubbing the `ActivatedRoute` creates a situation that can easily cause the test to break. The stub often only mocks out the dependencies that the component/service _currently_ needs. This dependencies might change over time and break the test in an unexpected way. In addition, it is difficult to get the structure of `ActivatedRoute` exactly correct.
This change will allow unit tests to quickly set up routes, trigger real navigations in the Router, and get instances of component's to test along with real instances of `ActivatedRoute`. This all comes without needing to know that the component depends on `ActivatedRoute` at all. This becomes more important when considering that a component may be refactored in the future to use `@Input` rather than access data on the `ActivatedRoute` instance (see #18967). Tests which mock out `ActivatedRoute` would all break, but those which use `navigateForTest` would continue to work without needing any updates.
resolves#15779resolves#48608
PR Close#48552
There may be use-cases in the future where `afterNextNavigation` is used
in other locations. For example, a test helper function which navigates
should likely wait for all redirects to complete rather than simply
waiting for the promise returned from `navigate` to resolve.
PR Close#48552
Warn the user in the console in case the `ngSrcset` is present and no
loader is configured. In this case, the default loader is used and
it ignores this attribute.
PR Close#48804
To remove the non-null assertions linked to #24571, DowngradeComponentAdapter has been refactored and the public methods have been simplifed.
PR Close#48715
Fixes that the expression converter was producing code that throws a runtime error if a non-null assertion is used as a part of a safe read, write or call.
Fixes#48742.
PR Close#48801
Adds a new mode to the `@angular/core:standalone` schematic that automatically deletes modules that may not be necessary after the previous step of converting them to standalone.
PR Close#48832
remove the following utilities used in unit tests which check for features
that are supported by all supported browsers:
- supportsCustomElements
- supportsWebAnimation
- supportsRegExUnicodeFlag
- supportsTemplateElement
also remove the following utilities which check for features that are
not supported (and aren't going to be) by any of the supported browsers:
- supportsDeprecatedCustomCustomElementsV0
- supportsDeprecatedShadowDomV0
PR Close#47543
The main entry point for the `@angular/localize` package no longer imports
the `@angular/compiler` package and now has no external dependencies. This
allows the main functionality of the package to be used without requiring
any other Angular packages. Only the message digest algorithm implementation
from the `@angular/compiler` package was being used and this code is now
bundled directly into the final npm package for `@angular/localize`.
The `tooling` secondary entry point still leverages and requires Angular
related packages (`@angular/compiler`/`@angular/compiler-cli`). However,
the tooling functionality is not intended to be used and/or bundled in
a web application.
Closes#48163
PR Close#48799
In Css, selectors with escaped characters require a space after if the following character is a hex character. ie: .\fc ber which matches class="über"
These escaped selectors happen for example when esbuild run with `optimization.minify`
fixes#48524
PR Close#48558
Implements a new `ng generate @angular/core:standalone` schematic that allows the user to convert all the declarations in a set of NgModules to standalone.
PR Close#48790
Makes the following minor improvements to our current schematic utilities:
* `closestNode` now takes a TS predicate function instead of a `SyntaxKind`. This allows it automatically infer the type of the match.
* `getImportSpecifier` now accepts a regex for the module name. This will be useful for some upcoming migrations.
* Splits the logic for creating the migration program options into a separate function so that it's easier to reuse.
* `createMigrationProgram` now returns the program directly, instead of a literal with some other information.
* `FakeReadFileFn` and `createMigrationCompilerHost` aren't exported anymore since they aren't used anywhere.
PR Close#48790
Some users are woried about `$any()` as function calls are to be avoided in templates. This sentence clarifies the situation.
fixes#48781
PR Close#48785
This commit updates one usage of the `ts.factory.createMethodDeclaration` API
to avoid a deprecated function signature, which avoids logging a warning.
PR Close#48812
PNG converted to base64 don't work on stackblitz.
As stackblitz does't support binary files for dynamicaly created projects, we now use only svgs.
Fixes: #48773
PR Close#48774
It looks like running `yarn` in the repository results in some
lock file changes. Likely due to a rebase and changes landing
in the meanwhile, the lock file became a little outdated.
This commit uploads the lock file as `yarn` suggests.
PR Close#48797
- Update Chrome supported version description to match other browsers.
- Updates browserslist configuration in build section to match supported browsers
PR Close#48782
docs: Document extracted from the original Introduction document, which is to be retired. Linting suggested corrections made. Restructuring or rewording sentences to be shorter and clearer.
docs: revised understanding doc and pullapprove.yml
PR Close#47906
Some 1P tools require to use the helper patchNgHostWithFileNameToModuleName, and the present location of this helper leads to circular depedency. So it is required to move this helper into a separate module to facilitate importing.
PR Close#48739
The most recent commit added extra logic that brought the payload size above the limit. Likely an actual limit was already pretty close to the threshold, so we are just updating the payload.
PR Close#48772
The details of this commit are pretty thoroughly described in the tests
and code comments. In short, it is sometimes ambiguous where to apply commands in
a `SegmentGroup` tree that is created from an `ActivatedRoute` when
dealing with empty paths. This adjusts the strategy to tolerate more
ambiguity while still allowing developers to be explicit.
This is a fix-forward for b/265215141
PR Close#48734
Previously, a createConfig helper function was created to consolidate common esbuild configurations for DevTools. This function is asynchronous, but when it was used to set the configuration in various esbuild config files, it was used as if it was synchronous.
This commit fixes this issue by wrapping the output of the function in await, so that it propagates the configurations to esbuild correctly.
PR Close#48762
In Angular CLI 15.1 new sub commands to generate configuration and environments files were added. This commit updates several docs to mention these commands.
Closes#48364
PR Close#48757
The `main` bundle size has increased, as well as the CSS styles from
Angular Material. Only the `main` bundle exceeded the golden, but
we update all other entries to make future updates easier and to prevent
gradually getting closer and closer to the threshold.
Investigating/comparing the `main` bundles before and after the update
did not unveil any significant changes, except for thousands of
different identifiers, with different length due to mangling. That
seems to be the only reason for having exceeded the threshold.
Very likely there were more size-affecting changes over time. Also
for example the downleveling of class fields for Safari v15 support.
See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
PR Close#48747
Reworks some of the existing compiler APIs to make them easier to use in a schematic and exposes a few new ones to surface information we already had. High-level list of changes:
* `getPotentialImportsFor` now requires a class reference, instead of a `PotentialDirective | PotentialPipe`.
* New `getNgModuleMetadata` method has been added to the type checker.
* New `getPipeMetadata` method has been added to the type checker.
* New `getUsedDirectives` method has been added to the type checker.
* New `getUsedPipes` method has been added to the type checker.
* The `decorator` property was exposed on the `TypeCheckableDirectiveMeta`. The property was already present at runtime, but it wasn't specified on the interface.
PR Close#48730
This commit represents rewrite of the NgClass directive to address
severe performance problem (excessive DOM mutation). The modified
algorithm removes all the known performance clifs and has number of
desirable properties:
- it is shorter and (arguably) easier to follow;
- drops usage of existing differs thus limiting dependencies on other
part of the code without increasing size of the directive;
- doesn't degrade any other performance metrics.
Fixes#25518
PR Close#48433
The TSLint rule for ESM/CJS interop was apparently not working
for a short period of time due to diverging TypeScript versions.
This commit fixes the lint warning to replace the type-only
import with a default import. Even thoughn not striclty needed
for types- the rule enforces a default import as that is the safer
approach for runtime imported symbols.
Also the rule is updated to not disallow `cluster` anymore. The
types for cluster do no allow for e.g. `cluster.Worker` if cluster
refers to the default import. The whole lint rule is not strictly
needed anymore since we build & test with ESM in this repo now!
PR Close#48731
* updates ng-dev and build-tooling since the previous SHAs are
no longer existent after the CircleCI incident snapshot build removal.
* accounts for the new stamping variables.
PR Close#48731
`makeEnvironmentProviders` constructs the wrapped `EnvironmentProviders`
type, which can only be used in environment injectors (not element
injectors). It makes sense that `makeEnvironmentProviders` should be able
to accept existing `EnvironmentProviders`-wrapped providers, since it will
be providing the same guarantee, but the current types do not allow this.
This commit fixes the typings to allow nesting `EnvironmentProviders` and
adds a test to verify that it will work.
PR Close#48720
A previous PR introduced a new compiler abstraction that tracks *all* known exports and re-exports of Angular traits. This PR harnesses that abstraction in the language service, in order to allow automatic imports of pipes.
PR Close#48354
NgModules can re-export other NgModules, which transitively includes all traits exported by the re-exported NgModule. We want to be able to suggest *all* re-exports of a component when trying to auto-import it.
Previously, we used an approximation when importing from NgModules: we looked at a Component's metadata, and just imported the declaring NgModule. However, this is not technically correct -- the declaring NgModule it is not necessarily the same one that exports it for the current scope. (Indeed, there could be multiple re-exports!) As a replacement, I have implemented a more general solution.
This PR introduces a new class on the template type checker, called `NgModuleIndex`. When queried, it conducts a depth-first-search over the NgModule import/export graph, in order to find all NgModules anywhere in the current dependency graph, as well as all exports of those NgModules. This allows the language service to suggest all of the re-exports, in addition to the original export.
PR Close#48354
`MetadataReaderWithIndex.getKnown` currently returns an iterator. It will be easier to work with for upcoming usages if it returns an array instead.
PR Close#48354
Currently, the auto-import tests are very difficult to debug, because the `expect`ations are buried several function calls deep, and also because the multi-line replacements are hard to deal with. The auto-import tests now use a different approach, which can be easily debugged from the failure message. In addition, several new tests have been added to cover more cases.
PR Close#48354
```ts
@NgModule({
imports: [RouterModule.forRoot([{path: '/enigma', component: EnigmaComponent}])],
providers: [{provide: APP_BASE_HREF, useValue: '/en'}]
})
export class AppModule {}
```
Navigating to `/enigma` will redirect to `/en/igma` not to `/en/enigma` as it expects
Fixes: #45744
PR Close#48489
Class and `InjectionToken`-based guards and resolvers are not as configurable,
are less re-usable, require more boilerplate, cannot be defined inline with the route,
and require more in-depth knowledge of Angular features (`Injectable`/providers).
In short, they're less powerful and more cumbersome.
In addition, continued support increases the API surface which in turn increases
bundle size, code complexity, the learning curve and API surface to teach,
maintenance cost, and cognitive load (needing to grok several different types
of information in a single place).
Lastly, supporting only the `CanXFn` types for guards and `ResolveFn` type
for resolvers in the `Route` interface will enable better code
completion and integration with TypeScript. For example, when writing an
inline functional resolver today, the function is typed as `any` and
does not provide completions for the `ResolveFn` parameters. By
restricting the type to only `ResolveFn`, in the example below
TypeScript would be able to correctly identify the `route` parameter as
`ActivatedRouteSnapshot` and when authoring the inline route, the
language service would be able to autocomplete the function parameters.
```
const userRoute: Route = {
path: 'user/:id',
resolve: {
"user": (route) => inject(UserService).getUser(route.params['id']);
}
};
```
Importantly, this deprecation only affects the support for class and
`InjectionToken` guards at the `Route` definition. `Injectable` classes
and `InjectionToken` providers are _not_ being deprecated in the general
sense. Functional guards are robust enough to even support the existing
class-based guards through a transform:
```
function mapToCanMatch(providers: Array<Type<{canMatch: CanMatchFn}>>): CanMatchFn[] {
return providers.map(provider => (...params) => inject(provider).canMatch(...params));
}
const route = {
path: 'admin',
canMatch: mapToCanMatch([AdminGuard]),
};
```
With regards to tests, because of the ability to map `Injectable`
classes to guard functions as outlined above, nothing _needs_ to change
if projects prefer testing guards the way they do today. Functional
guards can also be written in a way that's either testable with
`runInContext` or by passing mock implementations of dependencies.
For example:
```
export function myGuardWithMockableDeps(
dep1 = inject(MyService),
dep2 = inject(MyService2),
dep3 = inject(MyService3),
) { }
const route = {
path: 'admin',
canActivate: [() => myGuardWithMockableDeps()]
}
// test file
const guardResultWithMockDeps = myGuardWithMockableDeps(mockService1, mockService2, mockService3);
const guardResultWithRealDeps = TestBed.inject(EnvironmentInjector).runInContext(myGuardWithMockableDeps);
```
DEPRECATED: Class and `InjectionToken` guards and resolvers are
deprecated. Instead, write guards as plain JavaScript functions and
inject dependencies with `inject` from `@angular/core`.
PR Close#47924
apply different quality of life improvements to the shadow
css unit tests:
- refactor the tests so that they are nicely divided in multiple files
in a logical manner instead of having most of them all in a single big file
- remove the css normalization logic inconsistently used throughout the tests, which
causes tests to be inconsistent and it also introduced unintuitive checks
- provide a shared shim utility function (instead of re-defining it
multiple times)
- add a `toEqualCss` matcher that can be used in the tests in order to
match css strings without caring about spacing and indentation
PR Close#48443
This commits changes the fetch depth from 1 to 0 in the update-events` and `update-cli-help` actions. This is required as otherwise the PR creation would fail when the forked (https://github.com/angular-robot/angular) is not in sync with (https://github.com/angular/angular) ie the later has commits which are not in the former.
PR Close#48698
Previously, a single curly bracket was used to interpolate the `ANGULAR_CLI_BUILDS_READONLY_GITHUB_TOKEN` value which caused the value not to be provided correctly.
PR Close#48690
Currently the Github action-triggered code uses the `GITHUB_TOKEN`
for querying the CLI snapshot builds repository. This does not work
because the Github actions token is scoped to the orginating
repository, even for queries to a read public repository.
We fix this by using a personal access token. The token is
readonly and only exists to avoid potential rate limiting.
PR Close#48681
The VSCode extension looks for `@angular/language-service/package.json`
using `require`. This currently breaks as of the ESM changes because
we introduced the `exports` field but did not expose the `package.json`.
This commit fixes it.
Co-authored-By: Andrew Scott <atscott@google.com>
Co-authored-By: Dylan Hunn <dylhunn@gmail.com>
PR Close#48678
Fixes a deprecation warning that was being logged by compiler when generating aliases, because we weren't going through `ts.factory` to create an AST node.
PR Close#48652
Similar to the Saucelabs job, the jasmine default timeout can be
increased to avoid the common jasmine timeouts. We cannot control
how fast Selenium e.g. loads a page or not.
PR Close#48671
Prior to this change the universal example was broken as the example type was not retrieved correctly in bazel which caused the `_renameFile` method to be called with incorrect context.
Closes#48664
PR Close#48665
This commit prepares the code of the `BrowserTestingModule` to include the `MockPlatformLocation` by deafult in the future. With this change, the set of providers to add the `MockPlatformLocation` would be disabled by a flag, which will be switched in v16.
PR Close#48651
There is a small typo in integration/check-dependencies.js.
Should read `ensure` rather than `esnure`.
Signed-off-by: Tim Gates <tim.gates@iress.com>
PR Close#48588
This commits adds an action to update the Angular CLI help contents that are used by AIO to generate CLI guides.
This also changes the setup to include the files are source files instead of having to clone the repository each time. This also simplifies the PR review process of the PR opened by the action.
PR Close#48577
Working towards removing the backwards dependency on router from the
navigation transition handler, this change moves `rootComponentType` and
`afterPreactivation` to the transition handler since that is the only
location those properties are used.
PR Close#48475
This is no longer needed in google3 and actively impedes prodmode tests. See http://b/254054103#comment7 for deeper analysis.
This just turns off the transform for now, if it lands successfully I'll follow up with deleting the flag and dead code altogether.
PR Close#47934
The `/api` entry-point was accidentally dropped when we switched the
compilation in the repo to full ESM- thinking the entry-point is not
needed externally.
We re-add it because the VSCode repo extension relies on it for checking
whether `ts.LanguageService` is an Angular one.
PR Close#48670
The router's `initialNavigation` causes an imperative navigation using
the `navigateByUrl` method. This, however, results in the history state
being removed on a page refresh. This change calls `scheduleNavigation`
directly from `initialNavigation` to ensure the history state is correctly
retained.
PR Close#48540
Following #24008, the schematics don't produce ngOnInit and the constructor. Let's reflect that in the Tour of Heroes tutorial.
Fixes#48575
PR Close#48576
`errorHandler` and `malformedUriErrorHandler` were already deprecated in
the Router class public API. This change updates the deprecation to
extend to `RouterModule.forRoot` configuration options.
PR Close#48551
`withNavigationErrorHandler` is a close replacement for the
`RouterModule.forRoot.errorHandler` / `Router.errorHandler`.
It provides a quick, short way for users to define a function to handle
`NavigationError` events.
PR Close#48551
* removing guard as console.warn is now widely supported
* Couldn't remove non-null assertion, waiting for TS support of getters with different types (microsoft/typescript#43662)
PR Close#48476
It looks like the wrapping in `&> /dev/null` breaks for some reason.
We don't need it as CircleCI will remove secrets from logs if they
would leak for some reason.
A simple echo is very unlikely ever printing its content to
stdout/stderr though.
PR Close#48648
Instead of encoding the GitHub snapshot robot access token
in a file that needs to be decoded by an ambiguously named
secret called `KEY`, the token can be directly stored in the
secrets of CircleCI given easier maintenance and the same risk.
The leakage of the secret still means the GitHub token file could
be decoded.
We are switching to a similar model as in the components repo, which
also simplifies key rotations etc.
PR Close#48644
In #47167 an `updateClassDeclaration` call was swapped out with a `createClassDeclaration` which caused a regression where interface references were being retained when using a custom decorator in a project that has `emitDecoratorMetadata` enabled.
These changes switch back to use `updateClassDeclaration`.
Fixes#48448.
PR Close#48638
The attachDebugGetter function is only used in the i18n specific code
so could be moved closer to the sole usage site instead of being
exported to the entire framework code. It also lets us remove the
entire packages/core/src/render3/util/debug_utils.ts file.
PR Close#48549
Allows for self-closing tags to be used for non-native tag names, e.g. `<foo [input]="bar"></foo>` can now be written as `<foo [input]="bar"/>`. Native tag names still have to have closing tags.
Fixes#39525.
PR Close#48535
There is no need to parse clientWidth/clientHeight/naturalWidth/naturalHeight on HTMLImageElement as there is no sign of other types being returned on everygreen browers.
PR Close#48527
This commits add a triple slash type reference to the `main.ts` of the project when running `ng add @angular/localize`. This is purely needed for IDE purposes so that `$localize` is available globally. For the compilations `@angular/localize` types are adding the the respective TS configs files.
This commits also add better support for using `@angular/localize` in `/// <reference types="@angular/localize" />`. To support this we need to move the global definition outside of a barrel file and into the index.ts file. Without this change the `$localize` method will not available globally when using triple slash type references.
Closes#48434
PR Close#48502
- update `errors.ts` to annotate the error NG0403, so that the runtime can add a link to that guide when an error is thrown
- update `application_ref_spec.ts` to include the new link of the error
- update `errors.md` as a result of running `yarn bazel test packages/core/test`
Fixes#47985
PR Close#48483
Removes unused dependencies introduced back when the devtools
were moved into the framework repo.
Most of these deps were added when the Bazel http-server from
the components repo was copied here
PR Close#48641
Similar to how the `@babel/core` dependency is managed for the localize
NPM package, the version should be locked. Also the version should
correspond to the version we install for building & testing.
Currently the Babel version allowed by the compiler-cli may not
work given the ESM -> CJS interop. causing errors like:
```
import { types as t } from "@babel/core";
^^^^^
SyntaxError: Named export 'types' not found. The requested module '@babel/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@babel/core';
const { types: t } = pkg;
```
We can only be confident about the interop if we know the version
installed- is the one we test.
PR Close#48634
We dropped support for TypeScript 4.7 in version 15, but we had to keep around the runtime code, because of g3. Now that g3 is on 4.8, we can remove the additional code.
PR Close#48470
Prior to this change the FESM bundles have the license banner duplicated multiple of times in each published file.
With this change we remove all the banners from the individual input files. A new banner will be appended at the top of the FESM using rollup's banner option.
While there is a rollup plugin on NPM to strip these banners (https://github.com/mjeanroy/rollup-plugin-strip-banner) we could not use this as it does not support `.mjs`.
PR Close#48560
Prior to this change the FESM bundles for the FW packages have the license banner duplicated hundreds of times in each published file.
With this change we remove all the banners from the individual input files. A new banner will be appended at the top of the FESM using rollup's banner option.
While there is a rollup plugin on NPM to strip these banners (https://github.com/mjeanroy/rollup-plugin-strip-banner) we could not use this as it does not support `.mjs`.
PR Close#48560
Fix non-hermetic zipping of example zips by fixing the zip entry timestamps.
I also hardcoded stamp values in stable-status.txt and volatile-status.txt using the workspace status command for the aio_local_deps config to improve cache performance. The Bazel remote cache appears to not ignore volatile-status.txt when there are no other changes, unlike the local Bazel cache:
https://github.com/bazelbuild/bazel/issues/10075#issuecomment-546872111
PR Close#48579
Fixes that imports weren't being combined in the `ImportManager` when multiple new imports are added for the same file. This wasn't a problem for previous schematics that used the manager, but it'll come up in some of the new ones.
Also moves the logic for writing new imports into `recordChanges`, instead of `addImportToSourceFile`.
PR Close#48620
Using 'always' as the stamp attribute caused stable-status.txt
to always be included as an input, which has different values on
different ci executors causing a cache miss.
We run the regular aio build without stamping on ci so only include
status files when stamping is explicitly enabled.
PR Close#48585
The Karma Saucelabs script for Bazel & Saucelabs relies on some CommonJS
specific features. This commit replaces it with an ESM-compatible
alternative so that it can execute because `nodejs_binary` requires ESM
files now.
PR Close#48573
With the recent ESM changes we also started generating Saucelabs
targets for `//devtools` (as part of an effort to avoid code
duplication). We should skip Saucelabs targets for this package
because we don't intend to run them on Saucelabs and this whole
setup needs some more work (and we shouldn't change unexpectedly).
PR Close#48554
The way the benchmarking code is used and wired up in g3 is rather
magical. This change makes it easier to sync into g3 by using
conditional blocks, and also consistnetly using a single bundle name
(like it was before— we regressed here as part of the ESM initial
changes- but now with clear comments, it's more future-proof..)
PR Close#48521
Fixes that we temporarily broke the Bazel npm package artifact as
part of the ESM work. This commit adjusts it and also makes the
artifact subsitutions more maintainable.
PR Close#48521
This will help making it easier to update patches when `node_modules`
are cached. Note that most of the time this shouldn't be necessary
as we only cache the Yarn `.cache` for the non-windows jobs. Windows
job caches `node_modules` directly- so could be affected and needs
a cache reset/wipe occasionally when patches change (even though it's
rarely). Long-term we can remove this when the esm patches are no longer
needed.
PR Close#48521
This is basically a pre-step for combining devmode and prodmode into a
single compilation. We are already achieving this now, and can claim
with confidence that we reduced possible actions by half. This is
especially important now that prodmode is used more often, but rules
potentially still using the devmode ESM sources. We can avoid double
compilations (which existed before the whole ESM migration too!).
We will measure this more when we have more concrete documentation
of the changes & a better planning document.
Changes:
* ts_library will no longer generate devmode `d.ts`. Definitions are
generated as part of prodmode. That way only prodmode can be exposed
via providers.
* applied the same to `ng_module`.
* updates migrations to bundle because *everything* using `ts_library`
is now ESM. This is actually also useful in the future if
schematics rely on e.g. the compiler.
* updates schematics for localize to also bundle. similar reason as
above.
PR Close#48521
* Switches all remaining targets (even if not tested and failing as per
build) away from `ts_devserver` to the canonical `http_server` from
dev-infra.
PR Close#48521
ZoneJS is no longer loaded as an UMD, but instead is included as part
of the browser init entry-point. This means that ZoneJS is bundled and
the ESBuild logic needs to be adjusted for that.
PR Close#48521
After discussion initiated in the framework team (by kkostadinov),
the team has decided to not keeping the `components-repo-unit-tests`
job. This commit removes it.
PR Close#48521
* The benchmark macro should also use devmode ESM 2020. No CommonJS
* The benchmark macro should always add `benchpress` as runtime
dependency because it is loaded asynchronously.
* The protractor `nodejs_binary` should use our ESM-interop binary
so that ESM resolution works (e.g. when `await import(benchpress)` from
the driver utilities is invoked).
PR Close#48521
* Switches away from the ESM-incompatible & unmaintained `ts_devserver`
to `http_server`. This is the canonical server maintained by dev-infra
* Switches tests away from CommonJS specific logic. e.g. require.resolve
* Adjusts tests to work with Protractor spec bundling (Protractor does
not support ESM execution, but we want to take ESM-written specs)
* Reworks playground and benchmarks to use `app_bundle` and `esbuild`
instead of loading hundreds of files individually. This also makes
tests more stable and more aligned with real applications.
PR Close#48521
* Updates circular dependency tests to use the `.mjs` outputs
* Switches away from CommonJS specific `require` calls.
* Simplifies the test helper logic since all browsers/NodeJS versions
support `URL` as a global.
PR Close#48521
The Angular Language Service package is now tested & compiled using ESM.
Previously it was a mismatch of CommonJS and ESM.
Still the language-service ESM output is transformed into a single UMD
bundle to allow for module resolution to be overriden. See
`bundles/BUILD`.
This is kept as is. To fully ship ESM (language-service is an exception
here), we need to:
* Update all code to no longer reference typescript via import. Instead
typescript needs to be passed around so that the extension can
control the version
* The VSCode extension/ the TS server needs to be able to load ESM. It
looks like the server supports ESM global plugins, but the extension
might not yet.
This is out of scope for the dev-infra effort as it requires more
insight into VSCode & the extension system & the TS language server.
PR Close#48521
* The Karma Bazel Saucelabs binary needs to use `.mjs` as everything in
the repo w/Bazel is supposed to be ESM.
* The symbol extractor test is updated to no longer use CommonJS
features like `require.resolve`.
PR Close#48521
* Switches all examples to use dev-infra's canonical ESM-compatible
`http_server`.
* Uses ESBuild for bundling ESM into a single file, compared to having
to load hundreds of individual ESM files in the browser (potential
source of flakiness & slowness).
PR Close#48521
Since the `defaults.bzl` repo-wide macros are now supporting ESM,
the special spec-bundle logic from `devtools` can be removed.
Also the esbuild configurations need to be updated to account
for the recent dev-infra build-tooling changes. Also properly
now ensures that `aysnc/await` is downleveled for ZoneJS compatibility.
PR Close#48521
* Updates build-tooling to benefit from the latest `spec_bundle`
improvements.
* Updates the ESM extension loader to not attempt adding extensions to
builtin `node:` specifiers. This seems to be disallowed and cannot be
handled gracefully (the attempts are part of a try/catch).
```
Use --sandbox_debug to see verbose messages from the sandbox
Error [ERR_UNKNOWN_BUILTIN_MODULE]: No such built-in module: node:fs.mjs
at new NodeError (node:internal/errors:371:5)
at ESMLoader.builtinStrategy (node:internal/modules/esm/translators:276:11)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:236:14)
```
PR Close#48521
Since the Bazel setup in this repo will now always use ESM,
the tooling scripts/binaries in AIO need to be switched to ESM
too. Most of the scripts are already ESM, but a few had to be converted.
Note that the Dgeni generation does not use ESM because it's unaffected
and the Dgeni CLI is used. In the future we could also update the Dgeni
setup to ESM but there is no need currently.
PR Close#48521
Even with patched resolution, we should always attempt the next/builtin
NodeJS resolution first. It may find a module if there `node_modules`
relative to the context file. This would be more correct than looking
for a module always at the Bazel `npm` repository `node_modules` folder.
PR Close#48521
ESBuild relies on the linker and we currently set up the ESM loader,
along with accidentally enabling the patched resolution loader. This
didn't cause any problems in sandbox, but outside of sandbox incorrect
ESBuild versions may be discovered because the loader looks at the
top-level `npm/` node modules before looking relative to e.g.
`@bazel/esbuild`
PR Close#48521
* Adjusts tests to no longer rely on CommonJS features. Switches them to
ESM
* Updates test initialization files to not double-initialize Jasmine now
that bootstrap files are loaded after Jasmine. The `jasmine.boot`
setup was hacky from `rules_nodejs` and will break in the future
regardless if we e.g. use `rules_js` with actual unmodified `jasmine`.
PR Close#48521
Tests now always run with ESM 2020, while previously they ran with
ES2015 CommonJS UMD bundles.
Since ZoneJS does not support intercepting native `async/await` syntax,
the forms test needs to use the zone-compatible variant of
`jasmine_node_tests`. This variant downlevels the native `async/await`
syntax to generators that ZoneJS can intercept. All of this is done
using the dev-infra ESBuild `spec_bundle` rule.
PR Close#48521
* Uses `.mjs` for circular deps tests
* Replaces `require` with ESM-equivalent. uses an import statement here
for proper typing, and specify dependency properly.
PR Close#48521
The `packages/localize` package still required some trickery
to support CommonJS because tests in the repo were running as CommonJS.
This commit removes the CommonJS logic in localize and its tests, so
that only ESM is used in production & tests.
PR Close#48521
Protractor does not support ESM, so we need to take all the ESM
output and bundle it into a CommonJS file. This comes at the cost
of not using actual ESM for execution, but the ESBuild bundle follows
strict ESM semantics so we can be sure it's compatible when we have
an ESM-compatible e2e test runner in the future.
PR Close#48521
There are two build targets which never had all its runtime dependencies
properly specified. This wasn't noticed because there were macros in
`defaults.bzl` that automatically included these deps.
In a follow-up we will clean-up this legacy auto-deps feature in
`defaults.bzl`.
PR Close#48521
The ESM js files need to be referenced, and the router tests rely
on `async/await` with change detection- so a special rule is required
that downlevels `async/await` to generators (similar to the Angular CLI)
PR Close#48521
Introduces a variant of `jasmine_node_test` that works with async/await
in combination with ZoneJS. This is needed for tests relying on
async/await in combinatin with change detection.
Browser tests are already benefting from ESbuild async-await
downleveling. Node tests would ideally not need this, but until
ZoneJS supports native async/await we need to also process
source files to avoid native async/await syntax.
PR Close#48521
* Switches to the canonical dev-infra http server
* Uses the bundle for serving.
* Switches app_bundle to simple `esbuild` since the test relies
on `ngDevMode` which `app_bundle` elides as optimization.
PR Close#48521
`platform-browser` tests now run in ESM and with `.mjs` output, so
the build targets and tests need to be updated.
Here we change the `zone_event_unpatched` script to include the
`.init` suffix that will be picked up by `spec_bundle`.
Also some circular dependency tests are updated to refer to the
`.mjs` files.
PR Close#48521
The bazel tests cannot use CommonJS features like `require` and should
be updated to work with ESM. Additionally some specs are updated to
no longer assert CJS/UMD output from `ng_module`. The rule only emits
ESM now.
PR Close#48521
The Angular CLI does not yet support schematics running as ESM. For
this reason we switch the schematics BUILD targets to explicitly
use ESM (as an exception in the repo).
PR Close#48521
Since Karma with Bazel does not support ESM natively, we bundle the
tests using ESBuild into a single AMD file. This not only solves the
ESM issue until we can run browser ESM tests natively (also pending
in the components repo - the esbuild generation follows ESM semantics
but since collapsed we don't rely on the real module system).
A benefit of bundling is also faster and more reliable Karma browser
tests since only a single file needs to be loaded- compared to hundreds
of individual files.
PR Close#48521
If tests are bundled using e.g. esbuild, the `ee` symbols may
be rewritten to `\u0275\u0275`. This breaks assertions that
rely on `Function.toString`. We can avoid this string comparison
and make it more future proof by just comparing the symbols directly.
PR Close#48521
Update dev-infra's build-tooling since multiple ESM changes have
landed there. e.g. not relying on `require.main === module` for API
bundling. This will allow us to also execute all dev-infra rules
in ESM because we plan on applying our ESM patching to `ts_library`
(which would also affect build-tooling then).
PR Close#48521
We use `bazel/esbuild` in various places (e.g. for app bundling tests).
These tests rely on the Angular Compiler-CLI itself for e.g. linking
or the Terser configuration. Since everything in this repo is now
strict ESM, the ESBuild configs (which are already ESM-supported)
need to import from `//packages/compiler-cli`. We also need to be
able to leverage our existing ESM Bazel loader for this though as
otherwise resolution would fail.
Long-term we can remove this if everything in the compiler-cli
would use `.mjs` extensions and the import paths would also specify
an explicit extension. See: https://nodejs.org/api/esm.html#mandatory-file-extensions
PR Close#48521
The ESM loader when used with patched Bazel module resolution
handled subpaths incorrectly. e.g.
`@bazel/concatjs/tsc_wrapped/internal/index.js` could be incorrectly
resolved to `@bazel/concatjs/index.js`.
This commit fixes the flawed logic. Also we prioritize the ESM attempts
before the original specifier. This is necessary because otherwise
the default Node resolution (using `require.resolve`) may incorrectly
prefer the `index.js` file over a `index.mjs` when a directory is
imported.
PR Close#48521
The `packages/core/test` test code was relying on non-ESM
compatible features like untyped `require` calls.
We switch these to ESM `import` statements/expressions and
make it strongly typed. It's a trade-off between type-safety
and the dependency graph- but it feels more reasonable typing
this properly to actually benefit from the type system provided
by using TypeScript.
Additionally, we align the IDE tsconfigs to use `esnext` as module
because that is what we use in Bazel and it allows us to use
top-level await.
PR Close#48521
Since we no properly initialize as part of the spec-entrypoint
the hacky logic starting Jasmine can be removed. The init
file now runs before tests run, but after Jasmine is initialized.
Calling `boot` while Jasmine is already initialized results in
tests executing in a different context and before other
initialization work completes.
PR Close#48521
Since we generate a `.mjs` file as entry-point for jasmine tests,
a couple of issues prevented the transitive dependencies from
bootstrap targets to be brought in (causing resolution errors):
1. The `_files` (previously `_esm2015`) targets are no longer needed,
and they also miss all the information on runfiles.
2. The aspect for computing linker mappings does not respect the
`bootstrap` attribute from the `spec_entrypoint` so we manually
add the extract ESM output targets (this rule works with the aspect
and forwards linker mappings).
PR Close#48521
RxJS currently ships ESM output that cannot be executed directly
in NodeJS. This is because RxJS ships ESM as `.js` files but does
not have a `package.json` which instructs Node to execute these as ESM.
RxJS would either need to use the explicit `.mjs` extension, or add
a `type: module` `package.json` next to the `.js` sources.
We manually patch RxJS to do this, while we wait on the upstream fix
to land. See: #7130.
PR Close#48521
The prodmode compilation pipeline -that we intend to use more heavily
now given it emitting files with the `.mjs` extension- exposes an
additional tsickle closure externs file. This file is empty most
of the time anyway since tsickle is not wired up.
We remove this generation as otherwise convenient `$(location` of
such ts library targets break because there always is more than 1 file.
PR Close#48521
Note: `--require` does not work for ESM. `--import` does not exist
in the current Node versions. Started being available in NodeJS v19.
A custom entry-point script, already supported by dev-infra, simplifies
the whole logic and solves the ESM case.
PR Close#48521
For every `ts_library` target we expose a shorthand that grants
access to the JS files because `DefaultInfo` of a ts library
only exposes the `.d.ts` files.
We rename this away from `es2015` since in practice it's a much
higher target these days. Additionally we no longer use the devmode
output but rather use the prodmode output which has the explicit
`.mjs` output- compatible with ESM.
PR Close#48521
We introduced a loader that supports ESM with Bazel. This loader can
only be enabled as part of our `nodejs_binary` defaults.bzl test. This
works fine, but there might be other binaries/tests e.g. from
`@angular/build-tooling` that should be able to use ESM & might need to
for importing the `compiler-cli`.
We move the logic for installing the patch into a `rules_nodejs` patch.
There is an existing one that is just updated to "enable ESM support".
PR Close#48521
This is necessary for e.g. JSON files from the CLDR data repository.
Otherwise these could not be added to the runfiles of the
binaries/tests.
PR Close#48521
For the ESM interop patches we expect to have two types
of patches:
* Patches for `node_modules`
* Patches for Bazel repositories.
We move the patches in respective folders to make it very clear
where a patch is used/applied to.
PR Close#48521
We modified the macros of `nodejs_binary/test` to have a rule
in between that requests the `.mjs` output. This works fine but
breaks make variable substitution for `templated_args` because
Bazel requires referenced labels to be part of the explicit `data`.
The rule in between breaks this, so we add a new argument that
can be used for such "template"/"args" data dependencies.
This can be removed when everything is ESM and we don't need
the rule in between.
PR Close#48521
The `nodejs_binary` rule already prioritizes the `.mjs` output as
of the recent commits. The `nodejs_test` rule should do the same,
and also set `use_esm = True`
PR Close#48521
The Bazel NodeJS rules will always use the `.js` files as entry-points.
Since we only rely on the `.mjs` output going-forward, we need to teach
`nodejs_binary` and `nodejs_test` to use the `.mjs` extensions if
intended.
Our `defaults.bzl` macros will set `use_esm = True`, but other targets
from e.g. external repositories should keep the original behavior.
PR Close#48521
The `__ESM_IMPORT_META_URL__` trick was used because we used both ESM
and CommonJS in this repo. It was an interop needed because
`import.meta.url` syntax couldn't be used as it woud have caused syntax
errors.
We still need to keep the CommonJS/ESM interop in the compiler-cli
because g3 relies on the compiler and uses CommonJS. This affects very
few places, just in the compiler- so this is acceptable.
PR Close#48521
The `generate-locales-tool` now needs to run as ESM because we changed
the `ts_library` rule. This commit accounts for the ESM syntax but
removing CJS code parts like `require.main === module`.
Also imports using `require` need to be changed to their ESM
equivalents.
PR Close#48521
Since this repo will now be strict ESM, and Angular Compiler packages
on NPM are also ESM-only, we can rework `ngc-wrapped` to remove
the CJS/ESM interop and we make it strict ESM too.
PR Close#48521
Replaces the existing ESM loader for dealing with external module
imports. This loader was introduced by Aspect for AIO `.mjs` scripts.
The loader will be used as foundation for a more extensive loader
that also properly handles first-party packages.
Additionally another loader is added, all packed as a single
loader because our current NodeJS version only supports a single
loader per node invocation. So we implement chaining ourselves.
The new loader will attempt rewriting `.js` extensions to `.mjs`,
also it will add `.mjs` if not already done. This is necessary
in the transition phase because we don't/cannot use explicit `.mts`
extensions and also we don't specify extensions in imports yet.
Long-term we would likely use `.mts` and explicit import extensions,
but it's not yet clear how we would sync this into g3 too.
PR Close#48521
This is in prearation for having a proper diff when this loader
is adjusted to support more situations than just simple external
node modules. See next commit.
Also the file is formatted to make the diff less verbose later.
The file was never formatted correctly and we don't lint `.mjs` files.
PR Close#48521
Currently the devmode output for `ng_module` and `ts_library` is
using ES5 CommonJS UMD. To bring it in sync with prodmode and
to start with our long-term migration to full ESM- the devmode
is updated to to ES2020 ES modules too.
This will require more tricks to make devmod work with the bazel
setup and also tests may need to be refactored given them relying
on ES5 CJS features, like for `spyOn` jasmine patching etc.
PR Close#48521
AIO e2e tests became more flaky recently. More investigation is needed to identify why,
but we mark the `//aio:e2e` as flaky for now to rerun those tests on CI if they fail.
PR Close#48498
`PlatformLocation` is already part of the public API so developers can
create their own. This means that developers would already be able to
access the existing `BrowserPlatformLocation` at runtime by injecting
it. The motivation for adding `BrowserPlatformLocation` to the public
API is because of those facts, but driven more by the fact that we are
looking to include `MockPlatformLocation` by default in TestBed.
Developers would need a way to revert back to the current behavior for
some tests that rely directly on browser interaction.
PR Close#48488
This commit adds a swappable provider for an upcoming change to the
implementation of `Router#createUrlTree`. This will be a breaking change
and is planned to be included in V16.
PR Close#47988
It is not clear that when we provide a service to some eagerly loaded module of an application, then that service is available for components of all eagerly loaded modules of that application. It would be better to give a link for more information at least.
PR Close#47979
In the #48216 Material deps were updated to v15,
but the components and modules in DevTools were not
updated to MDC nor replaced with the legacy definitions.
PR Close#48420
The argument against this feature:
Firstly, this isn't a navigation strategy that's very commonly desired.
Secondly, the hash strategy is a location configuration in `@angular/common`
and you can use it outside of the Router or with any custom router implementations.
So while the net effect of using the router is that it updates the URL which is
controlled by the strategy, this feature provider doesn't necessarily need to
exist in the Router. The location strategy is an application-wide configuration
and affects anything that imports `Location`. Of course, the Router does this
in a few places but plenty of other things might as well.
The argument for this feature:
* Discoverability. While `LocationStrategy` is technically in `@angular/common`, the most
common use-case _is_ when using it with the Router.
* Precedence in the `RouterModule.forRoot([], {useHash: true})`
* Precedence in other routing libraries (`createWebHashHistory` in VueJS
and `HashRouter` in React, for example)
* The implementation of `withHashLocation` is much more clear than
`useHash` was. You can look at the function and see that all it's
doing is adding the `HashLocationStrategy` to the providers list.
resolves#48295 / #47986
PR Close#48301
fix the issue of camel-case properties not being handled correctly in
state transition causing them not to be applied to the element
resolves#48246
PR Close#48436
This commit accommodates the recent terminology preference change
from "application" to "app" when describing what an Angular
project produces. For now, using "application" is not a blocker, but
writers should be aware of the change in terminology.
PR Close#48456
With vale 2.21, the spell checker style stopped working.
This commit removes the spell checker from the list of styles to allow Vale to
be used, minus the spell checker, until the bug is resolved or a workaround
can be applied.
PR Close#48456
This commit prepares the documentation directories for future tutorials organized by directory.
Also, it moves the Angular Libraries topic from the Tutorials section to Developer Guides in TOC
PR Close#48162
TestBed.overrideProvider should include `multi` support in its type. The
underlying implementation already supports it, as documented by the
tests which are currently casting the override to `any` to get around
the bad type.
PR Close#48424
```ts
@NgModule({
imports: [RouterModule.forRoot([{path: '/enigma', component: EnigmaComponent}])],
providers: [{provide: APP_BASE_HREF, useValue: '/en'}]
})
export class AppModule {}
```
Navigating to `/enigma` will redirect to `/en/igma` not to `/en/enigma` as it expects
Fixes: #45744
PR Close#48394
Updates the angular.io landing page with new messaging
and new images. The Quick-start app has been updated
to demonstrate a minimalist Angular app and the value
proposition content has been updated.
PR Close#47047
There have been/are several bugs related to base href handling in
Angular (#45744, #48175, #19296).
These all stem from the attempted custom handling of base href
in the `Location` class. This logic does not really make an attempt
to be fully compliant with the spec.
PR Close#48422
These migrations can no longer run due to a single update version policy (IE: from 13 to 14, 14 to 15 etc..). Therefore these are redundant and can be deleted.
We also remove the `-beta` suffix from the version which is not needed as the Angular CLI will add the prerelease suffixes automatically.
PR Close#48414
Previously, this check looked like this: `/^(https?:)?\/\//.test(baseHref)`,
but that resulted in syntactically incorrect code after Closure Compiler minification.
This was likely caused by a bug in Closure Compiler, but for now, the check is rewritten
to use `new RegExp` instead.
PR Close#48406
For standalone components it may be beneficial to group multiple declarations
into a single array, that can then be imported all at once in `Component.imports`.
If this array is declared within a library, however, would the AOT compiler
need to extract the contents of the array from the declaration file. This
requires that the array is constructed using an `as const` cast, which results
in a readonly tuple declaration in the generated .d.ts file of the library:
```ts
export declare const DECLARATIONS: readonly [typeof StandaloneDir];
```
The partial evaluator logic did not support this syntax, so this pattern was
not functional when a library is involved. This commit adds the necessary
logic in the static interpreter to evaluate this type at compile time.
Closes#48089
PR Close#48091
Replace custom `flatten` and `map` with native `flatMap` usage.
Benchmark:
| Test case name | Result |
|---------------- |-------------------------------------------------------- |
| flatten & map | flatten & map x 1,182 ops/sec ±2.18% (63 runs sampled) |
| flatMap | flatMap x 6,011 ops/sec ±0.91% (35 runs sampled) |
The fact that `flatMap` is faster is also highlighted in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
PR Close#48378
When injecting the `ChangeDetectorRef` into a node that matches a component, we create a new ref using the component's LView. This breaks down for host directives, because they run before the component's LView has been created.
These changes resolve the issue by creating the LView before creating the node injector for the directives.
Fixes#48249.
PR Close#48355
refactor(forms): make FormBuilder classes provided in root
This commit updates the FormBuilder classes to provide them in root
instead of using a deprecated pattern of providing a service in a specific
module using the `providedIn` syntax.
Closes#48237.
PR Close#48245
When using the legacy digest algorithm for i18n messages, the output hexadecimal
string now leverages a number's `toString()` function in addition to the `padStart`
string function to generate the result. This removes the need for several helper
functions which involved a series of iteration and bitwise operations to previously
generate the same output.
PR Close#48362
improve the emulated shadowDom implementation so that it can correctly
scope selectors present inside the @container at-rule (recently added
to the css specs)
resolves#48264
PR Close#48353
The docker-based AIO preview deploy setup is replaced with
significantly simpler setup using GitHub actions provided by
dev-infra (also something dev-infra can maintain better then).
The actions under the hood leverage Firebase preview channels.
PR Close#48345
Ocassionally the NodeJS version is not correct after NVM on Windows.
This adds some debug information that should help improve stability
here. A recent attempt to update the `$PATH` did not seem to help.
PR Close#48351
These steps builds AIO which is memory intensive. Running out of memory
may be the cause of some ci flakiness. Change the executor size to test
this theory.
For context: The CLI process is randomly getting `Killed`, likely by the
linux OOM killer. The Angular CLI builds happen on the host machine- no RBE.
Without the Bazel migration they were previously already at ~63% peak RAM.
With Bazel's overhead and e.g. remote caching, it seems to hit 100%
(can be seen in CircleCI machine insights). OOM killer may then choose the
highest consuming task. i.e. the Angular CLI and kill it.
Angular CLI build ram consumption is proportional to the size of the app. AIO is not small
https://app.circleci.com/pipelines/github/angular/angular/53992/workflows/ec47e3d8-2e7d-45b8-a802-7ec8ec4026c4/jobs/1265666/parallel-runs/0/steps/0-106https://angular-team.slack.com/archives/C02PARQNMC1/p1670067910332809i
PR Close#48342
We now set the Firebase deploy target for AIO preview deployment
via GitHub actions. It looks like configuring the deploy target
also requires authentication / or a project.
PR Close#48352
Checks out the Firebase project before setting the AIO preview targets.
Surprisingly Firebase requires a project when setting resource
identifiers for the targets. This is already done by the Firebase
deploy action from @FirebaseExtended, but we need to do it earlier.
PR Close#48347
For the deploy job we still need to use the Firebase CLI to configure
the proper hosting deploy targets. See:
011ef66a04.
We don't have node modules installed in this job, and it would
also be overkill to install them for just using firebase here.
Since the action uses `npx firebase-tools` down the line anyway,
we can use it without any speed downsides.
PR Close#48346
The AIO firebase project specifies `aio` as deploy target. This means
that we need to configure this target before being able to deploy AIO
previews.
We use the default project target as target since the preview Firebase
project does not use multi site targets. See:
https://firebase.google.com/docs/hosting/multisites
PR Close#48338
The `test_win` job is occasionally failing where a super old NodeJS
version is used even though we installed a proper one with `nvm`.
It's unclear how the CircleCI windows VMs differ here, it's coming
up rarely and is hard to reproduce when SSH-ing into VMs. Our best
guess is that the existing NodeJS version from the container/image is
super old and somehow takes precedence over the NVM-managed NodeJS
version. This could happen due to bad ordering in the `$PATH`
environment variable, or NVM not properly being wired up there.
We attempt to fix this by always setting `$PATH` to the NVM symlink
directory manually- with highest priority.
PR Close#48326
The `example-boilerplate` NodeJS binary always depends on all files from
the individual examples. This is not needed as for composition w/ the
boilerplate, only the target example content + boilerplate is needed
in the runfiles. This reduces the runfiles and therefore speeds up
boilerplate creation (which can happen for all examples concurrently).
PR Close#48329
AIO has two risk places where `node_modules` folders may exist and may
be accidentally picked up by Bazel- even though they are already added
as part of `.bazelignore` and made visible through `.gitignore`. It
doesn't hurt instructing Bazel to always ignore `node_modules` as part
of the `glob` instruction.
Co-authored-by: Joey Perrott <josephperrott@gmail.com>
PR Close#48329
When building AIO using `yarn build` the `--config=release` is added.
This was done as part of the Bazel migration to make sure the footer
shows a Git revision via Bazel stamping.
This does not provide enough benefits, compared to the downside of
reduced caching. Bazel will discard the analysis cache when the stamp
configuration changes.
This may happen easily when you work in framework where
`--config=release` is not used. Then when starting work in AIO: the
config changes and the cache is discarded. This may even mean that
existing framework package build artifacts may be discarded when an
AIO local build is started.
Co-authored-by: Joey Perrott <josephperrott@gmail.com>
PR Close#48329
These folders are no longer used in the source tree, and only exist
in the Bazel sandbox. We can rmeove them. Node modules are kept because
people may create them when editing the integration `package.json`
files.
PR Close#48329
It's very easy to have some random `node_modules/` folder floating
around in the repository. Especially coming from the old AIO
example boilerplate setup (which heavily relied on nested node modules).
These `node_modules/` folders can contain millions of files and might
be accidentally picked up by Bazel `glob`'s (if they are authored
in way that selects all nested files).
This could surface in `aio/tools/examples/shared` or individual content
examples, causing the Bazel analysis phase or runfile forest creation
to take forever given more than 1.5 files being dealt with.
Note that we keep the `examples/shared` node modules folder gitignored
as otherwise Renovate may have problems when updating the folder.
PR Close#48329
NgClass has non-negligable performance cost, especially if a
different object is provided as NgClass input (which was the case
for the NavItemComponent). The perfornace problem was noticed
in the scope of the INP score investigations while profiling the
https://angular.io/resources page. On this particular page replacing
NgClass usage with alternatives results in 20x (!) runtime perf
improvement. Such big improvement is possible since we avoid unneeded
CSS classes removal / adding in the DOM.
Part of #25518
PR Close#48312
Bazel otherwise may almost look as being stuck when it performs
many slow e2e tests. We should show what is running, even it results
in a little more output in the logs.
PR Close#48316
The `.bazelrc` workspace file attempted to imported the `.bazelrc.user`
file. This user file is set on CI to include the CI specific Bazel
settings.
Apparently this user rc import does not work, and fails silently given
the `try-import`. It fails because for AIO Bazel commands we change
the working directory using `yarn --cwd aio` and the `try-import`
is relative to the working directory..
PR Close#48316
The native UTF-8 encoder (`TextEncoder`) provides its output as a `Uint8Array`
which is a specialized `TypedArray` for storing byte values. To remove the need
to copy and transform this data multiple times, a `DataView` is used to allow
for low-level access to the data in a variety of bit-widths and endianness.
The `DataView` class is natively available and supported by all browsers and
Node.js versions support by the framework (https://caniuse.com/mdn-javascript_builtins_dataview).
PR Close#48256
Instead of relying on a custom implementation of a UTF-8 text encoder that needs to
be maintained by the Angular team, the i18n message digesting process now uses the
native `TextEncoder` class. This class is available for use in all browsers and Node.js
versions supported by the Angular framework (https://caniuse.com/textencoder). The
custom encoder is still used by the compiler's source map generator and cannot yet be
fully removed.
PR Close#48256
Because the language service uses the compiler, we try to produce as
much useful information as possible rather than throwing hard errors.
Hard errors cause the compiler to crash. While this can be acceptable
when compiling a program as part of a regular build, this is undesirable
for the language service.
PR Close#48314
This commit updates an internal `isStandalone` function and exposes it as a public API,
so that it can be used in applications code.
fixes#47919
PR Close#48114
This commit removes the unnecessary `assignExtraOptionsToRouter` helper
function. This helper is not necessary because the options can be
retrieved from DI and assigned during the construction on the Router.
PR Close#48215
The Router constructor and `setupRouter` factory mainly exist as a
legacy configuration. Since the Router's creation, the style in Angular
has evolved quite a bit. This commit eliminates and cleans up some
unnecessary comlicated code paths related to the router
constructor/factory.
Note that there are edits to the `setupTestingRouter` that could be seen
as breaking. However, it is not for several reasons:
1. The function is documented as a factory function. If used as
documented, the parameters should match what's available in DI
2. The function is totally unused by the Router itself and is not used
in g3 either. I believe it was made publicApi by an error when
updating documentation annotations long ago.
PR Close#48215
This commit removes several debug data structures from
the framework runtime. The data structures in question
were introduced in the framework in the past with the
idea of having debugging aid in the form of the human-redable
data structures. It turned out that in practice those
data structures were not used (most of the fwk developers
didn't even know about their existence!), yet we kept
paying the price of maintaining those duplicated (prod
and debug) version of the data structures.
PR Close#48281
This option has already been removed from availability externally. Internally, the last use has been removed
for the type on Route.loadChildren. More testing will be necessary to verify nothing relies on the other
code paths.
PR Close#48292
The navigationId is really just a count of how many navigations have been
processed through the navigation pipeline. This tracking should be
done as part of the navigation transition handler
PR Close#48202
Rather than accessing router internal properties that are available in DI,
this commit directly injects those dependencies in the navigation transition
handler. Note that there are several other items that _should_ be injectable
in DI (like the TitleStrategy) but because those are part of the Router public
interface and writeable(!), they might be changed during runtime. We
have to get these other items from the Router for now...
PR Close#48202
Remove the NgModuleRef from the internal interface of the Router. This
was only used to get the injector (equivalent to EnvironmentInjector).
Instead, the navigation transition handler can directly inject the
EnvironmentInjector
PR Close#48202
The ConfigLoader is only used as part of the navigation transition.
Moving the loader there completes the removal of event triggering in
the router code. This all now lives in the transition handler (plus
the router scroller, but let's ignore that...).
PR Close#48202
The events observable is part of the lifecycle of a navigation. This should
be contained in the NavigationTransitions class rather than the Router.
This Subject is re-exported by the router as an observable to maintain
the public API
PR Close#48202
Move the copy of the bazel dist folder to the firebase dist folder
earlier on in the process so that any checks operate out of a single
folder.
PR Close#48265
Similar to the Rules NodeJS require patch, we have an ESM import patch
as of the AIO Bazel migration (to support ESM scripts better).
This script uses `--loader`, an experimental NodeJS flag. This is
similar to how `ts-node` uses it. We should disable the warnings
as it results in a lot of unreadable Bazel output and the warnings
are okay to be ignored. Note that we cannot fine-grain disable
the specific warning so all others would be disabled too.
Realistically we haven't seen any in the past and long-term we will
be not relying on patched resolution anyway (looking at `rules_js`).
PR Close#48282
The navigationId is really just a count of how many navigations have been
processed through the navigation pipeline. This tracking should be
done as part of the navigation transition handler
PR Close#48202
Rather than accessing router internal properties that are available in DI,
this commit directly injects those dependencies in the navigation transition
handler. Note that there are several other items that _should_ be injectable
in DI (like the TitleStrategy) but because those are part of the Router public
interface and writeable(!), they might be changed during runtime. We
have to get these other items from the Router for now...
PR Close#48202
Remove the NgModuleRef from the internal interface of the Router. This
was only used to get the injector (equivalent to EnvironmentInjector).
Instead, the navigation transition handler can directly inject the
EnvironmentInjector
PR Close#48202
The ConfigLoader is only used as part of the navigation transition.
Moving the loader there completes the removal of event triggering in
the router code. This all now lives in the transition handler (plus
the router scroller, but let's ignore that...).
PR Close#48202
The events observable is part of the lifecycle of a navigation. This should
be contained in the NavigationTransitions class rather than the Router.
This Subject is re-exported by the router as an observable to maintain
the public API
PR Close#48202
As mentioned in #46021, `canMatch` guards can replace `canLoad`. There
are slight differences between the two but the purpose of preventing
user access to feature modules is still achievable. There are several
reasons keeping `CanLoad` around is detrimental to the API surface:
* Lazy loading should not be an architectural feature of an application. It's an
optimization you do for code size. That is, there should not be an architectural
feature in the router to directly specifically control whether to lazy load something or
not based on conditions such as authentication. This slightly
different from the `canMatch` guard: the guard controls whether
you can use the route at all and as a side-effect, whether we download the code.
`CanLoad` only specified whether the code should be downloaded so `canMatch` is
more powerful and more appropriate.
* The naming of `CanLoad` will be potentially misunderstood for the `loadComponent` feature.
Because it applies to `loadChildren`, it feels reasonable to think that it will
also apply to `loadComponent`. This isn’t the case: since we don't need
to load the component until right before activation, we defer the
loading until all guards/resolvers have run.
* Unnecessary API surface bloat where two features (CanMatch and CanLoad) do
essentially the same thing. This affects code size for supporting two
nearly identical features as well as the learning and teaching journey
for them both.
* `CanLoad` guards have the downside of _only_ being run once to prevent
loading child routes. Once that passes and children are loaded, the
guard never runs again. As a result, developers need to always provide
_both_ canLoad and a canActivate in case the answer to the guard flips
back to `false`. This is not the case for `canMatch`, which will run
on every navigation.
DEPRECATED: CanLoad guards in the Router are deprecated. Use CanMatch
instead.
PR Close#48180
Prior to the AIO bazel migration, the pwa test script only tested the
pwa metric. A bug was introduced where the score target was used for all
metrics, causing the AIO deploy test to fail.
The stricter checks under `strictInjectionParameters` in Angular 15 now enforce that
an inherited constructor must be compatible with DI, based on whether all parameters
are valid injection tokens. There is an issue when the constructor is inherited from
a class in a declaration file though, as information on the usage of `@Inject()` is
not present within a declaration file. This means that this stricter check cannot be
accurately performed, resulting in false positives.
This commit disables the stricter check to behave the same as it did prior to
Angular 15, therefore avoiding the false positive.
Fixes#48152
PR Close#48156
The router providers a configurable `onSameUrlNavigation` value that
allows developers to configure whether navigations to the same URL as
the current one should be processed or ignored. However, this only acts
as a default value and there isn't an API for easily overriding this for
a single navigation. Instead, developers are forced to update the value
of the property on the router instance and remember to reset it.
This feature fills a small gap in the Router APIs that enables
developers to accomplish the task of force reloading a bit easier.
Lengthy discussion about this here: #21115
PR Close#48050
This commit adds `TestBed.runInInjectionContext` which is equivalent to
`TestBed.inject(EnvironmentInjector).runInContext`. This function will
help make tests for functions which call `inject` from `@angular/core` a
little bit less verbose.
PR Close#47955
This commit extracts the Router's navigation "transitions" to a separate
file. The goal here is twofold:
- Separate the Router's logic into more manageable chunks. Rather than
having to always edit a 1000+ line file, this separates different
pieces into smaller, more focused files
- More importantly, this sets the groundwork for separating the Router
state from the individual navigation transition. That is, it would be
good for the rxjs pipeline to _not_ modify the Router state but only
keep track of its own intermediate stages and emit outwards during
important events. The Router can subscribe to those events and make
updates to its state. This would theoretically allow us to swap those
implementations independently. That is, the Router's state management
can be changed without changing the transition handling and
vice-versa.
PR Close#48092
Cannot load the root package.json. Surfaced after trying to merge
aio-bazel-migration to main because the deployment short circuits
on ci for feature branhces.
The ngc entrypoint escapes the sandboxed example folder. Rather than
always symlinking local packages, copy the full package when there are
bin entries.
Some earlier refactoring prevented the watchr script from running in
the source tree. There was also a Windows issue where running architect
didn't preserve symlinks causing the app to not be served.
The `initNavigated` flag is not necessary. The way `enabledBlocking`
works is by blocking any navigations from finishing until the
application has bootstrapped. The bootstrap is unblocked as soon as we
hit the `afterPreactivation` step. After that point,
`afterPreactivation` is always unblocked because the `bootstrapDone`
Subject is completed/stopped. There is no need for an additional
variable to track this information.
PR Close#48064
The Router currently silently ignores navigations for two reasons:
1. By default, same URL navigations are ignored. When this situation is
encountered, the navigation is ignored without any events
2. A `UrlHandlingStrategy` may ignore some URLs. For situations when the
strategy returns `false` for `shouldProcessUrl`, the Router silently
ignores the URL and updates its internal state without running
matching, guards, or resolver logic.
This commit adds new `NavigationSkipped` events for the above two situations.
PR Close#48024
This commit makes several updates to the bootstrap tests of the Router.
The change that made the real difference was providing
`MockPlatformLocation`. Other changes include:
* using `async/await` instead of `done`
* not providing APP_BASE_HREF (recent router refactors made this unnecessary)
* using some functional guards to simplify some tests
PR Close#48176
If `history.pushState()` or `history.replaceState()` were called manually without including the `navigationId` field the state was being incorrectly discarded - that logic was for maintaining the original behavior of `NavigationStart.restoredState`.
Improves on #28176, fully fixes#28108, see also #28954
PR Close#48033
The MockPlatformLocation forward, back, and historyGo methods should trigger a popstate event.
Additionally, these events should just be synchronous since that's what the majority of the major
browsers do. Lastly, onPopState should be implemented the same way as onHashChange.
PR Close#48113
Add the missing FormRecord class to the
Reactive forms API summary which is located under Developer Guides ->
Forms -> Reactive Forms.
Fixes#47808
PR Close#48136
This reverts commit 07c9396824. This
change caused test failures (both unit and integration). Though the code
looks like it should be a no-op update, it's possible it affecting
something to do with microtasks, zoneJS, and change detection. More
investigation would need to be done into the exact nature of the
failures.
PR Close#48135
We plan to change the link in google3 to point to google3-specific
documentation. Replacing a single constant will make for a smaller and
more maintainable patch.
PR Close#48082
`getPotentialPipes` returns possible pipes which can be used in the provided context, whether already in scope or requiring an import.
This is necessary to implement auto-import support for pipes in the language service.
PR Close#48090
Fixes that the `AbstractControl` was mutating the validators arrays being passed into the constructor an helper methods like `setValidators`.
Fixes#47827.
PR Close#47830
On Firefox, Angular DevTools was breaking the XML display because of the script injected
Based on contentType, we won't inject that script anymore
Fixes#48017
PR Close#48021
The useCapture argument of the listener instruction was only
meaningful in the Renderer3 case. Since the Renderer3 code was
removed this argument has no use. Note that we can perform
additional cleanup and remove the useCapture argument from the
listener instruction (this would require change to the instruction
signature, though).
PR Close#48046
Renderer3 had to store reference to the listener function in order to
properly cleanup event listeners. Since the Renderer3 abstraction was
removed the corresponding code path is no longer needed (Renderer2
returns a cleanup function that can be called directly).
PR Close#48046
None of the public properties of the `Router` are meant to be writeable.
They should all be configured using other methods, all of which have been
documented.
DEPRECATED: router writable properties
The following strategies are meant to be configured by registering the
application strategy in DI via the `providers` in the root `NgModule` or
`bootstrapApplication`:
* `routeReuseStrategy`
* `titleStrategy`
* `urlHandlingStrategy`
The following options are meant to be configured using the options
available in `RouterModule.forRoot` or `provideRouter`.
* `onSameUrlNavigation`
* `paramsInheritanceStrategy`
* `urlUpdateStrategy`
* `canceledNavigationResolution`
The following options are available in `RouterModule.forRoot` but not
available in `provideRouter`:
* `malformedUriErrorHandler` - This was found to not be used anywhere
internally.
* `errorHandler` - Developers can instead subscribe to `Router.events`
and filter for `NavigationError`.
PR Close#48006
The router has several default strategy implementations that are either
assigned via `new XStrategy()` property assignements or via the factory
function for the `Router` itself. These can be simplified by providing
the default implementation in the strategy `Injectable`. Custom
implementations can still override the defaults by specifying them in
the `providers` list.
Notably, this change also makes the `UrlHandlingStrategy` and
`RouteReuseStrategy` defaults injectable via DI rather than having to
indirectly grab them by going through the `Router` instance and
accessing the properties.
PR Close#48022
It is not clear what the intention of the promise catch and reject is. Potentially this is
legacy code built around some ZoneJs bug that doesn't exist anymore.
PR Close#48067
The `fix_missing_import` quick fix has several generic helper functions that deal with imports and decorators, which I want to reuse for other import-related features. Move these functions into `ts_utils.ts` instead. No substantive code changes are present.
PR Close#48074
This commit adds extra e2e tests for the fill mode checks in the NgOptimizedImage directive to make
sure a warning is logged in a console.
PR Close#48036
Add a warning if a fill-mode image is rendered without height. This is a common occurence if the user doesn't properly set the 'position' attribute of the parent element.
PR Close#48036
The `setupTestingRouter` function is not necessary. The `Router` can be fully
initialized through the DI configuration in the same way as it is in
production. Tests should use `provideRouter` or `RouterTestingModule`.
PR Close#48008
* Update extractedUrl documentation to point to the correct extract method
* Remove authService.redirectUrl from tour of heroes (it's not used anywhere)
PR Close#48009
This commit updates the logic related to the attribute and property binding rules for <iframe> elements. There is a set of <iframe> attributes that may affect the behavior of an iframe and this change enforces that these attributes are only applied as static attributes, making sure that they are taken into account while creating an <iframe>.
If Angular detects that some of the security-sensitive attributes are applied as an attribute or property binding, it throws an error message, which contains the name of an attribute that is causing the problem and the name of a Component where an iframe is located.
BREAKING CHANGE:
Existing iframe usages may have security-sensitive attributes applied as an attribute or property binding in a template or via host bindings in a directive. Such usages would require an update to ensure compliance with the new stricter rules around iframe bindings.
PR Close#47964
I recently checked in a new error guide. The corresponding page must have a leading zero because it is a runtime error. Otherwise links to this error guide will be invalid.
PR Close#47991
[A Github issue](https://github.com/angular/angular/issues/43821) about an arcane-sounding Forms error is one of the repo's top-ten most visited pages. This converts the error to `RuntimeErrorCode` and adds a dedicated guide to explain how to solve it.
PR Close#47969
Fixes that we were calling `createRenderer` even though we had one already. This likely wasn't a performance issue since the renderer factory caches the renderer, but it's still better to reuse it to avoid confusion in the future.
Fixes#47980.
PR Close#47981
The public API for enabling this option has already been removed. This change
updates the internal Router code to not include any logic to support it.
PR Close#47933
The caretaker note label has been renamed to the new standardized label
name. This commit updates the ng-dev caretaker check configuration to
account for this.
Also the merge assistance queue query is updated to only show PRs marked
as ready for merge. Other PRs with just a caretaker note should not be
of interest for the caretaker yet.
PR Close#47987
Due to being only 1 letter away from `provideRouter`, it is quite
possible that developers may accidentally use `provideRoutes` rather
than `provideRouter` in the `boostrapApplication` function. This change
will warn developers when `provideRoutes` is used without the `Router`.
PR Close#47896
This function is too similar in name to the new `provideRouter` and can
lead to misconfiguring the router. The function itself is just a small
wrapper around `{provide: ROUTES, multi: true, useValue: routes}`. It is
rarely necessary to provide routes in this way. The harm `provideRoutes`
will cause due to being only 1 letter away from `provideRouter` vastly
outweighs the benefit of a slightly shorter provider.
PR Close#47896
This rename reflects what the function actually does. Although the intention
is still not to have two different interceptor mechanisms, that is now
communicated in the docs for the function instead of in its name.
Fixes#47764
PR Close#47901
This is to push up the page in search results when searching for these terms.
Ex: currently when searching using the term `test` this page is displayed at the middle of the results.
PR Close#47953
This section is unnecessary given that all is needed for the user is to run `ng test`, and is also tricky to maintain (Node was hard coded to v14 still).
We have no mechanism of testing or verifying these setups, and we have no motivation to do so.
Users should see their CI providers documentation Any preconfigured Node setup is going to suggest `ng test`, which should "just work" for Angular.
PR Close#47940
In version 15, the Angular CLI will no longer generate a `karma.conf.js` by default.
This commit updates the testing document to include an example of how to include a custom `karma.conf.js`. Also, we update several parts of the documentation which were outdated.
PR Close#47940
This commit updates the error message thrown by the NgOptimizedImage directive, when it detects a situation
when inputs change after initial rendering.
The list of inputs was also updated to include all inputs added recently.
PR Close#47926
Currently, when generating an import of a selector, the language service might crash if the compiler cannot emit a reference to the new symbol's file from the target component's file. (This might happen because the two are the same file.) We should handle that case by reusing the existing import if possible, or otherwise failing gracefully.
PR Close#47938
These changes include
- Remove the usage of `enableProdMode`
- Remove `test.ts`, `polyfills.ts`, `karma.conf.js` and environment files which are no longer generated by default
PR Close#47904
Currently there are 3 pages for analytics gathering information. Most of the information is duplicate.
With this change we remove the duplicate pages and outdated content to reflect the changes in version 15.
PR Close#47840
This reverts commit 2d08965b1a.
The reason for revert is that we've identified some issues with implementation. The issues will get addressed soon and the fix would be re-submitted.
PR Close#47959
This commit updates the logic related to the attribute order on iframes and makes the rules more strict. There is a set of iframe attributes that may affect the behavior of an iframe, this change enforces that these attributes are applied before an `src` or `srcdoc` attributes are applied to an iframe, so that they are taken into account.
If Angular detects that some of the attributes are set after the `src` or `srcdoc`, it throws an error message, which contains the name of ann attribute that is causing the problem and the name of a Component where an iframe is located. In most cases, it should be enough to change the order of attributes in a template to move the `src` or `srcdoc` ones to the very end.
BREAKING CHANGE:
Existing iframe usages may have `src` or `srcdoc` preceding other attributes. Such usages may need to be updated to ensure compliance with the new stricter rules around iframe bindings.
PR Close#47935
`AnimationRendererFactory` maintains a map between a renderer delegate and the animations renderer it corresponds to, but the renderers are never removed from the map. This leads to memory leaks when used with the `ShadowDom` view encapsulation, because the specific renderer keeps a references to its shadow root which in turn references all the elements in the view.
These changes resolve the leak by clearing the reference when the animations renderer is destroyed.
Fixes#47892.
PR Close#47903
This commit updates the standalone components guide on AIO to showcase the
new `provideRouter` API. Previously the guide demonstrated configuring the
router via `importProvidersFrom(RouterModule.forRoot(...))`. A new section
was added to ensure `importProvidersFrom` was still shown in an example.
PR Close#47902
No longer maintains a separate tsconfig for the Bazel package. This
seems to be a legacy artifact back when ngc-wrapped was put into GitHub.
We now use the canonical repository Bazel tsconfig. This commit also
fixes all strictness-related errors and makes ngc-wrapped compatible.
PR Close#47893
Currently `ngc-wrapped` mostly relies on any casts/or disabled
strictness checks to be able to use `tsickle`'s emit callback and
emit result merging for ngtsc. We should change this so that supertypes
of `ts.EmitResult` can be used in these optional callbacks- allowing us
to enable strictness checks in `packages/bazel/...` too.
PR Close#47893
There are no new CLI related deprecations for v15. However, multiple
features listed in the deprecation guide have since been removed and
are now also removed from the relevant sections of the guide.
PR Close#47885
The `ServerRenderer` wasn't aligned with the `Renderer2` interface which meant that it was still referring to the old `debugInfo` parameters. It also wasn't implementing the `preserveContent` argument of `selectRootElement` which can lead to incosistencies between the server and the client.
Fixes#47844.
PR Close#47868
- Based on issue #47583
- Updated docs for Service workers by removing the section which used http-server to use service workers with ng serve
- By changelog of v14.2.0, service workers become compatible with ng serve using feature #23679
PR Close#47613
Fixes that the `AbstractControl` was mutating the validators arrays being passed into the constructor an helper methods like `setValidators`.
Fixes#47827.
PR Close#47830
As of Bazel v5, the `bazel-out` symlink no longer exists. This commit
corrects the path in the VSCode recommended launch configuration. This
helps speed up this launch configuration given less files having to be
explored.
PR Close#47831
I fixed inconsistent spelling and formatting and replaced a dead link to clarity design system starter.
docs(schematics): revert a change in schematic usage pronoun
docs: parentheses removal from schematic generation description
Co-Authored-By: Bob Watson <104218420+bob-watson@users.noreply.github.com>
PR Close#47453
This change allows the language service to suggest imports for *all* directives returned from the compiler, and for *all* import specifiers for each directive. The first change has immediate effect, since there could already be multiple directives with the same selector. The second change is future-proofing; the compiler currently only returns a single best specifier, but will return more in the future.
PR Close#47787
The image distortion warning (when rendered aspect ratio is noticeably different than intrinsic) doesn't make sense with fill mode, where the user may want the image to stretch, crop or letterbox.
PR Close#47824
Currently, the scroll event is fired immediately after the
`NavigationEnd`. However, this is problematic because a change detection
has not been able to run, meaning that Angular will not yet have run the update
block of the component templates being rendered as part of the navigation.
This change delays the scroll event using a `setTimeout`, which will
allow Angular's change detection to run before the scroll restoration is
performed.
fixes#24547
PR Close#47563
Do not generate a srcset if the loader being used is the default noopImageLoader. This loader does not take width into account, so it does not make sense to use it with srcsets.
PR Close#47804
In v14.2, we've introduced a new directive to help developers to configure images for better performance. The directive was initially released in the "developer preview" mode. We've collected the feedback, made several improvements and we are happy to announce that the NgOptimizedImage APIs are promoted to stable!
This commit updates vast majority of APIs to drop the `@developerPreview` label, which effectively documents them as stable.
There are few APIs though that retained the `@developerPreview` annotations:
- the `IMAGE_CONFIG` token
- the `ImageConfig` type
- the `fill` @Input of the directive
We plan to collect some additional feedback for the mentioned APIs and drop the `@developerPreview` annotation after that.
PR Close#47794
The original description gave a false impression that only query params and fragment changes are ignored, while actually `routeParams` changes are ignored as well.
PR Close#47786
This is a small commit to:
- clarify that loaders aren't mandatory
- remove outdated preconnect option from docs
- clarify how width/height should be set for fixed size images
- minor structural changes for clarity
PR Close#47796
The current error that is thrown when the "width" or
"height" attributes is missing doesn't mention that
"fill" mode is another option. This commit updates
the error with that option.
PR Close#47797
This commit updates the NgOptimizedImage directive to:
- drop a deprecated selector (the `rawSrc` one)
- drop corresponding input getter
The `rawSrc` was replaced by the `ngSrc` one during the developer preview phase.
PR Close#47798
This commit adds a missing warning if the image directive
detects that you're hosting your image on one of our
supported image CDNs but you're not using the built-in loader
for it. This excludes applications that are using a custom
loader.
PR Close#47330
In v14, we've introduced core concepts to allow Components, Directives and Pipes to configure their dependencies
without the need to use NgModules and without the need to be declared in an NgModule. The concepts and initial
set of APIs were marked as "developer preview" to allow developers to use these APIs and share the feedback.
Since v14, we've been reviewing the entire API surface of the framework and either updating existing APIs to support standalone or creating new APIs that allowed to use Router, HttpClient and other abstractions without NgMod
ules.
Based on the mentioned work to review and stabilize APIs and also based on the positive feedback from the commun
ity, we are happy to announce that the Standalone APIs are promoted to stable!
This commit updates vast majority of standalone-related APIs to drop the `@developerPreview` label, which effect
ively documents then as stable.
Two APIs that retained the `@developerPreview` annotations are:
- withRequestsMadeViaParent (from `@angular/common/http`)
- renderApplication (from `@angular/platform-server`)
We plan to collect some additional feedback for the mentioned APIs and drop the `@developerPreview` annotation b
efore the next major release.
Co-Authored-By: Alex Rickabaugh <alx@alxandria.net>
Co-Authored-By: Andrew Scott <atscott@google.com>
Co-Authored-By: Dylan Hunn <dylhunn@gmail.com>
Co-Authored-By: Jessica Janiuk <jessicajaniuk@google.com>
Co-Authored-By: JoostK <joost.koehoorn@gmail.com>
Co-Authored-By: Kristiyan Kostadinov <crisbeto@abv.bg>
Co-Authored-By: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
PR Close#47754
Implements more of the runtime validations for host directives as compiler diagnostics so that they can be caught earlier. Also does some minor cleanup.
PR Close#47768
The `main` bundle size has been reduced with the Angular CLI update.
This is not worth investigating as it's a positive side reduction likely
due to further optimizations in the Angular CLI devkit.
Also updates the other golden payload entries to capture all other CLI
related payload changes- making future payload update easier to
investigate.
PR Close#47717
Renovate no longer updated the dependencies because they were expanded
to a range. Ranges did not satisfy the `@next` tag anymore- so Renovate
did was not able to update.
This fixes the dependencies by locking them- and also updates the
versions according to our Renovate config.
PR Close#47717
Prior to this, the `@angular/localize/init` was added as a polyfill which caused the `@angular/localize` types not to be included in the TypeScript program which caused errors such as the below:
```
Error: src/app/app.component.ts:9:11 - error TS2304: Cannot find name '$localize'.
```
With the recent changes in the CLI (https://github.com/angular/angular-cli/pull/24032), adding `@angular/localize/init` as polyfil or in the `main.server.ts` is no longer necessary. Instead we add this as a TypeScript type. When users are running in JIT mode, we add `@angular/localize/init` as an additional entrypoint.
This change also exposes the `$localize` method as a global when importing `@angular/localize`.
Closes#47677
PR Close#47763
* Updates ng-dev to support the new g3sync canonical JSON configs
* Updates the google-internal-tests option to support the g3 sync
canonical JSON config
* Moves the YAML sync config to a dedicated JSON file, used by the
action and by `yarn ng-dev`.
* Updates the ng-dev caretaker config to fix that the Merge assistance
queue is always empty.
PR Close#47779
The supported Node.js versions for the `@angular/compiler-cli` package (^14.15.0 || >=16.10.0)
allow for the use of the `recursive` option of `mkdirSync`. Using the `recursive` option
removes the need to manually create each subdirectory in a given path.
PR Close#47678
This commit updates the `provideHttpClient` function to return the `EnvironmentProviders` instead of a regular `Provider[]`, to make sure that the `provideHttpClient` can only be used where an environment is being setup.
PR Close#47758
This update describes the content authoring and revision process in sufficient detail for technical and non-technical contributors to the angular.io documentation.
PR Close#47381
Add a new boolean attribute to NgOptimizedImage called `fill` which does the following:
* Removes the requirement for height and width
* Adds inline styling to cause the image to fill its containing element
* Adds a default `sizes` value of `100vw` which will cause the image to have a responsive srcset automatically generated
PR Close#47738
Previously we built DevTools for all browsers with version 2 of the manifest file format.
This commit includes a number of refactors and API additions that will enable us to build DevTools with version 3 of the manifest file format.
The manifest v3 build of Angular DevTools has been tested on Chrome, Edge, and Safari.
Notably, the Firefox version of Angular DevTools remains as a manifest v2 build. Firefox does not yet support manifest v3 in it's latest stable release. When Firefox makes this transition, a follow up PR will update the Firefox manifest file to version 3.
Because Firefox still needs v2, we need to keep some old v2 APIs around in our background page (service worker in v3) that will execute conditionally based on if the extension was built for v2 or v3. This is determined with the chrome.runtime.getManifest().manifest_version API.
PR Close#47575
Updates the DOM element schema to add the `hgroup` element and to include some properties that weren't supported the last time the schema was updated.
Fixes#47545.
PR Close#47552
This change aligns with the supported Node.js versions of the Angular CLI.
See: https://github.com/angular/angular-cli/pull/24026
BREAKING CHANGE: Angular no longer supports Node.js versions `14.[15-19].x` and `16.[10-12].x`. Current supported versions of Node.js are `14.20.x`, `16.13.x` and `18.10.x`.
PR Close#47730
Currently, there's no check if the task (that is being canceled) has the right state.
Only `scheduled` and `running` tasks can be canceled. If the task has a non-appropriate
state, then an error will be thrown. Cancelation should not throw an error on an already
canceled task, e.g. `clearTimeout` does not throw errors when it's called multiple times
on the same timer.
PR Close#45711
PR Close#46435
Previously, `setDisabledState` was never called when attached if the control is enabled. This PR fixes the bug, and creates a configuration option to opt-out of the fix.
Fixes#35309.
BREAKING CHANGE: setDisabledState will always be called when a `ControlValueAccessor` is attached. You can opt-out with `FormsModule.withConfig` or `ReactiveFormsModule.withConfig`.
PR Close#47576
In AOT compilations, the `strictInjectionParameters` compiler option can
be enabled to report errors when an `@Injectable` annotated class has a
constructor with parameters that do not provide an injection token, e.g.
only a primitive type or interface.
Since Ivy it's become required that any class with Angular behavior
(e.g. the `ngOnDestroy` lifecycle hook) is decorated using an Angular
decorator, which meant that `@Injectable()` may need to have been added
to abstract base classes. Doing so would then report an error if
`strictInjectionParameters` is enabled, if the abstract class has an
incompatible constructor for DI purposes. This may be fine though, as
a subclass may call the constructor explicitly without relying on
Angular's DI mechanism.
Therefore, this commit excludes abstract classes from the
`strictInjectionParameters` check. This avoids an error from being
reported at compile time. If the constructor ends up being used by
Angular's DI system at runtime, then the factory function of the
abstract class will throw an error by means of the `ɵɵinvalidFactory`
instruction.
In addition to the runtime error, this commit also analyzes the inheritance
chain of an injectable without a constructor to verify that their inherited
constructor is valid.
BREAKING CHANGE: Invalid constructors for DI may now report compilation errors
When a class inherits its constructor from a base class, the compiler may now
report an error when that constructor cannot be used for DI purposes. This may
either be because the base class is missing an Angular decorator such as
`@Injectable()` or `@Directive()`, or because the constructor contains parameters
which do not have an associated token (such as primitive types like `string`).
These situations used to behave unexpectedly at runtime, where the class may be
constructed without any of its constructor parameters, so this is now reported
as an error during compilation.
Any new errors that may be reported because of this change can be resolved either
by decorating the base class from which the constructor is inherited, or by adding
an explicit constructor to the class for which the error is reported.
Closes#37914
PR Close#44615
Updates the DOM element schema to add the `hgroup` element and to include some properties that weren't supported the last time the schema was updated.
Fixes#47545.
PR Close#47552
The language service can now generate an import corresponding to a selector. This includes both the TypeScript module import and the decorator import. This applies to both standalone components and components declared in NgModules.
PR Close#47088
This commit adds a logic that generates preload tags for priority images, when rendering happens on the server (e.g. Angular Universal).
PR Close#47343
This commit exports existing utility functions to check for control instances:
isFormControl, isFormGroup, isFormRecord, isFormArray
Those are useful when implementing validators that use the specifics of one of those control types.
To narrow down the type to what it actually is, we can now use the util functions in validators:
```
export const myArrayValidator: ValidatorFn = (control) => {
if (!isFormArray(control)) { return null; }
// now you can use FormArray-specific members, e.g.:
if (control.controls.every(c => !!c.value) {
return { myerror: true }
} else { return null; }
}
```
PR Close#47718
This commit adds the `provideLocationMocks()` function that returns mocks for the `Location` and `LocationStrategy` classes. This function can be used in tests to configure an environment where it's possible to fire simulated location events (helpful when testing Router configuration).
PR Close#47674
Add a feature to automatically generate the srcset attribute for images using the NgOptimizedImage directive. Uses the 'sizes' attribute to determine the appropriate srcset to generate.
PR Close#47547
Updates the version range in the compiler to require at least TypeScript 4.8. Note that I'm keeping the backwards-compatibility layer for 4.7 around for now until internal projects have been migrated to 4.8.
BREAKING CHANGE:
TypeScript versions older than 4.8 are no longer supported.
PR Close#47690
This commit switches `provideRouter()` to return the new
`EnvironmentProviders` wrapper type, preventing it from being accidentally
(or intentionally) included in `@Component.providers`.
PR Close#47669
This commit introduces a new type `EnvironmentProviders` which can be used
in contexts where Angular accepted `Provider`s destined for
`EnvironmentInjector`s. This includes contexts such as `@NgModule.providers`
and `Route.providers`.
The new type is useful for preventing such providers from accidentally
ending up in `@Component.providers`. It can be used as the return type of
provider functions (such as `provideRouter`) to enforce this safety.
Because `Provider` allows `any[]` nested arrays, the compile-time safety
provided by `EnvironmentProviders` is easily circumvented. However, the
runtime shape of `EnvironmentProviders` is not compatible with component
injectors and will result in a runtime error if it leaks through (NG0207).
A new function `makeEnvironmentProviders` is used to construct this new type
from an array of providers.
The existing `importProvidersFrom` operation previously returned a very
similar type `ImportedNgModuleProviders` which had the same goal. This
machinery is switched over to use the new `EnvironmentProviders` interface
instead (in fact, `ImportedNgModuleProviders` is now just an alias to
`EnvironmentProviders`).
PR Close#47669
This commit modifies `R3Injector` and other code in Angular that deals with
providers, to handle `EnvironmentProviders` objects as well as normal
`Provider` types. There is no user-visible impact to this change, but it
prepares the core of the DI system for the introduction of
`EnvironmentProviders` as a public feature.
PR Close#47669
As of Angular v15, the deprecated `relativeLinkResolution` config option of the Router is removed. This migration cleans up (removes) the `relativeLinkResolution` fields from the Router config objects in applications code.
```ts
import { RouterModule } from '@angular/router';
RouterModule.forRoot([], {
relativeLinkResolution: 'legacy',
enableTracing: false,
});
```
```ts
import { RouterModule } from '@angular/router';
RouterModule.forRoot([], {
// the `relativeLinkResolution` is removed
enableTracing: false,
});
```
PR Close#47604
This commit introduces a new `DATE_PIPE_DEFAULT_OPTIONS` token, which
can be used to configure default DatePipe options, such as date
format and timezone.
DEPRECATED:
The `DATE_PIPE_DEFAULT_TIMEZONE` token is now deprecated in favor
of the `DATE_PIPE_DEFAULT_OPTIONS` token, which accepts an object
as a value and the timezone can be defined as a field (called `timezone`)
on that object.
PR Close#47157
Previously when a file was being analyzed to determine if a shim should
be generated, up to two calls to the host `fileExists` function per file
per generator were made. In the default host, each `fileExists` call made
two underlying file system calls. Following these calls, the file was then
read via `getSourceFile`. However, `getSourceFile` will return `undefined`
if the requested file does not exist. As a result, `getSourceFile` can be
used directly to request both potential file names and leverage the return
value to determine if the file does not exist. This avoids the need to call
`fileExists` at all.
PR Close#47682
`HttpXsrfTokenExtractor` allows returning `string|null` for an XSRF token,
and the interceptor checked if the returned token is `null`. However, some
implementations return `undefined` instead (behind an `any`) type, which
caused the interceptor to crash when trying to set an `undefined` value for
the header.
This commit makes the XSRF interceptor a little more resilient against such
broken implementations of the `HttpXsrfTokenExtractor` interface.
PR Close#47683
Add a new input for banner description with default value, allowing the insertion of other descriptions and if nothing is passed, it assumes a default value.
PR Close#47681
This commit deletes a sentence from the `HttpClientJsonpModule` docs which
was accidentally copy-pasted from the docs for another symbol.
PR Close#47502
Ordinarily, providing `HttpClient` (either via `provideHttpClient` or the
`HttpClientModule`) creates an entirely separate HTTP context. Requests made
via that client are not passed through the interceptor chains that are
configured in a parent injector, for this example.
This commit introduces a new option for `provideHttpClient` called
`withRequestsMadeViaParent()`. When this option is passed, requests made in
the child context flow through any injectors, etc. and are then handed off
to the parent context.
This addresses a longstanding issue with interceptors where it's not
possible to extend the set of interceptors in a child context without
repeating all of the interceptors from the parent.
PR Close#47502
This commit introduces a new feature for `provideHttpClient` called
`withInterceptors`. This feature exposes and configures the new concept of
functional interceptors.
Functional interceptors use functions instead of classes to implement an
HTTP interceptor. Such interceptor functions have access to the DI context
from the `EnvironmentInjector` in which they're configured via the
`inject()` function. Otherwise, functional interceptors are identical in
capability to the existing interceptor system.
PR Close#47502
This commit converts `HttpClientModule` to use `provideHttpClient()`
internally, with a particular configuration of features. Other NgModules
related to configuring `HttpClient` are also converted to use the providers
directly from various features, to ensure consistency of behavior.
PR Close#47502
This commit introduces the main components of the `provideHttpClient()`
provider API, designed in the style of `provideRouter()`. Initial features
are defined for including legacy class-based interceptors, JSONP support,
and configuring or disabling the builtin XSRF protection.
This API is an alternative to providing `HttpClient` via the
`HttpClientModule`, and is more tree-shakable and more capable than the
NgModule implementation.
Tests are included to validate the new configuration format as well as the
interoperability of the two styles of providing and configuring
`HttpClient`.
PR Close#47502
This commit introduces the `provideHttpClientTesting()` function as an
alternative to the `HttpClientTestingModule` (in fact, the NgModule is
converted internally to just use the new provider function).
PR Close#47502
This commit switches the XSRF configuration tokens (for header name and
cookie name) to be `providedIn: 'root'`. This is a no-op change now as they
are always provided along with any usage of them via `HttpClientModule`, but
will become load-bearing as the `provideHttpClient` API will not provide
these tokens, and will rely on injecting them from either the parent context
or from these root providers.
PR Close#47502
@angular/common/http has XSRF protection which is enabled by default and is
implemented as an interceptor. Previously, this protection could be disabled
with an API which would internally provide a `NoopInterceptor` in place of
the standard XSRF interceptor.
To achieve the same capability of disabling the XSRF interceptor after it is
converted to the functional style, an InjectionToken is added in this commit
which disables the XSRF interceptor. This way, the interceptor can be
disabled in place without needing to override it via DI (which is difficult
for functional interceptors).
PR Close#47502
This commit rewrites the JSONP interceptor to use the functional interceptor
style internally, while still maintaining the same public API and behavior.
PR Close#47502
This commit introduces a new DI token for the set of functional
interceptors. This is a no-op in terms of behavior currently, but will allow
for the deduplication of the bridge interceptor which connects legacy class-
based interceptors to the functional interceptor chain.
PR Close#47502
This commit introduces new types and symbols related to functional HTTP
interceptors - interceptors which are plain functions with access to DI via
the `inject()` operation.
This new form of interceptor is not exposed publically in this commit, but
the legacy class-based interceptors are refactored to be built on top of the
new API internally.
PR Close#47502
Since Angular v15, the `RouterLink` contains the logic of the `RouterLinkWithHref` directive and now developers can always import and use the `RouterLink` directive when they need to add a `[routerLink]` in templates. This migration finds all imports and usages of the `RouterLinkWithHref` class and rewrites them to `RouterLink` instead.
```ts
import { RouterLinkWithHref } from '@angular/router';
@Component({
standalone: true,
template: `<a [routerLink]="'/abc'">`,
imports: [RouterLinkWithHref]
})
export class MyComponent {
@ViewChild(RouterLinkWithHref) aLink!: RouterLinkWithHref;
}
```
```ts
import { RouterLink } from '@angular/router';
@Component({
standalone: true,
template: `<a [routerLink]="'/abc'">`,
imports: [RouterLink]
})
export class MyComponent {
@ViewChild(RouterLink) aLink!: RouterLink;
}
```
PR Close#47599
Enables the new directive composition API by exposing the `hostDirectives` property on the `Directive` and `Component` decorators. Also cleans up some casts that were put in place while the feature was being developed.
Fixes#8785.
PR Close#47642
This commit updates the `RouterLink` to extend the selector to also include `<a>` and `<area>` elements, which were previously matched by the `RouterLinkWithHref` directive. The code of the directives was merged together (since there was a lot of duplication) and this commit finalizes the merge. The `RouterLinkWithHref` becomes an alias of the `RouterLink` directive.
Now there is no need to import and use the `RouterLinkWithHref` class, the `RouterLink` directive will match any element that has the `routerLink` attribute.
DEPRECATED:
The `RouterLinkWithHref` directive is deprecated, use the `RouterLink` directive instead. The `RouterLink` contains the code from the `RouterLinkWithHref` to handle elements with `href` attributes.
PR Close#47630
`getPotentialImportsFor` returns an array of possible imports, including TypeScript module specifier and identifier name, for a requested trait in the context of a given component.
PR Close#47631
The previous commit 2e1dddec45 used `@ts-expect-error` to suppress the
current error, with the intent of being informed once that's no longer
an error, ie. when we updated to an upstream TS version that includes
this change.
However this unfortunately means the change is incompatible with the
fixed version, which prevents it from working with an updated TS version
in google3.
This change reverts back to the original `@ts-ignore` which is forwards
and backwards compatible, avoiding that problem (but unfortunately
losing the benefit of being notified once fixed).
PR Close#47636
The `relativeLinkResolution` is no longer supported. The only behavior
now is the correct behavior.
BREAKING CHANGE: `relativeLinkResolution` is no longer configurable in
the Router. This option was used as a means to opt out of a bug fix.
PR Close#47623
This commit updates the `RouterLinkWithHref` class to further align with the `RouterLink` class by removing own constructor from the `RouterLinkWithHref` class.
PR Close#47619
When using `loadChildren` or `loadComponent`, a common pattern is to pass
a function that returns a `Promise` from a dynamic import:
```typescript
{
path: 'lazy',
loadComponent: () => import('./lazy-file').then(m => m.LazyCmp),
}
```
The `.then` part of the expression selects the particular exported
component symbol from the dynamically imported ES module.
ES modules can have a "default export", created with the `export default`
modifier:
```typescript
@Component({...})
export default class LazyCmp { ... }
```
This default export is made available to dynamic imports under the well-
known key of `'default'`, per the ES module spec:
https://tc39.es/ecma262/#table-export-forms-mapping-to-exportentry-records
This commit adds a feature to the router to automatically dereference such
default exports. With this logic, when `export default` is used, a `.then`
operation to select the particular exported symbol is no longer required:
```typescript
{
path: 'lazy',
loadComponent: () => import('./lazy-file'),
}
```
The above `loadComponent` operation will automatically use the `default`
export of the `lazy-file` ES module.
This functionality works for `loadChildren` as well.
PR Close#47586
This commit breaks out the code in @angular/router needed to support the
deprecated `loadChildren` signature into a separate file, which reduces the
opportunity for conflicts when patching that behavior in g3.
PR Close#47586
`getPotentialTemplateDirectives` returns possible directives which can be used in the provided context, whether already in scope or requiring an import.
This is necessary to implement auto-import support for standalone components in the language service.
PR Close#47561
After implementing `getPotentialTemplateDirectives`, we will use this data struture to represent both in-scope and out-of-scope directives. So this rename is an advance cleanup.
PR Close#47561
This commit deprecates the above two forms of `providedIn`.
DEPRECATED:
- The ability to pass an `NgModule` to the `providedIn` option for
`@Injectable` and `InjectionToken` is now deprecated.
`providedIn: NgModule` was intended to be a tree-shakable alternative to
NgModule providers. It does not have wide usage, and in most cases is used
incorrectly, in circumstances where `providedIn: 'root'` should be
preferred. If providers should truly be scoped to a specific NgModule, use
`NgModule.providers` instead.
- The ability to set `providedIn: 'any'` for an `@Injectable` or
`InjectionToken` is now deprecated.
`providedIn: 'any'` is an option with confusing semantics and is almost
never used apart from a handful of esoteric cases internal to the framework.
PR Close#47616
Adds support for host directives on the root component by calling `findHostDirectiveDefs` and passing the results to the relevant functions.
PR Close#47620
The latest TypeScript compiler exposes the previously private field
`hasInvalidatedResolutions`. That breaks Angular in the newer TS,
because the new field would be required on DelegatingCompilerHost.
However we cannot just add the field here, because it's not present in
the older compiler.
This change adds the field for delegation, which works at runtime
because the field is present. It suppresses the compiler error using a
`// @ts-expect-error`, which should be removed once Angular moves to a
TSC version that includes this change.
PR Close#47585
This commit updates the 'name' of `RouterOutlet` to be an `Input` rather
than an attribute. Note that this change does not affect `[attr.name]=`
because those already would not have worked. The static name was only
read in the constructor and if it wasn't available, it would use
'PRIMARY' instead.
fixes#12522
BREAKING CHANGE: Previously, the `RouterOutlet` would immediately
instantiate the component being activated during navigation. Now the
component is not instantiated until the change detection runs. This
could affect tests which do not trigger change detection after a router
navigation. In rarer cases, this can affect production code that relies
on the exact timing of component availability.
PR Close#46569
The `NgOnChanges` feature matches some legacy ViewEngine behavior where the keys in the `SimpleChanges` object are based on the *declared* names of the inputs, not the public or minified names. This is achieved by constructing the `DirectiveDef.declaredInputs` object at the same time as when `DirectiveDef.inputs` is created.
This logic breaks down for host directives, because they can re-alias the input under a different public name which won't be present in the `declaredInputs`.
These changes add some logic to patch the directive def aliases onto the `declaredInputs`. There is some validation in place to ensure that this patching doesn't overwrite any pre-existing inputs.
PR Close#47597
With the recent changes in the Angular CLI (https://github.com/angular/angular-cli/pull/23938) the polyfills option accepts module path that are resolved using Node module resolution. Also, the polyfills.ts file is no longer generated by default.
This commit changes the way on how the polyfill is added to the projects.
PR Close#47569
This commit updates the `RouterLink` directive to use a renderer to apply an `href` attribute value. Previously, the `RouterLinkWithHref` used a host binding for this and that prevented further merge of the `RouterLink` and `RouterLinkWithHref` directives.
PR Close#47605
- This update is needed to implement the changes in `ng add localize` https://github.com/angular/angular/pull/47569
- Add missing `root` options to all `angular.json`, this is required as otherwise the angular.json validation will fail.
- Remove `require.context` from test.ts integration test, as this is no longer needed.
- Update payloads golden files.
PR Close#47584
Add a test to ensure that optimized image loaders can be configured at any
level of the DI hierarchy, including component's node injector.
PR Close#47565
Previously the built-in image loaders for the optimized image directive
were tightly coupled to the preconnect checks infrastructure. This was
creating a problem when developers were trying to provide a loader on
a component level (or, more generally, deeper in the DI hierarchy):
- PreconnectLinkChecker is the application-level service, provided in root;
- it makes sense to provide loaders in different parts of the DI hierarchy;
This refactoring removes the PreconnectLinkChecker configuration from
the loaders infrastructure and makes it application-wide config. The
PRECONNECT_CHECK_BLOCKLIST is also a simple provider (it was a
multi-provider previously) which should make the overall configuration
easier.
PR Close#47565
Ensure that keyframes rules, defined within components with emulated
view encapsulation, are scoped to avoid collisions with keyframes in
other components.
This is achieved by renaming these keyframes to add a prefix that makes
them unique across the application.
In order to enable the handling of keyframes names defined as strings
the previous strategy of replacing quoted css content with `%QUOTED%`
(introduced in commit 7f689a2) has been removed and in its place now
only specific characters inside quotes are being replaced with
placeholder text (those are `;`, `:` and `,`, more can be added in
the future if the need arises).
Closes#33885
BREAKING CHANGE:
Keyframes names are now prefixed with the component's "scope name".
For example, the following keyframes rule in a component definition,
whose "scope name" is host-my-cmp:
@keyframes foo { ... }
will become:
@keyframes host-my-cmp_foo { ... }
Any TypeScript/JavaScript code which relied on the names of keyframes rules
will no longer match.
The recommended solutions in this case are to either:
- change the component's view encapsulation to the `None` or `ShadowDom`
- define keyframes rules in global stylesheets (e.g styles.css)
- define keyframes rules programmatically in code.
PR Close#42608
Adds the logic that will filter out unexposed inputs/outputs and apply the aliases that the author specified when writing the host directives.
PR Close#47536
Currently, the `RouterLink` and `RouterLinkWithHref` classes share a lot of common code (with some special logic around handling `<a>`-related scenarios). This commit unifies the logic of the mentioned directives by moving the necessary handling to the `RouterLink` directive and making it a parent one for the `RouterLinkWithHref` class (i.e. class RouterLinkWithHref extends RouterLink).
This is the first step in upcoming unification to merge both directives and just keep `RouterLink` one (it'd be done in followup PRs).
PR Close#47500
ActivatedRouteSnapshot data gets mutated in the resolve phase of the Router. The title is assigned as part of this.
As a result, the title must be a getter in order to pick up the value that was note available during the class creation.
fixes#47459
BREAKING CHANGE: The title property is now required on ActivatedRouteSnapshot
PR Close#47481
Currently the code that creates a root component assumes that it's always going to deal with a single component definition which won't work with host directives. These changes rework the code so that it's able to apply multiple directives, allowing us to eventually add support for host directives.
I also tried to make the root component creation easier to follow by breaking it up into smaller functions.
PR Close#47530
The Angular compiler will report the invalid banana in box, this code fixes
will try to fix the error and all the same errors in the selected file.
Fixes#44941
PR Close#47393
This commit applies the changes similar to the ones performed for the `inject()` function in https://github.com/angular/angular/pull/46649/commits/df246bb2358794e3aad53870f1554d84bbe390b2.
The `TestBed.inject` function is updated to use previously added object-based API for options: now the flags argument supports passing an object which configures injection flags.
DEPRECATED:
The bit field signature of `TestBed.inject()` has been deprecated, in favor of the new options object.
PR Close#46761
This commit applies the changes similar to the ones performed for the `inject()` function in https://github.com/angular/angular/pull/46649/commits/df246bb2358794e3aad53870f1554d84bbe390b2.
The `Injector.get` function is updated to use previously added object-based API for options: now the flags argument supports passing an object which configures injection flags.
DEPRECATED:
The bit field signature of `Injector.get()` has been deprecated, in favor of the new options object.
PR Close#46761
1. Remove `zone-async-tagging` implementation from zone.js and move the
implementation to `@angular/core`, so `@angular/core` can import this
package more easily for better treeshaking.
2. Add `async tagging zone` implemenation into `@angular/core` package.
So we don't need to get the `AsyncStackTaggingZoneSpec` from `global`
instance, we can import the `class` directly for better treeshaking.
3. Only load this ZoneSpec when `ngDevMode` is `true`.
PR Close#47416
These dates are week-specific to give some flexibility during the release process which frequently happens. I back-dated the most recent minors mainly to make sure we include them when we eventually update to v16 and beyond.
PR Close#47513
This commits update `isDevMode` to rely on the `ngDevMode` which in the CLI is set by the bundler.
We also update `@angular/platform-dynamic-browser` and `@angular/compiler` to remove usage of `jitDevMode`, with this change we remove all internal usages of `isDevMode`.
PR Close#47475
Exposes the host directives to the host and its descendants through DI. This can be useful, because it allows the host to further configure the host directives.
PR Close#47476
When reporting type-checking diagnostics in external templates we create a
`ts.SourceFile` of the template text, as this is needed to report Angular
template diagnostics using TypeScript's diagnostics infrastructure. Each
reported diagnostic would create its own `ts.SourceFile`, resulting in
repeatedly parsing of the template text and potentially high memory usage
if the template is large and there are many diagnostics reported. This commit
caches the parsed template in the template mapping, such that all reported
diagnostics get to reuse the same `ts.SourceFile`.
Closes#47470
PR Close#47471
`TNode`s have the `directiveStart` and `directiveEnd` properties that indicate the indexes at which directive instances (including components) have been stored. Currently there are several places throughout the codebase which assume that if a component matches a node, its index will always be `directiveStart`.
As far as I can tell, we probably ended up accumulating these assumptions, because we needed a quick way of accessing the component instance and it happened to be conventiently stored at `directiveStart`. The reason why it's always stored at `directiveStart` is likely to match the lifecycle hook execution order from ViewEngine.
With host directives these assumptions won't be valid anymore, because we want the host directives to _always_ execute before the host component that they're on so that the host has a chance to override them. To achieve this we have to insert host directives before the component.
These changes address the issue by introducing a new `TNode.componentOffset` property which indicates the offset after `TNode.directiveStart` at which the component is stored. Furthermore, I've removed the `isComponentHost` flag since it was duplicating the information from `TNode.componentOffset` and I've audited and fixed all the places where we read `directiveStart` to account for the changed data structure.
Reasons for some of the decisions I made along the way:
* In the case of host directives, I decided to go against our current convention of executing the component lifecycle hooks before the directive, because lifeycle hooks are a chance to change the component state (e.g. in `ngOnChanges`) and running the component hooks first would allow the host directives to undo any overrides made by the host.
* I decided to go with a `componentOffset`, instead of a `componentIndex` indicating the exact index the component is at, because as the runtime is set up at the moment, it would be difficult to know what index the component is going to end up at. Another problem is that we appear to have some logic that moves the entire "directive window" by incrementing both `directiveStart` and `directiveEnd`. By using an offset, we don't have to worry about the index remaining correct.
PR Close#47490
related to https://github.com/angular/angular/pull/47438
After jest 28, `jest-environment-node` and `jest-environment-jsdom` need
to be installed by the user themselves, and the API has some breaking
changes, so this PR fix these issues to make the zone/jest integration
test code work as expected.
PR Close#47486
make sure that when an animation is used via the `useAnimation` function
and a delay has been provided then that delay gets correctly applied
(this PR is a follow up for #47285)
PR Close#47468
Previously, you could inspect the source code of a component but not a directive. This commit adds functionality to inspect source code for directives as well. Now you will see the inspect icon on the header component of each directive on a selected element.
PR Close#47334
Previously there was no existing issue template for users who want to open a feature request or bug report issue for Angular DevTools.
This commit addresses this by creating a new issue template for Angular DevTools.
PR Close#47383
use `text-top` instead of `top` for table cells verical alignment
so that the texts are correctly vertially aligned regardless on
the dom structure
resolves#47423
PR Close#47457
Expands the runtime to allow for basic host directives to be invoked within a template. This is achieved by making a second pass over the directives that were matched based on their selectors and producing a new array of directives that include host directives. Note that the ordering in the array is important, because it determines which host bindings and DI tokens will be overwritten.
PR Close#47430
This commit updates the location of the Image Directive guide link in the left navigation menu. Now the link is located under the Feature Preview section.
Also, this commit updates the Image Directive guides to add a highlighted message that the directive is in the developer preview mode.
PR Close#47466
Previously, the `Update AIO events` GitHub Action was using a version of
the `create-pr-for-changes` GitHub Action that relied on a GitHub App
key for Angular Robot. This, however, prevented PRs from being created
from the accounts fork.
Switch to a newer version of the `create-pr-for-changes` action that
uses a GitHub Personal Access Token instead.
PR Close#47452
We have some logic that generates the `InitialInputs` data structure by taking the static attributes of a node and looking them up in the `DirectiveDef.inputs` map to determine if they correspond to an input.
This works fine at the moment, but it will make it trickier to generate the correct `InitialInputs` for host directives, because the `DirectiveDef.inputs` entries might be aliased under a different name.
These changes rework the existing `generateInitialInputs` function so that it does its lookup on the remapped inputs that have accounted for the aliasing process already.
PR Close#47228
This commit updates the payload size for the Animations integration test app. The increase is likely is a result of a number of accumulated changes from various commits merged previously.
PR Close#47424
In a previous refactor, the `RootContext` was update to only contain a reference to a component. This commit perform further refactoring to get rid of the `RootContext` altogether, while storing component reference directly on the root view (without the `RootContext` wrapper).
PR Close#47056
make sure that when an animation is defined via the `animation` function
(and used via `useAnimation`) and a delay has been provided then that
delay gets correctly applied
resolves#47283
PR Close#47285
Use the `create-pr-for-changes` action of the `angular/dev-infra` repo,
instead of the `gkalpak/dev-infra` one. The latter was used during
development for debugging purposes during and was accidentally committed
to the repo.
PR Close#47410
This commit updates the `renderApplication`, `renderModule` and `renderModuleFactory` functions to append a special marker (in a form of an attribute, called `ng-server-context`) to the component host elements. This marker is needed to analyze how a page was rendered.
PR Close#47103
Updated methods' description verbs. They are sometimes used with the assumption of the 'it' pronoun and sometimes not. For instance, the verb 'to construct' is used with 's' in one method description and not others. It is the case for other verbs as well. This is also remarkable in the description of the built-in methods of FormArray.
PR Close#47399
replace deprecated --outFile option for ng extract-i18n
The `--outFile` command option was last used in Angular v10 (back when it was still `ng xi18n`), yet there are still references to it in the documentation, alongside the up-to-date option `--out-file`. This commit replaces all mentions to the incorrect option with the correct writing.
PR Close#47397
This commit introduces a new process for generating data for the AIO
[events page](https://angular.io/events), which streamlines the process
and minimizes duplication and manual work. For more details, see
`aio/scripts/generate-events/README.md`.
PR Close#45588
This commit updates runtime and compiler to drop unnecessary `srcset` sanitization. The sanitization was needed previously for old browsers, but all modern browsers can handle `srcset` safely without any additional sanitization.
See prior discussion in https://github.com/angular/angular/pull/45182.
Resolves#45164.
PR Close#47302
The forms `submit` event handlers have a `return false` to prevent form submissions from reloading the page, however this also prevents the browser behavior for forms with `method="dialog"`.
These changes add an exception since the `method="dialog"` doesn't refresh the page.
Fixes#47150.
PR Close#47308
As an ongoing effort to stabilize the NgOptimizedImage API before existing the Developer Preview, this commit renames the `rawSrc` attribute used for the NgOptimizedImage selector matching to `ngSrc`. The `rawSrcset` is also renamed to `ngSrcset` for consistency.
The motivation for this change is to align the attribute name better with other built-in directives, such as `ngFor`, `ngIf`, `ngClass`, `ngStyle`, etc.
Note: this is technically a breaking change, but since the NgOptimizedImage directive is in the Developer Preview mode, we land the change in a patch branch.
PR Close#47362
This commit adds a re-export of the `NgForOf` class as `NgFor` to improve the DX for cases when the directive is used as standalone. Developers can import `NgFor` class, which better matches the `ngFor` attribute used in a template.
PR Close#47309
Unify default value handling across injector and node injector: as long
as a default value is provided it has the same effect as specifying the
@Optional() flag.
Fixes#47109
PR Close#47242
Using raw objects as a lookup structure will inadvertently find methods defined on
`Object`, where strings are expected. This causes errors downstream when string
operations are applied on functions.
This commit switches over to use `Map`s in the DOM element schema registry to fix
this category of issues.
Fixes#46936
PR Close#47220
When the Angular compiler emits a diagnostic in a template file, it
forces TypeScript to parse that template. Templates are not TypeScript,
so this parse finds a bunch of parsing errors, which Angular then
ignores and we show the diagnostic anyways because we have more context.
This can lead to strange behavior in TypeScript because templates are so
weird that it can break the parser and crash the whole compiler.
For example, certain Angular templates can encounter failures fixed by
microsoft/TypeScript#45987, which are not easily debuggable and require
a TS upgrade to fix.
This commit introduces logic to handle the error gracefully, by falling
back to report the template error on the component class itself. The
diagnostic is extended to still reference the template location and
includes the failure's stack trace, to allow the parsing failure to be
reported to TypeScript (as parsing should in theory not cause a crash).
Closes#43970
PR Close#44001
This option has no longer any effect as Ivy is the only rendering engine.
BREAKING CHANGE: Angular compiler option `enableIvy` has been removed as Ivy is the only rendering engine.
PR Close#47346
Previously, when requesting non-cached asset resources from the network,
the ServiceWorker would strip off all request metadata (including
headers). This was done in order to avoid issues with opaque responses,
but it turned out to be overly aggressive, breaking/worsening legit
usecases (such as requesting compressed data).
This commit fixes this by preserving the headers of such requests.
For reference, Workbox passes the original request as is. (See for
example the [NetworkFirst][1] strategy).
> **Note**
> Data requests (i.e. requests for URLs that belong to a data-group) are
not affected by this. They already use the original resource as is.
[1]: https://github.com/GoogleChrome/workbox/blob/95f97a207fd51efb3f8a653f6e3e58224183a778/packages/workbox-strategies/src/NetworkFirst.ts#L90Fixes#24227
PR Close#47260
Previously, the `MockServerStateBuilder#withRedirect()` method did two
things: (a) define a redirect from one path to another and (b) specify
the contents of the redirect destination. This was confusing, because it
deviated from the regular way of specifying file contents, which is via
a `MockFileSystem` instance.
This commit slightly simplifies the process of defining redirects by
having the `withRedirect()` method only define the redirect and let the
contents of the redirect destination be specified as usual via
`MockFileSystem`. This makes `MockFileSystem` the single source of truth
for file contents used with `MockServerState`.
PR Close#47260
Previously, the default value of `MockRequest#credentials` (used in
testing) was set to `omit`. This was different than the default value
used in browsers, which is `same-origin` (see [Request docs on MDN][1])
and could lead to incorrect test results.
This commit changes the default value for `credentials` to `same-origin`
to match what would happen in the browser.
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
PR Close#47260
Previously, the criteria for determining if a request was a
[navigation request][1] did not account for the request method. This
incorrectly identified HTML form submit POST requests as navigation
requests and served `index.html` instead of passing them through to the
server, thus breaking the form submission.
This commit fixes this by ensuring that only GET requests are considered
navigation requests.
> **Note**
> HTML forms with their method set to `GET` will still be affected by
> the issue. This is not a big concern, because using `GET` for form
> submission is quite uncommon and generally discouraged (due to
> limitations and security considerations).
[1]: https://angular.io/guide/service-worker-config#handling-navigation-requestsFixes#36368
PR Close#47263
This change removed the deprecated `canParse` method from all the TranslationParsers.
BREAKING CHANGE:
- `canParse` method has been removed from all translation parsers in `@angular/localize/tools`. `analyze` should be used instead.
- the `hint` parameter in the`parse` methods is now mandatory.
PR Close#47275
`PreconnectLinkChecker` checks to see if preconnect links have been added to the `<head>` element but uses `document` directly which does not exist when rendering in Angular Universal. This PR switches the `PreconnectLinkChecker` to use the `DOCUMENT` token instead so that the query works when SSR'ing
PR Close#47353
This is a tiny fix to add paragraph breaks in
image distortion warnings to make them a bit
easier to read. With this change, the intrinsic
and rendered image sizes are printed on their
own lines instead of mid-paragraph.
PR Close#47299
Since "application design" is being used as an adjective in the following sentence:
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
I recommend replacing it with "application-design" (cf. https://en.wikipedia.org/wiki/Compound_modifier).
PR Close#47328
Add a new doc, `aio/UPDATING.md`, with instructions on updating the
angular.io app to align with the latest Angular CLI/framework/Material.
Also, update the instructions on updating the docs examples apps.
PR Close#47250
Add a new doc with instructions on how to use TLS certificates issues by
[Let's Encrypt][1] in the PR preview server.
[1]: https://letsencrypt.org/
PR Close#47250
It appears that the indefinite pronoun either does not agree with the verb occur in your sentence. Consider changing the form of the verb.
PR Close#47246
The NgOptimizedImage directive was previously trying to use an
already destroyed injector in the ngOnDestroy callback. This fix
pre-injects necessery tokens so no injector calls are done
in the destroy process.
PR Close#47243
Yarn 1.x has a bug where it keeps nested unused node modules and doesn't
delete them automatically. This throws off Bazel in some scenarios when
the lock file is updated. This commit invalidates the cache to get a
fresh clean node modules cache without any unused nested directories.
PR Close#47240
Valid density descriptors used in the NgOptimizedImage can contain multiple
digits (ex. 1.25x, 25x). This change fixes the issue where density descriptors
with multiple digits (ex. 25x) where considered invalid.
Please note that a valid density descriptor might still be rejected by the
directive's validation logic if the supplied value is too big.
PR Close#47230
Back when we fixed the pullapprove verify command and our config to
properly include dot-prefixed files, we accidentally started matching
the pullapprove file in the dev-infra group.
This commit fixes this so that dev-infra is not triggered for basic
code owner config changes.
PR Close#47216
The peek-a-boo example image does not exactly reflect what happens. This updates the hook table and the image of the peek-a-boo output. Closes#40138
PR Close#47219
This is the compile-time implementation of the `hostDirectives` feature plus a little bit of runtime code to illustrate how the newly-generated code will plug into the runtime. It works by creating a call to the new `ɵɵHostDirectivesFeature` feature whenever a directive has a `hostDirectives` field. Afterwards `ɵɵHostDirectivesFeature` will patch a new function onto the directive definition that will be invoked during directive matching.
For example, if we take the following definition:
```ts
@Directive({
hostDirectives: [HostA, {directive: HostB, inputs: ['input: alias']}]
})
class MyDir {}
```
Will compile to:
```js
MyDir.ɵdir = ɵɵdefineComponent({
features: [ɵɵHostDirectivesFeature([HostA, {
directive: HostB,
inputs: {
input: "alias"
}
}])]
});
```
The template type checking is implemented during directive matching by adding the host directives applied on the host to the array of matched directives whenever the host is matched in a template.
Relates to #8785.
PR Close#46868
With this change we replace AIO examples to use stable Angular packages.
The main reasons for this is that prereleases might contain bugs that
are not in the stable version especially in the Angular CLI were it's
not validated in G3.
PR Close#47092
This helper accepts a class for an Angular trait, and returns the NgModule which owns that trait. This will be useful for the language service import project, which needs to edit import arrays on the module.
PR Close#47166
prior to this change the stagger timing was being built during the
ast building instead of dynamically when visiting the stagger animation,
thus it could not handle params correctly, this change makes it so that
during ast building a timing ast is built instead and that ast is used
dynammically to build animations which can handle params correctly
resolves#19786
PR Close#47208
Fix some TypeScript build warnings related to things like redundant `?.`
and `??` operators and uninitialized/non-nullable `@Input` properties.
You can see an example build with the warnings [on CI][1].
[1]: https://circleci.com/gh/angular/angular/1215057#step-104-232
PR Close#47201
The `mergeOverridenImplementation` processor tries to ensure that any
doc used with the `@overrideImplementation` annotation is not itself
public (and explicitly marks is as internal if it is).
Previously, it determined the public/private status of a doc by only
checking the value of the doc's `internal` property (which is mainly set
via the `@internal` annotation). This failed to account for docs marked
as "private exports" (such as those prefixed with `ɵ`), which are
essentially also treated as internal.
This would result in incorrect warnings. [Example warning][1]:
> Constructor doc forms/ɵFormControlCtor was not marked '@internal';
> adding this annotation.
This commit prevents the incorrect warning by also checking the value of
the doc's `privateExport` property to determine its public/private
status.
[1]: https://circleci.com/gh/angular/angular/1215057#step-104-164
PR Close#47201
Previously, error messages related to an overriden constructor doc would
stringify the doc as `[object Object]`, which is not helpful for
debugging the issue. For example:
> Constructor doc [object Object] was not marked '@internal'
This commit improves the error message by including the doc's ID
instead. For example, the above error message would become:
> Constructor doc forms/ɵFormControlCtor was not marked '@internal'
PR Close#47201
This commit fixes a bug where `rawSrcset` in the image
directive would allow density descriptors like `1.5x`
but not like `1.25x`. Now descriptors with 2+ digits
after the decimal point should work.
PR Close#47197
This is a tiny commit to add newlines in the image
directive's "oversized image" error. Currently, the
rendered and intrinsic image sizes are printed
mid-line, which make them a little hard to read.
This commit puts them each on their own line.
PR Close#47188
The `UrlTree` is a fundamental concept in the router's API design.
Generally speaking, a `UrlTree` would be constructed via things like
`Router.createUrlTree` or `UrlSerializer#parse`. The second example here
is the core reason to make the constructor public, regardless of how
develpers generally create a `UrlTree` in an application.
Applications can provide their own `UrlSerializer` and may want to implement their
own `parse` method. This means they would also need to create a
`UrlTree` but would not be able to do so effectively because the
constructor is marked `@internal`.
In addition, the `UrlTree` constructor only has 3 parameters, all of
which are already public. There's nothing "special" about it other than
the potential desire to push developers to use other methods for
constructing a `UrlTree` (i.e. `Router.createUrlTree`).
Also see http://b/234604699#comment9 for additional context.
PR Close#47186
Create three new helper methods: `addElementToArrayLiteral`, `objectPropertyAssignmentForKey`, and `updateObjectValueForKey`. These methods make interacting with array and object literals easier.
These will be useful for the standalone imports feature, which will need to add new terms to import arrays in Component and NgModule decorators.
PR Close#47181
Replaces (almost) all of the usages of the deprecated `getMutableClone` function from TypeScript which has started to log deprecation warnings in version 4.8 and will likely be removed in version 5.0. The one place we have left is in the default import handling of ngtsc which will be more difficult to remove.
PR Close#47167
This helper accepts a class, and returns the primary Angular Decorator associated with that trait (e.g. the Component, Pipe, Directive, or NgModule decorator). This will be useful for the language service import project, which needs to edit import arrays inside the decorator.
PR Close#47180
Fix compilation issue with TypeScript nightly. TypeScript added a field
`0` to `RegExpMatchArray` in
https://github.com/microsoft/TypeScript/commit/3b80ddca212959ae5dcf2f48704be627283c6468.
Before that, `RegExpMatchArray` and `RegExpExecArray` were identical.
In one place Angular incorrectly expects `RegExpMatchArray` as the
result of a RegExp#exec() call. This assignment fails on TypeScript
nightly with the error:
Property '0' is missing in type 'RegExpExecArray' but required in type 'RegExpMatchArray'.
Fix the issue by using the type `RegExpExecArray` instead. This also
works for older TypeScript versions.
PR Close#47169
Type inference in cases involving `ControlConfig` was previously not working as desired. This was because the compiler was enforcing that `ControlConfig` is a *tuple* -- which is not always that easy to prove! By relaxing this constraint a bit, and just inferring from `ControlConfig` as an array, the type inference catches many more cases, and is generally more correct.
PR Close#47034
In #39004 some logic was introduced that tries to recover invalid expressions by treating the `=` token as a recovery point. It works by skipping ahead to the next recovery point inside the `skip` method which is called whenever an error is reported. This can lead to an infinite loop inside the `parseChain` method which assumes that reporting an error would've skipped over the token, but that won't happen since the `=` token is a recovery point. These changes resolve the infinite loop by breaking the loop if `error` didn't skip to a different token after the error was reported.
Fixes#47131.
PR Close#47151
This commit adds a console warning in development mode
if the ultimate rendered size of the image is much
smaller than the dimensions of the requested image.
In this case, the warning recommends adjusting the
size of the source image or using the `rawSrcset`
attribute to implement responsive sizing.
PR Close#47082
This commit cleans up some stylistic nits and
moves functions out of util.ts into files that
are more specifically named (url.ts and error.ts).
PR Close#47082
This commit fixes a bug in NgOptimizedImage where
if you bound the width or height attribute (e.g.
`[width]=width`), the attribute would only be
reflected as "ng-reflect-x". The actual "width" or
"height" attribute would not be set on the host
element. This is a problem because the exact named
attribute must be set on the element for the
browser to detect it and use it to reserve space
for the image (and thus prevent CLS).
PR Close#47082
This commit adds the docs for the NgOptimizedImage directive.
As a part of this commit, we also remove an export of directive-related symbols previously exposed as public APIs (i.e. APIs can not be used directly).
PR Close#47082
With this commit, the NgOptimizedImage directive will throw
a runtime error if it detects that one of the density descriptors
in rawSrcset is higher than 3x. It's generally not recommended
to use density descriptors higher than ~2, as it causes image to
download at very large sizes on mobile screens (thus slowing down
LCP). The density max is set conservatively to 3 in case apps
expect users to zoom in.
In future commits, we may want to throw even at densities >
than 2 and provide a configuration override for the zoom case.
PR Close#47082
This commit updates the logic of Image Loaders to throw an error in case an absolute URL is provided an an input to the loader function. The loaders can construct URLs based on image paths relative to the bas URL configured for a loader.
PR Close#47082
This reverts commit a0fdb8c7e9.
The `src` and `srcset` attributes don't pose security threats in modern browser, so sanitization is not really necessary.
PR Close#47082
This refactoring pulls url-related error reporting into one place.
It also makes sure that error messages and the related error
reporting logic are tree-shakable.
PR Close#47082
Refactoring tests made me realise that we are misinterpreting the
ensurePreconnect option - in fact it should configure the
PRECONNECT_CHECK_BLOCKLIST provider _only_ if the ensurePreconnect
is set to false.
PR Close#47082
This commit removes a nested describe block as it
does't add any value this point. Also moved the
utils tests to the bottom of the file as those are
less important as compared to the other tests.
PR Close#47082
This change introduces common infrastructure for image
loaders. This removes code duplication and makes it
easier to write loaders - a loader author just needs
to provide a loader config to the URL mapping function.
PR Close#47082
This commit modifies the provideCloudinaryLoader and provideImageKitLoader functions to support an additional ensurePreconnect option, similar to the Imgix loader functions.
PR Close#47082
This commit applies a sanitization to values produced by a loader, before they are used for the `src` and `srcset` image element properties.
PR Close#47082
This commit updates the image loader tests to avoid creating the TestBed environment, since it's not really needed for the tests. Instead, the loader functions are invoked directly and the output is verified.
PR Close#47082
This commit modifies the provideImgixLoader function to support
an additional ensurePreconnect option. Other loaders could follow
the same pattern to support a similar option as well.
As more loaders get developed we will refactor code to streamline
the loader authoring and enforce consistency.
PR Close#47082
This is a small refactoring to extract the LCP image observer to a separate file, similar to the preconnect link checker class location.
PR Close#47082
This commit adds an extra logic to add an ability to exclude origins from preconnect checks in NgOptimizedImage by configuring the `PRECONNECT_CHECK_BLOCKLIST` multi-provider.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to add a logic to detect whether an image, marked with the "priority" attribute has a corresponding `<link rel="preconnect">` tag in the `document.head` for better performance.
PR Close#47082
This commit adds a built-in Imgix loader for the
NgOptimizedImage directive. If you provide the
desired Imgix hostname, an ImageLoader will be
generated with the correct options.
Usage looks like this:
```ts
providers: [
provideImgixLoader('https://some.imgix.net')
]
```
It sets the "auto=format" flag by default, which
ensures that the smallest image format supported
by the browser is served.
This change also moves the IMAGE_LOADER, ImageLoader,
and ImageLoaderConfig into a new directory that will
be shared by all built-in image loaders.
PR Close#47082
This commit updates the error codes used in the `NgOptimizedImage` tests. The error codes got u[dated recently in a PR that got merged earlier.
PR Close#47082
This commit adds a `rawSrcset` attribute as a replacement for the
`srcset` attribute. The `srcset` attribute cannot be set statically
on the image directive because it would cause images to start
downloading before the "loading" attribute could be set to "lazy".
Changing the name to `rawSrcset` allows the directive to control
the timing of image loading. It also makes it possible to support
custom loaders for `srcset` file names. Rather than having to repeat
the image origin for each image, the existing `rawSrc` value and
image loader can be composed to generate each full URL string. The
developer must only provide the necessary widths for the `srcset`.
For example, the developer might write:
```markup
<img rawSrc="hermes.jpg" rawSrcset="100w, 200w" ... />
```
with a loader like:
```js
const loader = (config) => `path/${config.src}?w=${config.width}`;
```
and the img tag will ultimately be set up as something like:
```markup
<img src="path/hermes.jpg?w=100" srcset="path/hermes.jpg?w=100 100w, path/hermes.jpg?w=200 200w" .../>
```
PR Close#47082
Currently if you use a static `srcset` with the image directive,
lazy loading no longer works because the image would start to
load before the loading attribute could be set to "lazy". This
commit throws an error if you try to use `srcset` this way.
In a follow-up commit, a new attribute will be added to support
responsive images in a lazy-loading-friendly way.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to drop the `standalone` flag and create a new NgModule which declares and exports it, so that the directive can be used in apps that use pre-v14 version of Angular.
PR Close#47082
This commit enables publishing of snapshots for the `image-directive`
feature branch. The artifacts can be accessed with the following steps:
1. Land your change in `image-directive`
2. Go to the corresponding snapshot repo (e.g. `angular/common-builds`)
3. Go to the `image-directive` branch
4. Copy the SHA of the latest commit in that branch
5. Use that SHA to install via NPM. e.g.
`https://github.com/angular/common-builds.git#SHA`.
PR Close#47082
The CI failed to run on the last PR, so we didn't catch
that there were web tests failing due to absolute/relative
URL issues. This commit should fix the issue.
PR Close#47082
Previously NgOptimizedImage would default to requesting
an image at the width matching the width attribute in
the image HTML. While this works for width attrs that
match the intrinsic size of the image (e.g. responsive
images or images sized with CSS), this can be a sharp
edge for developers who use the width/height attributes
to set rendered size (i.e. instead of CSS, which one can
do for a fixed size image). In this case, defaulting to
the width attribute for the requested image would mean
requesting always at 1x quality, so screens with a DPR
of 2+ get an image that is too small. Without a default
request width, the image served by the CDN would likely
be at intrinsic size, so 2x images would look correct.
This PR also updates the NgOptimizedImage sandbox and tests.
PR Close#47082
This commit optimizes the logic that monitors whether a give image is an LCP element. If an image has the `priority` attribute set, there is no need to include it into monitoring. Also, if we already warned about a particular image (via a `console.warn`) - there is no need to warn again later (to avoid spamming a console).
PR Close#47082
This commit adds e2e tests for the LCP check logic. Those tests are needed to verify the behavior in a real browser (vs relying on a Node environment).
PR Close#47082
This commit adds extra logic into the `NgOptimizedImage` experimental directive to detect an LCP image and assert whether the `priority` attribute is applied.
PR Close#47082
This commit adds the necessary e2e testing infrastructure to the `NgOptimizedImage` test app, so that the test coverage can be extended and extra scenarios can be tested in a browser.
PR Close#47082
Currently, the logic that sets the `src` on the host `<img>` element is located in the `ngOnChanges` lifecycle hook and guarded by the dev-mode checks that the inputs do not change. However, those checks would be tree-shaken in prod mode and the `src` would be set each time the `ngOnChanges` hook is invoked. This is undesirable and may potentially lead to performance issues.
This commit moves the `src`-related logic to the `ngOnInit` hook instead, which would have the same effect (executed only once, after all inputs are set) and would behave consistently in dev and prod modes.
PR Close#47082
This commit updates the `NgOptimizeImage` directive to add asserts to make sure the `width` and `height` inputs are set and have correct values (numbers only).
PR Close#47082
This commit updates the `NgOptimizedImage` directive as standalone, so it's easier to import it in
an app (without importing any NgModules). The `NgOptimizedImageModule` is removed as no longer needed.
PR Close#47082
This commit updates the `NgOptimizedImage` directive to drop the `loader` input. Component-specific loaders can still be configured via `IMAGE_LOADER` token and the `loader` input was only useful in case different loaders have to be present in a single template, which doesn't seem to be a common case. We'll be able to re-introduce the input later if needed.
PR Close#47082
We want it to be clear what benefits the image directive
confers over a normal <img> tag, and the `NgImage` name
didn't provide much information. `NgOptimizedImage` makes
it obvious that the new directive is intended to improve
performance.
PR Close#47082
This commit exports experimental `NgImage` directive via a private API of the `@angular/common` package, so that it can be used acorss other Angular packages for testing purposes.
PR Close#47082
Adds support for TypeScript 4.8 and resolves some issues that came up as a result of the update.
Most of the issues came from some changes in TypeScript where the `decorators` and `modifiers` properties were removed from most node types, and were combined into a single `modifiers` array. Since we need to continue supporting TS 4.6 and 4.7 until v15, I ended up creating a new `ngtsc/ts_compatibility` directory to make it easier to reuse the new backwards-compatible code.
PR Close#47038
This commit creates and exposes the APIs required to use the Angular Router without importing `RouterModule`.
The newly added APIs are tree-shakable and you can add features using special functions rather than using `ExtraOptions` to control the providers via an internal switch in Router code.
```
const appRoutes: Routes = [];
bootstrapApplication(AppComponent,
{
providers: [
provideRouter(appRoutes,
withDebugTracing(), // enables debug tracing feature
withInMemoryScrolling() // enables scrolling feature
]
}
);
```
This "features" pattern allows for router behavior to evolve in a backwards compatible and tree-shakable way in the future. This approach also makes features more discoverable.
The newly added APIs can be used in any application today (doesn't require an application to be bootstrapped using standalone-based APIs).
Note: APIs added in this commit are released in the "Developer Preview" mode, read more about this mode in Angular docs: https://angular.io/guide/releases#developer-preview
PR Close#47010
Add wider typings to setter of preserveFragment, skipLocationChange and replaceUrl inputs of routerLink directives and coerce them to boolean
PR Close#47101
createEmbeddedView method instantiates an embedded view based on this template and take your templateRef as argument and would render the passed templateRef in your ViewContainerRef.
resolves angular#46955
PR Close#46957
Addresses https://github.com/angular/angular/issues/47059
I try to keep the edit as concise as possible because adding any further
explanation would bring to much deeper info compared to the topic of the
page
Removed some convoluted info and replaced with a link to a page that
should focus on the specific aspect of the matter.
Conditional is obliged because IMHO that page should have a dedicated
paragraph explaining various ways of populating different injectors with
providers, and maybe integrating the interesting parts from the recent
created page about standalone app.
PR Close#47094
Some versions of rxjs cause the algorithm used in the Router to not recognize Route configs correctly.
This commit updates the algorithm to be compatible in the same way as other code locations internally.
Context:
https://github.com/angular/angular/commit/1160b8194f78141b40d1d4885ec182d033ff2659fixes#47089
Note: This does not have a test because I was unable to identify the
version of rxjs that would cause a failure here.
PR Close#47098
This brings the typing of ngStyle into parity with ngClass since commit
e2ab99b95e. Should help with some strict template checking edge cases.
PR Close#47069
Adds suggestions for how to resolve the most common messages produced by the documentation linter.
Adds links to the Proselint and other style tests to the new documentation.
Updates pullapprove and navigation.
PR Close#47019
Users using the "disabled" property binding on reactive form controls would want to know how to dynamically update the disabled state of a form control when they get a console warning.
PR Close#47041
We used to track all modules in a top-level constant called `autoRegisterModuleById` which was used by `getRegisteredNgModuleType`. As of #45024 the constant isn't being used anymore so we can remove it.
PR Close#47066
Yarn 1.x. is known to not prune nested unused node modules. This throws
off Bazel when the dependency tree changes but there are leftover unused
nested node module folders. This causes CI failures currently after the
dependency tree updates.
Invalidating the cache fixes this issue. Long-term a switch to Yarn
2.x+, pnpm will fix this.
PR Close#46707
The current Router APIs require guards/resolvers to be present in the DI tree. This is because we want to treat all guards/resolvers equally and some may require dependencies. This requirement results in quite a lot of boilerplate for guards. Here are two examples:
```
const MY_GUARD = new InjectionToken<any>('my_guard');
…
providers: {provide: MY_GUARD, useValue: () => window.someGlobalState}
…
const route = {path: 'somePath', canActivate: [MY_GUARD]}
```
```
@Injectable({providedIn: 'root'})
export class MyGuardWithDependency {
constructor(private myDep: MyDependency) {}
canActivate() {
return myDep.canActivate();
}
}
…
const route = {path: 'somePath', canActivate: [MyGuardWithDependency]}
```
Notice that even when we want to write a simple guard that has no dependencies as in the first example, we still have to write either an InjectionToken or an Injectable class.
With this commit router guards and resolvers can be plain old functions.
For example:
```
const route = {path: 'somePath', component: EditCmp, canDeactivate: [(component: EditCmp) => !component.hasUnsavedChanges]}
```
Additionally, these functions can still use Angular DI with `inject` from `@angular/core`.
```
const route = {path: 'somePath', canActivate: [() => inject(MyDependency).canActivate()]}
```
PR Close#46684
Refactored the DI section to improve doc quality, reduce cognitive load and drive consistency.
- Added an overview with prerequisites and doc cards that point to rest of the DI content
- Added introduction topic with topic purpose, value proposition and "fail fast"
- Broke apart complex concepts into simpler tasks
- Unified tone and language for each topic
- Added new content based on SME feedback
- Deleted obsolete content
PR Close#44466
The `RootContext` implementation contained a number of fields that were needed to support an experimental `renderComponent` function. The `renderComponent` function was removed, which allows us to cleanup the `RootContext` further.
The only field that remains on the `RootContext` is the list of bootstrapped components. This list is presumably mostly unused right now (it just contains the current component) and further refactoring can happen in a followup PR.
PR Close#46806
This commit updates the `renderModule` and `renderApplication` functions to also accept a document reference (in addition to the serialized document contents as a string). This should provide the necessary flexibility to NgUniversal (and other API consumers) to structure the logic to avoid serializing and parsing document multiple times during the SSR request.
PR Close#47032
Since Renovate runs from the project directory, it cannot find the
`sync-deps` yarn script inside `aio/tools/examples/shared/`:
[example failure][1]
Update the post-upgrade task command to run inside that directory
instead of the project root.
[1]: https://github.com/angular/angular/pull/46707#issuecomment-1203335639
PR Close#47040
Temporary patch until
https://github.com/bazelbuild/rules_nodejs/pull/3517 is available in
another `rules_nodejs` release.
We can remove this patch, but for now it doesn't hurt. On the external
side the tsickle code path is not hit at all anyway, but we need to
satisfy the TypeScript checker.
PR Close#47018
Updates the tsickle version in the repository and accounts for its changes in
the `compiler-cli` package. Tsickle made a breaking change in the minor version
segment bump that would break the use with `@angular/compiler-cli`
Additionally the tsickle version for `@angular/bazel` is updated since
we updated `@bazel/typescript` to also account for the breaking changes.
See: https://github.com/bazelbuild/rules_nodejs/commit/78a05281075c50ee31658bc48dd852e35b973496
PR Close#47018
This update includes:
* installation directions for the current version of the Vale VSCode extension (v. 0.15.0)
* a workaround for if the current version of the extension doesn't work.
PR Close#47031
This commit updates docs extraction logic to avoid requiring the `@ngModule` tag on standalone types, since they don't have to be present in any NgModule.
PR Close#47024
All docs examples share the same `node_modules/` (symlinked into each
example from `aio/tools/examples/shared/node_modules/`). However, each
example type has a different `package.json`, which comes from
`aio/tools/examples/shared/boilerplate/*`). In order to ensure that the
dependencies in each example's `package.json` are the same as the ones
in the symlinked `node_modules/` (i.e. the ones that CI tests are run
with), we have a script (`yarn run sync-deps`) that can sync
dependencies from `shared/package.json` into the boilerplate
`package.json` files.
Previously, this script had to be run manually, which was easy to
forget/not know about and resulted in the boilerplate dependencies
often being out-of-sync with the ones in `shared/package.json` (and by
extension, the ones that were actually installed in `node_modules/`).
This commit helps keep the boilerplate dependencies up-to-date in the
following ways:
- Adds the `sync-deps` script to the `postinstall` scripts.
This ensures that dependencies remain in sync whenever someone
manually updates dependencies in `shared/package.json`.
- Runs the `sync-deps` script as a Renovate post-upgrade task.
This ensures that the depenencies remain in sync whenever Renovate
updates dependencies in `shared/package.json`.
For more info on configuring post-upgrade tasks in Renovate, see:
- [postUpgradeTasks][1]
- [allowedPostUpgradeCommands][2]
- [allowPostUpgradeCommandTemplating][3]
NOTE:
For the Renovate change to take effect, the [global config][4] in
`angular/dev-infra` also needs to be updated. This will be done in a
separate PR.
[1]: https://docs.renovatebot.com/configuration-options/#postupgradetasks
[2]: https://docs.renovatebot.com/self-hosted-configuration/#allowedpostupgradecommands
[3]: https://docs.renovatebot.com/self-hosted-configuration/#allowpostupgradecommandtemplating
[4]: https://github.com/angular/dev-infra/blob/22d3067021130271afcfd02d063828c5bdd9c2d7/.github/ng-renovate/runner-config.js
PR Close#47009
In Angular 14, we introduced the `loadComponent` API for a `Route` to
allow lazy loading of a routed component in addition to the existing
`loadChildren` which allows lazy loading of child routes. As a result,
the `preload` method of the `PreloadingStrategy` needs to sometimes be
called even when there is a `canLoad` guard on the `Route`. `CanLoad`
guards block loading of child routes but _do not_ block loading of the
component.
This change updates the conditional checks in the internal preloader to
skip calling the `PreloadingStrategy.preload` when there is only a
`loadChildren` callback with a `canLoad` guard an no `loadComponent`.
In this case, the callback passed to the `preload` method is already
effectively a no-op so it's not necessary to call it at all.
resolves#47003
PR Close#47007
The dev-infra build tooling is now decoupled from `ng-dev`. This will
make it easier to update `ng-dev` without necessarily needing to upgrade
the whole build system, Bazel etc. This is useful when e.g. new release
tool features have been added and should also be ported to active LTS
branches.
PR Close#46976
When using the Angular Router, one of `APP_BASE_HREF` or a `<base>` in
the header must be provided. When _not_ using the `RouterModule`,
injecting the `LocationStrategy` will result in the
`PathLocationStrategy` being provided with a default value used in place
of `APP_BASE_HREF` that is `document?.location?.origin ?? ''`.
It can be quite surprising and annoying that once you add `RouterModule`
to the application, suddenly the `APP_BASE_HREF` must be specifically
provide something new when it could use a sensible default instead.
The current behavior (before this commit) is as follows:
* When `RouterModule` is not provided (or the dev doesn't specifically provide
`PathLocationStrategy`): use `DOCUMENT.location?.origin ?? ''`.
Note that the base href in the dom and `APP_BASE_HREF` are not used.
* When `RouterModule` _is_ provided:
1. APP_BASE_HREF if defined
2. Get base href from DOM
3. throw if neither of the two above are defined
This commit updates this behavior to be aligned regardless of `RouterModule`
usage. The order (by default) is now:
1. Developer provided `APP_BASE_HREF`
2. base href from the DOM
3. `location.origin`
4. If none of the above exist, use `''`
This is slightly different than the behavior before. However, I believe
it is more appropriate. For the case without `RouterModule`, it would
likely be surprising that `APP_BASE_HREF` and the base href from the DOM
are ignored by default. For the case with `RouterModule`, we now have a
more sensible fallback/default when neither `APP_BASE_HREF` nor `<base>`
are defined (instead of just throwing an error).
PR Close#46929
With strict template type checking, a null/undefined value will raise an
error. However the implementation is completely fine with it, and it
would be pointless to "fix" it at the callsite and convert to e.g. an
empty string. Allow all of the "supported types" to be passed in
directly to ngClass.
Fixes#39280
PR Close#46906
This commit adds the `defaultUrlMatcher` from the Router to the public
API. `UrlMatcher` and `UrlMatchResult` are already in the public api so
the signature of the function as well as the return value are already
exposed. Any change to those or the implementation of `defaultUrlMatcher`
would already be breaking so there's no additional risk in exposing the
default matcher.
This function can be useful for developers who want to create a custom
matcher which builds on the default matcher of the Router. Currently,
the only way to do this would be to copy-paste the implementation.
fixes#35928
PR Close#46913
Pull request #46672 added some debugging code to trace down the
root cause of its bug, but parts of the debugging code has never
been cleaned up and ended up landing as part of the PR.
This commit removes the code as it might cause unexpected issues.
Likely when e.g. `Error` is patched and would perform XHRs in testing,
unveiling e.g. CORS issues. See #46989.
PR Close#46989
Since the `init` parameter has a default value of `{}`, it can never be
`!== undefined`. Thus, it is not necessary to account for that case.
PR Close#46912
Implement a new `notificationclick` action, `sendRequest`, which sends a
GET request to the specified URL, without opening a new window. This can
be useful for hitting an API endpoint.
PR Close#46912
In #41106, code was added in angular.io to print info that would help us
investigate and debug a ServiceWorker issue (#28114). Since the fix for
the issue was deployed on October 6th, 2021, the related error rate has
dropped dramatically:
Additionally, there have been no known occurrences or reports of the
issue in the last several months.
The remaining occurrences could be attributed to older versions still
being around on people's devices (due to the ServiceWorker caching) and
other circumstances not related to the ServiceWorker, for which there is
not much we can do. For example, a user could keep a tab open with an
older version of the app, which requests hashed files that no longer
exist on the server. If the ServiceWorker is not activated on such a tab
(either because the browser does not support it or because the user has
disabled it, for example), then it is expected that these requests would
fail.
This commit removes the code that prints ServiceWorker-related debug
info to reduce the payload size of the app.
Fixes#41117
PR Close#46987
Fix typo [missing plural marker "element_s_"] on https://angular.io/guide/structural-directives.
Original:
>Structural directives are directives which change the DOM layout by adding and removing DOM element.
Fix:
>Structural directives are directives which change the DOM layout by adding and removing DOM element**s**.
PR Close#46961
Add the configuration and style files to support documentation linting. The `README.md` file includes instructions for installation and use of the lint tool.
PR Close#46897
This commit adds the `isEmpty` method to the `TransferState` class to make it possible to check whether the state is empty or not. This is helpful in situations when the `TransferState` should be serialized and the content is transferred to the client (if the state is empty - certain operations can be omitted).
PR Close#46915
This updates the internal use of INITIAL_NAVIGATION to do two things:
1. Explicitly provide `Enabled` as the default for the token factory
2. Use an enum instead of a string to reduce bundle size
PR Close#46925
This commit updates the code to include the TransferState providers (used for serialization) into the `ServerModule` instead of having the need to import the `ServerTransferStateModule` separately.
The list of providers in the `ServerTransferStateModule` is now empty and importing it is a noop. This is not a breaking change, since the `ServerModule` must be included anyways to make server rendering work correctly.
PR Close#46899
Similarly to what has been done in #46846 for the extended diagnostics about missing control flow directive that was only mentioning that the `CommonModule` should be imported, this commit improves the validation done by the JiT compiler.
Now that the control flow directives are available as standalone, the message mentions that directive itself can be imported.
The message now also mentions which import should be used for the directive (as it can be tricky to figure out that `NgForOf` is the directive corresponding to `*ngFor`).
PR Close#46903
This commit updates the `TransferState` to make it `providedIn: 'root'`. This makes the entire `BrowserTransferStateModule` module unnecessary, so it got deprecated as well.
The `ServerTransferStateModule` is still retained, but the `renderApplication` function now also includes the necessary tokens to serialize the `TransferState` automatically, so when using the `renderApplication` function, there is no need to include `ServerTransferStateModule` as well.
This change is a part of the ongoing efforts to update the shape of the FW APIs to make them standalone-friendly (so there is no need to import any NgModules).
PR Close#46879
improve the error message for non-standalone components which are not
exported from their module, and that are also imported directly as if
they were standalone
this change simply adds the suggestion to the developer to import the
ngModule instead
resolves#46004
PR Close#46114
This commit refactors the `NgModuleRef` implementation to drop functions required by the `EnvironmentInjector` interface. Previously the idea was that the `NgModuleRef` can act as an Injector to facilitate easier transition to standalone. However, from the mental model perspective, the `NgModuleRef` has the `injector` field, which is the correct injector reference and can be used is needed as an `EnvironmentInjector`.
PR Close#46896
* Adds a short note about how service workers report request timeouts
* Updated heading levels to present a clearer hierarchy and cleaner local TOC
* Removed documentation lint errors
* Moves the service worker service timeout paragraph to a more logical topic in service-worker-devops
* Removes line error from the more logical topic.
* address feedback from PR review comments
fixes#46445
PR Close#46882
The source map tests rely on asynchronous logic from the `source-map`
package. The tests itself are written using `fakeAsync` but this
unnecessarily complicates the interaction with the asynchronous
source-map helpers/package.
To fix this, we just make the tests use async/await as we don't intend
to test fakeAsync in this `describe` block..
PR Close#46888
The sourcemap test in the e2e playground is now using async/await code.
This results in errors now with the Bazel TS compilation because it
detects that `expect` is returning a promise and should be awaited.
This happens due to the jasminewd2 types. We should just use the actual
jasmine types and not rely on the deprecated selenium control flow,
using explicit async/await in the whole test. This also solves the issue
with the source-map types being async/await now.
PR Close#46888
The source-map package now requires the
`SourceMapConsumer`/`SourceMapGenerator` classes to be instantiated
asynchronously. This commit updates our tests to account for that.
PR Close#46888
The source-map package is no longer explicitly used in the
`compiler-cli` package and therefore can be removed from the ESBuild
bundling, denoting it as external. This should be a noop.
PR Close#46888
The source-map package is updated as part #46707, but the minor
version bump introduced breaking changes. This commit extracts the
update so that we can handle it separately accounting for the breaking
changes. Also removing the caret since this package apparently makes
breaking changes in minor segment bumps.
PR Close#46888
The implementation of the `DefaultTitleStrategy` was modeled after the
existing strategy patterns in the Router. These patterns were developed
before the `providedIn` syntax for injectables. We can simplify the
model a lot by providing the default in the factory of the abstract
class.
Note that the other strategy patterns aren't touched in this PR due to
how long they've existed. Because they have been there for such a long
time, it's possible there will need to be some adjustments to code
if/when they are refactored to do the same.
PR Close#46876
style values get added to the `_globalTimelineStyles` map in order to keep
them so that they can be used across different timelines
`_globalTimelineStyles` was previously a plain object but has been
refactored to a map in #44482, as part of the update a check has been
changed from a ternary operation to an or (||), causing falsy values (as 0)
not to be added to the map anymore, apply the nullish coalescing operator (??)
instead to make sure only `undefined` and `null` are filtered out
also since this aspect was clearly not covered by tests, add a new test
to ensure that such regression doesn't happen in the future
resolves#46833
PR Close#46863
The extended diagnostics about missing control flow directive was only mentioning that the `CommonModule` should be imported.
Now that the control flow directives are available as standalone, the message mentions that directive itself can be imported.
The message now also mentions which import should be used for the directive (as it can be tricky to figure out that `NgForOf` is the directive corresponding to `*ngFor`).
PR Close#46846
The `createApplication` function makes it possible to create an
application instance (represented by the `ApplicationRef`)
without bootstrapping any components. It is useful in the
situations where ones wants to decouple and delay components
rendering and / or render multiple root components in one
application. Angular elements can use this API to create
custom element types with an environment linked to a
created application.
PR Close#46475
There are some ZoneJS tests that fork the zone from the `describe` block
for testing the zone patching. This does cause the Jasmine `done`
function later in `it` specs to be invoked in the sync-test zone from
the original `describe` block. The `done` implementation now has
changed with the Karma Jasmine update and breaks because it now causes
tasks to be scheduled.
It is conceptually incorrect/invalid to take the describe sync zone and
run test logic with that sync zone.
```
An error was thrown in afterAll
error properties: Object({ originalStack: 'Error: Cannot call jasmine.execute().forceTask from within a sync test (syncTestZone for jasmine.describe#FileReader).
at new ZoneAwareError (packages/zone.js/test/browser_test_rollup.umd.js:98:37)
at e.onScheduleTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:158:196)
at e.scheduleTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:14:7529)
at t.scheduleTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:14:3539)
at t.scheduleMicroTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:14:3791)
at r.execute (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:166:4312)
at queueRunnerFa ...
at <Jasmine>
```
As mentioned in the previous commit that ensured that the Zone name is
included in errors raised by the `SyncTestZoneSpec`, we can now include
the Jasmine describe block descriptions in such errors.
Errors can often happen when users accidentally try to set up Angular
tests without an `it` block. Resulting in errors where it's not clear
at all which describe block (of potentially a large repository) is
involved:
```
An error was thrown in afterAll
error properties: Object({ originalStack: 'Error: Cannot call XX from within a sync test.
at new ZoneAwareError (packages/zone.js/test/browser_test_rollup.umd.js:98:37)
at e.onScheduleTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:158:196)
at e.scheduleTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:14:7529)
at t.scheduleTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:14:3539)
at t.scheduleMicroTask (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:14:3791)
at r.execute (packages/zone.js/bundles/zone-testing-bundle.umd.min.js:166:4372)
at queueRunnerFa ...
at <Jasmine>
```
We now include the describe block description in the error, so that it
is easier to figure out the location of the culprit code.
The sync-test zone is used in e.g. `describe` to raise an error when
there is asynchronous code scheduled in describe blocks. This commit
includes the zone name in such thrown errors to allow for us to include
the jasmine describe name in the error. This will be wired up in the
jasmine zonejs patches separately.
In the fake async test for `zone.js` there is some logic to test various
prefixes of the request animation frame functions. This logic does not
have any effect currently, except for generating the same test at
maximum three times.
This commit fixes the test to actually test what it meant to do
initially.
Karma jasmine updated the `jasmine-core` dependency. Jasmine is now more
strict when:
* The done callback is invoked multiple times
* The done callback is used, while a promise is also returned
* The done callback is treated as error when e.g. a number is returned
as first argument. This was the case with `requestAnimationFrame`.
Currently tests written using `waitForAsync` would be prone to Jasmine
warnings or errors (depending on the version) for tests incorrectly
invoking asynchronous jasmine `done` callbacks multiple times.
This can happen because the async test zone logic schedules the
`done` callback to be called using `setTimeout`, but this could
be invoked multiple times, causing multiple `done` invocations to
be scheduled. Most of the issues have been resolved with #45025,
but it does not solve the case of multiple tasks finished and callbacks
being scheduled.
Technically, the current logic is built in way that _should_ result in
`_finishCallbackIfDone` and eventually the `done` callback to be invoked
at maximium once. This is unfortunately not the case in some rather
advanced/unexpected scenarios (like our AngularJS upgrade tests) where
the scenario is the following (and microtasks from before the actual
`waitForAsync` spec are still completing -- which is valid):
```
1. A test `beforeEach` schedules a microtask in the ProxyZone.
2. An actual empty `it` spec executes in the AsyncTestZone` (using e.g. `waitForAsync`).
3. The `onInvoke` invokes `_finishCallbackIfDone` because the spec runs synchronously.
4. We wait the scheduled timeout (see below) to account for unhandled promises.
5. The microtask from (1) finishes and `onHasTask` is invoked.
--> We register a second `_finishCallbackIfDone` even though we have scheduled a timeout.
--> we execute the `done` callback twice because the async zone spec state is "stable"
```
On MacOS, pressing the alt key and another key turns into symbols, and
doesn't match the intended behavior. For example, `keydown.alt.s`
reports instead as `keydown.alt.ß`. We rely on the `key` field and not
the `code` field, which properly reports the code for S in this case.
This change adds support to allow users to specify they want to look at
the `code` field instead of the `key` field within their event string.
Example: `keydown.code.alt.leftshift` would only match the LeftShift and
not the right shift based on code values. It would also allow the user
to specify `keydown.code.alt.keys` to match S instead of ß when alt /
option is pressed on MacOS and would also work on Windows.
Fixes#45992
PR Close#46030
convert the select for the docs versions into a proper navigation to
make it more clear for users and also to improve its accessibility
resolves#44339
PR Close#46674
The new `FormRecord` entity introduced in Angular v14 does not have its builder method.
This commit adds it, allowing to write:
```
const fb = new FormBuilder();
fb.record({ a: 'one' });
```
This works for both the `FormBuilder` and the `NonNullableFormBuilder`
PR Close#46485
The Router transition observable pipe keeps an outer reference to a `t`
variable for use in the `catchError` operator. However, this variable is
not updated with intermediate state. This commit fixes that so the
`catchError` can access properties that get updated in intermediate
states. Specifically, `RouterStateSnapshot` in the `NavigationError` for
now but could be more in the future.
PR Close#46842
This commit makes the router directives standalone and refactors some of
the Router injectables to be `providedIn: 'root'` along with factory
functions for initialization.
PR Close#46758
This commit refactors the code to move some functions around to avoid circular dependencies in TS imports. The newly added functions are now located in the `packages/core/src/render3/component.ts` file (instead of `packages/core/src/render3/component_ref.ts`), which is a better place for them anyway.
PR Close#46685
This commit introduces a new function that allows creating a object which exposes a number of getters to retrieve information about a given component.
Closes#44926.
PR Close#46685
This commit introduces a new function that allows creating a `ComponentRef` instance based on provided Component and a set of options. The function can be used to cover a number of use-cases where the `ComponentFactory` symbol was used previously.
Closes#45263.
PR Close#46685
Currently if the `ENVIRONMENT_INITIALIZER` token is not configured with `multi: true` flag, the code fails while trying to iterate over the value. This commit checks whether the `ENVIRONMENT_INITIALIZER` token value type is an array and throws a helpful error message.
PR Close#46829
The `Directive` and `Component` decorators support `inputs` and `outputs` fields which accept an array in the format of `"someInput"` or `"someInput: someAlias"`, however the parsing during JIT compilation was splitting on commas, not on colons, which resulted in incorrect parsing. E.g. `inputs: ["someInput: someAlias"]` was being parsed into `{"someInput: someAlias": "someInput: someAlias"}` instead of `{someInput: "someAlias"}`.
The feature was working by accident, because there's some logic further down in the compiler pipeline that was splitting the strings again.
PR Close#46813
This commit performs various refactoring of the TestBed code to better align interfaces and implementation. The implementation class is also renamed from `TestBedRender3` -> `TestBedImpl`, but the public API name has not changed.
Note: as a part of this change, the TestBed interface became more consistent and typings for multiple methods were updated to account for the fact that the TestBed reference is returned. This was always a runtime behavior of TestBed, which was not reflected in few places in type.
PR Close#46635
With the recent lock file maintenance, the `@types/angular` dependency
ended up being duplicated. This seems to happen because we locked our
type dependency, but other Angular deps like `angular-route` had a
looser dependency, resulting in e.g. `1.7` types and `1.8` types to be
loaded.
This ultimately ended up breaking TypeScript's auto-discovering
of types and broke some example compilations e.g.
```
app/app.animations.ts(3,3): error TS2339: Property 'animation' does not exist on type 'IModule'.
app/app.config.ts(5,45): error TS2694: Namespace 'angular' has no exported member 'route'.
app/phone-detail/phone-detail.component.ajs.ts(10,37): error TS2694: Namespace 'angular' has no exported member 'route'.
```
We fix this by loosening the type dependency ranges, updating all of
these. Also we update AngularJS itself to the final version.
PR Close#46819
The AIO payload size has been reduced with lock file maintenance which
resulted in updates of Angular framework and Angular devkit/CLI.
The same reduction is already visible in the `aio-local` job because
it was already using the latest FW packages (obviously -- given it being
from HEAD).
PR Close#46819
move the check for non-animatable properties from the animation building
phase to the application of the animation's transition instead, in such
a way we can check it against the keyframes of the transition's timeline
in order to only provide warnings for properties which are being
animated, thus not providing any warning for non-animatable properties
being applied to elements via the style function
this change has the benfit just mentioned above but it comes with two
drawbacks:
- the warning handling is not done in the building time so it is a bit
inconsistent with other type of validations (such as the unsupported css
properties one for example)
- before the warning was being applied only when the animation's data
was being parsed, so it happed only once but now since it is applied
when the animation is actually being prepared to be played, it happens
each time the animation runs
resolves#46602
PR Close#46666
After a bugfix in #46096, the compiler is now better capable of detecting pipes
which require an inline type constructor. However, there is an issue in how all
pipes are considered when verifying the inline type-ctor requirement: it should
only check actually used pipes.
Fixes#46747
PR Close#46807
The JS size-tracking logic has been moved into the dev-infra repository
and the rule has been updated to work better with Bazel labels. The
Starlark target is updated accordingly in this commit.
PR Close#46802
This commit adds the following functions to the public API:
- provideAnimations
- provideNoopAnimations
The goal of those functions is to return a set of providers required to setup animations in an application. The functions are useful when the `bootstrapApplication` function is used to bootstrap an app. The functions allow to avoid the need to import `BrowserAnimationsModule` and `BrowserNoopAnimationsModule` NgModules.
PR Close#46793
This commit adds an extended diagnostics check that is similar to the nullish
coalescing check, but targeting optional chains. If the receiver expression
of the optional chain is non-nullable, then the extended diagnostic can report
an error or warning that can be fixed by changing the optional chain into a
regular access.
Closes#44870
PR Close#46686
This commit adds the `createNgModuleRef` function alias to the public API. The alias is called `createNgModule`. The `createNgModule` name is more consistent with the rest of the API surface, where functions that return `*Ref`s don't include the `Ref` into the function name, for example: `createPlatform`, `ViewContainerRef.createComponent`, etc.
DEPRECATED:
The `createNgModuleRef` is deprecated in favor of newly added `createNgModule` one.
PR Close#46789
This script was used back when dev-infra code was part of
the Angular framework repository. The script is now unused
and can be deleted.
PR Close#46798
The jasmine seed generator is only used in a single karma configuration
file. Used by the legacy build and the Saucelabs/ZoneJS Karma jobs.
We should move the separate script code directly into the config to make
it clear that the seed generation is not used elsewhere, and to simplify
the Starlark code.
PR Close#46798
Most of the increase comes from code being moved from `index.html`
to the main bundle. A small increase comes from the additional `gtag.js`
loading logic, but other than that the size is effectively increased
due to the untracked code from `index.html` being moved into the
`main.js` bundle.
PR Close#46716
This is acceptable because `gtag.js` is also only loaded as part of the
service, similary `ga` is only registered in the service (so the
reporting was a noop if errors are thrown before -- no change here)
We can benefit from downleveling etc. and do not need to be careful
with the inline script in the `index.html`
PR Close#46716
We currently use Universal Analytics. This is deprecated in favor of
Google Analytics 4 and UA will stop processing hits in October 2023.
This change intends to prepare us for this migration, and to already
pre-populate our GA4 property (there is no way to migrate existing data
/properties into a GA4 property -- a new one needs to be created).
This will help us minimize the data gap so that we can:
* Continue to look at the UA property with the full time span until
October 2023
* Can start using the GA4 property long-term in the future, starting
with data even before Universal Analytics stops processing new data.
We need to keep the existing `analytics.js` setup. Initially we have
considered using `gtag.js` for both the UA and GA4 properties, as it
supports that, but that doesn't work with our strict trusted types
enforcement because it results in multiple `gtag.js` scripts (specific
versions for UA or GA4) that recreate the same trusted type policies.
This causes runtime errors and breaks the setup.
Instead, with continued use of `analytics.js` we have the benefit of
a good separation of trusted types + events and configuration. There is
some problematic with translation of Universal Analytics Events to GA4,
or the other way around (even though we don't use custom events
currenlty)
We also do not need to send page views for our GA4 property because GA4
with gtag supports this automatically (respecting the history state --
using the `Enhanced measurement events` setting in the UI).
For our UA legacy instance we continue to dispatch events manually. This
logic can be removed in the future.
More details can be found here:
https://docs.google.com/document/d/1aK8u4ZlXbqQ2wMqmgSX7Ces8iLgamC13oCoG6VeBruA/edit?usp=sharing&resourcekey=0-EVe-Rhnme3bj_pkz2RcOmw.
PR Close#46716
Remove or reframe references to the obsolete HeroListComponent component that was taken from an old version of the Tour of Heroes tutorial.
Incorporates review feedback.
Fix#44662
PR Close#46647
The integration test rule now always executes tests in a directory
outside of the execroot. This ensures a more hermetic test environment
on platforms without a sandbox, or when tests are run with `tags:
local`.
As part of this change, an issue with Yarn 1.x. and `nodejs_binary`
unveiled. Yarn 1.x. is resolved properly using the tool mapping but
when Yarn inside Yarn is invoked (e.g. using `package.json` scripts),
then the second nested Yarn invocation fails due to an unknown path.
This happens because Yarn in the original invocation creates another
directory in the `/tmp` directory and modifies the `PATH` so that
the same `yarn` can be invoked again. This makes sense conceptually
but breaks in our case because the Yarn Bash script put into the `/tmp`
directory tries to resolve our vendored Yarn script relatively (which
is the wrong spot here). It worked previously in the execroot because
`nodejs_binary` invoked Yarn through `<external>/../node.sh
<absolute-path-to-yarn-cjs-script>`, but outside the execroot it invoked
Yarn using a relative path (which then ended up being preserved in the
Yarn temporary directory).
We can fix this by updating the Bazel NodeJS repository which seems to
have coincidentally have a fix for the path resolution. See:
https://github.com/bazelbuild/rules_nodejs/pull/3493#event-6870301735.
PR Close#46778
Import `AsyncStackTaggingZoneSpec` if the user imported
`zone.js/plugins/async-stack-tagging` bundle. So the user can
use `console.trace` to output the `async task` information more
clearly.
PR Close#46693
Chrome has an experimental API to improve the debug experience of the
async tasks.
The details can be found here https://bugs.chromium.org/p/chromium/issues/detail?id=332624#c29
This commit add the `async stack tagging` support in the `zone.js`.
User can `import 'zone.js/plugins/async-stack-tagging';` to enable this
feature.
PR Close#46693
Before this commit, the `NavigationCancellationCode` would always be set
to `Redirect` when encountering a "navigationcancelingError". However,
this error can also be thrown when `CanLoad` guars reject. This commit
ensures these cancellation errors have a code as well so this mistake
cannot be made again.
PR Close#46752
The existing logic does something similar but in a more roundabout way.
It reads _the whole array_. If it encounters a pending value, it ignores
the remaining ones. If it hasn't encountered a pending value by the time
it hits false/UrlTree, it returns that result.
The new logic is the same, but reverses what we're looking for. Instead
of processing the whole array, we stop when we encounter an initial
value. When we encounter one that isn't `true`, that gets returned. If
we get to the end and everything was `true`, return `true`.
PR Close#46745
PR Close#46745
The existing logic does something similar but in a more roundabout way.
It reads _the whole array_. If it encounters a pending value, it ignores
the remaining ones. If it hasn't encountered a pending value by the time
it hits false/UrlTree, it returns that result.
The new logic is the same, but reverses what we're looking for. Instead
of processing the whole array, we stop when we encounter an initial
value. When we encounter one that isn't `true`, that gets returned. If
we get to the end and everything was `true`, return `true`.
PR Close#46745
This commit adds an extended diagnostic which warns when style suffixes such as '.px'
are used with attribute bindings (attr.width.px).
Fixes#36256
PR Close#46651
For the branch rename migration we temporarily had to work
from a forked-off branch. Now that all the migration and cleanup
Is complete, we can switch to the actual new main branch.
This is the last remaining cleanup in the organization as it seems.
PR Close#46743
This commit adds the target `RouterStateSnapshot` to the
`NavigationError` so error handlers/subscribers can more easily
determine which navigation failed, including the matched `Route` configs
for the navigation. This information was previously not available
(neither in `NavigationError` nor the `Router#getCurrentNavigation()`).
fixes#27626
PR Close#46731
Add a section regarding component view encapsulations in the complex animation
sequences guide to let developers know how animations work in regard to
view encapsulations.
This section is used to both add information to the guide but also to
take a stand on how the animations should behave in regard to the
shadow dom view encapsulation.
This relates to PR #46488 which by trying to make sure the query
function works with shadow dom elements proved that having the
animations implementation work with shadow dom would increase the
complexity of the code and would have a negative impact on performance,
such facts alongide the small adoption of shadow dom by users influenced
the decision to keep the current functionalities and simply discourage
the use of animations and shadow dom components.
PR Close#46738
This reverts commit b417370383.
The change applied is no longer appropriate since the use of animations
and shadow dom components is discouraged (as of #46738)
PR Close#46739
There are legitimate cases where access to an EnvironmentInjector
of a bootstrapped application is required / convenient. It will be also
required for support of standalone components with Angular elements.
PR Close#46665
In the case that a user accidentally forgot the let keyword, they dont get a very clear indicator of there being a problem.
They get an issue in the template iteration at runtime. This diagnostic will warn the user when the let keyword is missing.
PR Close#46683
`--project` is unwritten standard to provide the project name. With this change we allow the project name to be provided using the `--project` command line argument and remove the ambiguity with other schematics.
PR Close#46664
Removes the Renovate changes group as the respective code-owners. i.e.
dev-infra or docs-infra should be responsible for reviewing changes.
The caretaker does not necessarily have context when e.g. Jasmine
should be updated or not/ if this needs coordination with other parts
of the organization etc.
Also updates are not always trivial, see recent updates for Angular
(involing size updates, CLI commands fixups etc.) and e.g. Karma-Jasmine
requiring debugging of ZoneJS.
The Renovate group is also not easy to keep now that we use a custom
robot account that doesn't necessarily only do Renovate..
(we could check the branch name -- but I believe the group can just be
removed)
PR Close#46676
The commit body table by Renovate is sometimes not generated e.g. when
just dev-infra is being updated. In order to make our lint job happy
for such dev-infra updates, we should use an explicit message that is
at least 20 characters long.
PR Close#46676
We want to enable the Renovate dashboard to be able to trigger updates
which might be out of schedule, or to see if some updates are
stuck/pending, or to be able to rebase/try previously closed PRs.
PR Close#46695
`BootstrapOptions` is exposed through `PlatformRef#bootstrapModule` but
is not included in the public API so you cannot find it on angular.io.
This commit simply marks the interface as public API (as it should be).
PR Close#46679
This commit adds a stable cancelation code to the `NavigationCancel`
event. This code is acceptable for use in production whereas parsing the
`reason` string is not. This allows developers to determine more
specifically _why_ a navigation was canceled and perform different
actions in different scenarios.
PR Close#46675
This change adds the setInput method to the ComponentRef.
Previously users had to call `componentRef.instance['inputName']`
to change inputs of a dynamically created component. This had
several problems:
* OnPush components were not marked for check and thus very
difficult to test;
* input aliasing was not take into account - a property name
on a component could have been different from the actual input
name so setting input properties was fragile;
* manually setting input propertie would NOT trigger the
`NgOnChanges` lifecycle hook.
This modifications unifies `@Input` accross dynamically created
components and the ones referenced in templates. This also opens
doors to other changes: as an example router could use this new
method to set `@Input`s from router params.
Closes#12313Closes#22567
PR Close#46641
This custom error message for invalid guards requires a fair bit of
extra logic in several places. This change reduces special logic for an error
case that would fail anyways. Additionally, there were already a couple
places that _did not_ have this special error and we have not seen any
indication that there is more confusion for those (resolvers and canMatch).
PR Close#46678
`inject()` originated as a private API and was made public to support
`InjectionToken` factories in Ivy. For code-size and performance reasons,
when we code generate `inject()` calls we use a bit field to indicate the
various injection modes (optional, skip-self, etc). However, this doesn't
make for a very nice public API.
This commit introduces an alternative object-based API for options. All 4
flags are supported as `boolean` fields on an options object, and converted
to bit flags internally. If TypeScript can prove that `optional` injection
is not requested, it can narrow the return type and remove the `null` type.
DEPRECATED:
The bit field signature of `inject()` has been deprecated, in favor of the
new options object. Correspondingly, `InjectFlags` is deprecated as well.
Fixes#46251
PR Close#46649
The payload size has increased for AIO because we updated to the latest
Angular Framework, CLI and CDK/Material.
After size investigation, the size increase comes from the CDK update
where we now bring in the breakpoint observer class/logic into the
main bundle (it previously was part of a non-measured lazy chunk).
We now use the break point observer to detect high-contrast so it
ends up being loaded as part of the main bundle.
See:
https://github.com/angular/components/commit/bc81e7ddc56c093e83fefb4e80f8ebaa3c306a20.
PR Close#46642
The test apps are bundled using their production ESM JS output using
`esbuild`. ESBuild warns about any CJS usages, like `module.exports.`
```
INFO: From Bundling Javascript packages/core/test/bundling/todo_i18n/index.ts [esbuild]:
▲ [WARNING] The CommonJS "module" variable is treated as a global variable in an ECMAScript module and may not work as expected
bazel-out/k8-fastbuild/bin/packages/core/test/bundling/todo_i18n/index.mjs:494:0:
494 │ module.exports = {
╵ ~~~~~~
This file is considered to be an ECMAScript module because the file name ends in ".mjs".
```
Some bundling tests currently use `module.exports` to make
functions/symbols available to specs later requiring the bundle (in
order to run the bundle). Instead of using the CJS global here, the
logic can be attached consistently to `window` (there is currently a
mismatch of window vs. module.exports anyway..).
PR Close#46642
The `app_bundle` rule from the shared dev-infra package is no longer in
the benchmarking folder, but instead is part of the general Bazel rules
exposed by `dev-infra`. This commit accounts for this location change.
PR Close#46642
The Angular CLI has removed the JSON5 parsing and now always uses
`jsonc-parser`. Our test checks if JSON5 features can be parsed, but
this now breaks and the test needs to be adjusted.
We still want to keep the test to ensure we do not parse the Angular
CLI workspace file in a different way, not e.g. supporting jsonc.
PR Close#46642
The `ng-dev` tool no longer supports regular expressions for the labels.
This means that we now always require the merge ready label. It can be
used together with the `merge-assistance` label (both labels have been
commonly aplied anyway for our other filters).
The pullapprove label should not indicate merge assistance/a caretaker
note because it does not require additional action by the caretaker.
PR Close#46642
This commit introduces a new API on `EnvironmentInjector` to run a function
in the context of the injector. This makes `inject()` available within the
body of the function to inject dependencies. We expect this functionality to
be very useful for designing ergonomic APIs both in and out of Angular, as
it should allow for a smaller and more functional API style.
Note that it's possible to implement nearly identical functionality in user
code already today:
```typescript
function runInContext<T>(injector: EnvironmentInjector, fn: () => T): T {
const token = new InjectionToken<T>('TOKEN');
const tmpInjector = createEnvironmentInjector([
{provide: token, useFactory: () => fn()},
], injector);
return tmpInjector.get(token);
}
```
The factory provider for `token` in this example runs in the context of the
`tmpInjector`, giving it access to `inject` that can retrieve values from
`injector` as well. This is nearly identical, although because of the child
injector `self` and `skipSelf` injection options don't function correctly.
PR Close#46653
https://angular.io/guide/attribute-binding#attribute-class-and-style-bindings
Angular supports `attr.`, `style.`, and `class.` binding prefixes to
bind attributes, styles, and classes. If the key does not have the
binding syntax `[]` or the value does not have an interpolation `{{}}`,
the attribute will not be interpreted as a binding.
This diagnostic warns the user when the attributes listed above will not
be interpreted as bindings.
resolves#46137
PR Close#46161
We just renamed the Angular code of conduct repository default branch
to `main`. This repository was not part of the large migration and is
now handled separately as a little clean-up.
PR Close#46640
This commit removes the experimental `renderComponent` operation, which
implemented an alternative, lighter-weight bootstrapping option. This
experiment is being discontinued as the path towards it being a supported
production API was not clear. In particular, it lacked a clear roadmap for
supporting Angular's change detection, particularly when consuming existing
components.
PR Close#46605
This commit removes the `Renderer3` experiment which attempted to use the
real DOM API as Angular's renderer. As shown in the diff, having this
experiment around added real code complexity to Angular that could not be
removed by an optimizer.
Since we no longer feel this experiment is worth continuing, we're removing
the `Renderer3` concept and all supporting code.
PR Close#46605
Previously, when instantiating a component, Angular would look in the DI
hierarchy for `RendererFactory2`. Any DI tree which rolls up through an
application injector (that is, one created with `BrowserModule`) should be
able to provide this interface. If not found, Angular would switch to the
experimental `Renderer3` mechanism. This switch was designed this way,
because it allowed for the creation of experimental applications where
`RendererFactory2` was not included in the bundle at all.
In this commit, instead of automatically falling back on `Renderer3`-style
rendering, an error is raised instead if `RendererFactory2` is missing from
the DI hierarchy.
PR Close#46605
This commit migrates any remaining Angular tests which are using some form
of Renderer3 interfaces. Instead, they're switched to Renderer2.
PR Close#46605
Due to the restrictions of circular dependency checking, we need a separate
internal interface for a renderer. We cannot use `Renderer2` as a type
internally as even importing it as a type incurs a dependency on its
implementation, which creates a major potential for circular dependencies.
Previously this role was served by the `Renderer3` type. As we prepare to
remove the `Renderer3` abstraction (the idea of using `document` as a
differently-shaped renderer), this commit renames `ProceduralRenderer3` to
the more generic term `Renderer`.
`RendererFactory3` is also renamed to the more generic `RendererFactory` for
consistency.
PR Close#46605
Previously, if `initialNavigation` were set to `enabledBlocking`, the
Router's `APP_INITIALIZER` would never resolve if that initial
navigation failed. This results in the application load hanging and
never completing.
fixes#44355
PR Close#46026
Remove calls to enableRenderer3 in the functional unit tests.
This effectivelly cuts code paths going through the Renderer3
in the functional tests.
PR Close#46612
We recently changed our pullapprove config to work with hidden
directories. As part of that, we accidentally invalidated some
other pattern parameters due to inconsistency in Pullapprove.
e.g. contains any globs uses wcmatch, while `files.exclude` and
`files.include` uses `fnmatch`. The current fnmatch patterns are
actual wcmatch glob patterns and need to be adjusted for `fnmatch`.
As part of this fix (which ensures groups are more correct again),
this commit also cleans up some unused `file.exclude` in the `fw-common`
group (likely due to a copy-paste mistake).
PR Close#46589
We recently switched Renovate from upstream branches to operate in
forks. Given that change, the `ng-dev commit-message` lint now also
applies to the auto-created PRs. The default Renovate commits do not
have any body and fail our ng-dev commit message minimum lint.
Other repositories do not have this, but framework has, so we enable
a renovate option to append the update table to the commit message body.
This is actually also a good thing as it captures what is directly
merged. The PR description is not necessarily matching.
PR Close#46611
This commit cleans-up/removes a check we added before we supported CLDR
39. This check was necessary due to a incomplete/invalid list of locales
provided as part of the JSON data.
PR Close#46606
This commit removes 2 benchmarks which are using the `renderComponent` and
`Renderer3` abstractions, both of which are experimental and unsupported.
Equivalent benchmarks exist for the real rendering code path.
PR Close#46568
This commit removes an integration test for an application, built with the
CLI, that uses the `renderComponent` experimental bootstrapping function. An
equivalent test already exists for the regular bootstrapping code path. As
`renderComponent` is no longer supported, this test is redundant and can be
removed.
PR Close#46568
The ngcc integration test application doesn't actually run, but was coded to
use the experimental `renderComponent` bootstrapping function. This commit
switches it to use the regular, `@angular/platform-browser` based bootstrap
instead.
PR Close#46568
This commit converts the remaining bundling tests which were using
`renderComponent` to use regular bootstrapping instead.
Since `renderComponent` is synchronous and regular bootstrapping is not,
some test adjustments were necessary to wait for bootstrapping before test
assertions could run.
Additionally, debug servers were adjusted in some cases where they'd broken
(likely some time ago).
PR Close#46559
The deleted r3 versions of these tests had symbol tests, but their r2
equivalents did not. This commit adds symbol tests to the r2 variants.
PR Close#46559
In the previous commit, the r3-based hello_world and todo tests were deleted
in favor of the r2 versions. This commit renames the r2 versions to drop the
r2 suffix.
PR Close#46559
The `hello_world` and `todo` bundling tests use the experimental
`renderComponent` function (and `Renderer3`) as a result, and have
corresponding `Renderer2` equivalents. This commit removes these tests in
favor of the `Renderer2` versions, which will be renamed in a future commit.
PR Close#46559
This commit updates various tests to use TestBed instead of hand-written instructions, which makes tests easier to maintain and allows to perform further cleanup.
PR Close#46561
This commit updates the `ApplicationRef` logic to trigger the destroy operation when an underlying platform is destroyed. This is needed to make sure all teardown processing is completed correctly to avoid memory leaks.
Closes#46473.
PR Close#46497
This commit updates the directives presents in the `CommonModule` and annotates them with the `standalone: true` flag. With that flag, the directives can now be imported individually, as well as imported via the `CommonModule`.
PR Close#46469
There can be timing issues with removing an old outlet and creating a
new one to replace it. Before calling `onChildOutletDestroyed`, the
`RouterOutlet` will first check to ensure that it is still the one
registered for that outlet name.
Fixes#36711Fixes#32453
PR Close#46554
Replace `new Error()` in a forms Validators function with `RuntimeError`, for better tree-shakability. Also, improve the error messages, and add documentation.
PR Close#46537
The `Renderer3` abstraction in Angular was an experimental code path in Ivy
which uses direct DOM operations instead of the former `Renderer2` path. To
allow `Renderer2` to tree-shake away, `Renderer3` is the default _unless_
`Renderer2` is provided. It was only an experiment, and never meant to be a
production code path.
However, it's possible for `Renderer3` to leak into user code. This commit
prevents that possibility by causing the `Renderer3` path to throw, unless
an explicit function has been called to enable it.
PR Close#46530
This commits proposes two changes:
* Avoid Renovate from updating peer dependencies using the `@next` tag.
* Group Angular eslint packages to avoid spamming
* Avoid updating `package.json` files for the bazel integration tests.
Instead only the `WORKSPACE` files should be updated.
PR Close#46553
We have a file called `test-events.js` (named in an ambiguous way
anyway) that runs for all Karma web tests and configures ZoneJS to
not patch the `scroll` event. There are two issues:
1. The patch applies to all web tests. This could cause unexpected
issues.
2. The file is named ambiguously and also is placed at the project root,
in a wrong spot.
Additionally, the test doesn't even fail when the file is removed. This
commit applies the Zone config locally to the closest build target and
also reworks the test to actually ensure it's testing what it describes.
PR Close#46511
This commit updates a set of tests to avoid using hand-written instructions and replace them with TestBed APIs. Some tests were moved to the `acceptance` folder to colocate them with other renderer-related tests.
PR Close#46525
di_spec.ts was using handwritten definitions and the `renderComponent`-based
`ComponentFixture` (left over technical debt from the early days of Ivy.
This commit updates it to:
* remove unnecessary tests ("limp mode" DI, Renderer3, etc)
* convert other tests to use JIT-compiled classes and not handwritten defs
PR Close#46522
This commit finishes converting providers_spec.ts from `ComponentFixture`
and handwritten definitions to TestBed and JIT-compiled standalone
components.
PR Close#46527
This commit replaces usage of the internal `directiveInject` instruction
with the public `inject` function, as part of a larger cleanup of
providers_spec.ts.
PR Close#46527
This commit convers the providers_helper utility function
`expectProvidersScenario` to use the TestBed internally instead of
`ComponentFixture` and handwritten defs. This required several adjustments:
* Making the `ngModule`s passed in to the helper utility real NgModules.
* Using `ViewEncapsulation.None` for the test components (stabilizes the
generated HTML).
* Convert handwritten test components & directives into JIT-compiled
standalone equivalents.
PR Close#46527
Remove reference to camel case options and arguments as this is no longer valid in version 14.
Also, wrap required arguments with `<>` as this is correct syntax to differentiate between optional and required args.
PR Close#46505
Previously, the "Description" column of the CLI command overview section
was populated based on the CLI command docs' `description` property.
Since #45225, the short description of CLI commands is stored in the
`shortDescription` property.
This commit restores the content of the "Description" column by using
the correct property to populate it.
Fixes#46489
PR Close#46502
As there is little to no usage of RBE by individuals and we don't actively ensure
that the process and permissions are working for individuals the documentation is
best removed from the repo.
PR Close#46515
This commit increases the AIO payload size (related to styles). The increase is likely organic and the most recent commit (https://github.com/angular/angular/commit/f659dc8e532f17c9ac36420db7b75b4986b7b59a) just added a few extra bytes that pushed the size over the threshold, so there are no extra action items other than updating the golden file.
PR Close#46523
There are a couple of tests intentionally triggering and verifying
runtime errors thrown by `bootstrapApplication`. These errors are
also printed using the default `ErrorHandler`, while also being
re-thrown and caught/asserted by the test.
The error logging should be disabled as otherwise three tests will
pollute the test output with large amounts of text that make it
also seem like actual failing tests / something incorrect going on with
the jasmine environment.
PR Close#46510
redesign the aio contributors page so that it displays the contributors
details as a list instead of using flipping cards, this should improve
the usability of the page and especially its accessibility
resolves#44346
PR Close#46347
It looks like renovate does not send PRs for a couple of weeks now,
looking at the renovate dashboard there seem to be errors but the
logs cannot be viewed. Running the renovate config validation tool
locally indicates that schedules should be changed.
When we changed the schedules in
8d7351d939, the `@beejs/later` text
schedules have changed, but result in parse errors (also verified
locally by running the tool).
PR Close#46486
As part of the initial devtools migration (moving it into this repo with
Bazel), we copied some of the Bazel Karma debug config code since it was
not available from the shared dev-infra repo. We already switched to the
shared code that is now available, but were missing an now-unused file.
PR Close#46491
Currently, when importing `BrowserAnimationsModule`, Angular provides
`AnimationRendererFactory` as the `RendererFactory2`. The `AnimationRendererFactory`
relies on the `AnimationEngine`. The `AnimationEngine` may be created earlier than the
`ApplicationRef` (e.g. if it's requested within the `APP_INITIALIZER` before the `ApplicationRef`
is created). This means that Angular will add the `AnimationEngine` to `R3Injector.onDestroy`
before the `ApplicationRef`. The `R3Injector` will call `ngOnDestroy()` on the `AnimationEngine`
before the `ApplicationRef`, which means the `flush()` will be called earlier before views are destroyed.
PR Close#45108
PR Close#45143
This commit updates the pipes presents in the `CommonModule` and annotates them with the `standalone: true` flag. With that flag, the pipes can now be imported individually, as well as imported via the `CommonModule`.
PR Close#46401
when a component uses the shadowDom view encapsulation its children are
not rendered as normal HTML children of the element but they are
insterted in the element's shadowRoot, this causes the leave of the
element not to be normally propagated to the shadow child elements, fix
such issue
resolves#46450
PR Close#46459
We perform type-checking as part of a CI check already and shouldn't
do this when loading the `ng-dev` configuration. This would slow-down
some `ng-dev` commands which are used quite often.
PR Close#46476
`ts-node` spawns a custom node launcher script and has a brotli-base64
encoded configuration that will point to the user-provided entry-point.
This breaks child process forking as we wouldn't be able to specify our
custom build worker and basically `ng-dev` would run inside `ng-dev`
again.
PR Close#46456
This change separates the router initializer into different providers.
While it does not actually change the tree-shakeablity or the public
API, it does move us towards a world that _could_ do this. That is,
instead of `initialNavigation: 'disabled'`, users could use
`provideDisabledInitialNavigation` in the `bootstrapApplication` call
and none of the code for `initialNavigation: 'enabledBlocking'` would be
included in the application.
PR Close#46215
Extracting preloading to a provider moves us towards
thinking about a world where `ExtraOptions` doesn't exist to control
behaviors that are opt-in/opt-out. Instead, these behaviors could be
controlled by the presence (or lackthereof) of the providers which has
the functionality. This is relevant to a world in which we no longer
have the `RouterModule` but instead have something like `provideRouter`
where the features are tree-shakeable.
This change _does not_ make the `RouterPreloader` tree-shakeable inside
`RouterModule.forRoot` because the compiler cannot statically determine
whether it's needed. However, in the `provideRouter` world without
`forRoot`, preloading could be exposed through the provider function
instead, making the `RouterPreloader` and `PreloadingStrategy`
implementations tree-shakeable for those that don't use it (which is the
default - no preloading).
PR Close#46215
Extracting the scroller to a provider moves us towards
thinking about a world where `ExtraOptions` doesn't exist to control
behaviors that are opt-in/opt-out. Instead, these behaviors could be
controlled by the presence (or lackthereof) of the providers which has
the functionality. This is relevant to a world in which we no longer
have the `RouterModule` but instead have something like `provideRouter`
where the features are tree-shakeable.
This change does not affect the current `RouterModule.forRoot` behavior,
tree-shakeability of the option, or existence of the options related to
the router scroller (scrollPositionRestoriation, anchorScrolling,
scrollOffset).
PR Close#46215
Rather than using a `provideLocationStrategy` function, the `useHash`
can simply provide one strategy or another. The current factory function
does not change how the dependencies are used.
PR Close#46215
Extracting the `'enableTracing'` option to a provider moves us towards
thinking about a world where `ExtraOptions` doesn't exist to control
behaviors that are opt-in/opt-out. Instead, these behaviors could be
controlled by the presence (or lackthereof) of the providers which has
the functionality. This is relevant to a world in which we no longer
have the `RouterModule` but instead have something like `provideRouter`
where the features are tree-shakeable.
This change does not affect the current `RouterModule.forRoot` behavior,
tree-shakeability of the option, or existence of `enableTracing` on the
`ExtraOptions`.
PR Close#46215
Currently it's not possible to return plain `UrlTree` from `CanMatchFn`,
only wrapped `UrlTree` into Observable or Promise is allowed.
These changes allow to return `UrlTree` from `CanMatchFn`.
PR Close#46455
The native promise implementation logs unhandled promise rejections after `onFinally`
has been called. We may rely on the `scheduledByFinally` argument, which is `false` by
default, to avoid creating a breaking change; this will also allow us to reduce the number of
changes. The `finally` function should not silence unhandled promise rejections, because
they're not silenced in any implementation. If the `scheduleResolveOrReject` is called within
the `finally` we won't clear unhandled rejections. We'll keep the same behaviour if the
`scheduleResolveOrReject` is called within the `then`.
PR Close#43206
PR Close#45449
We need to switch the package builder to ESM or TS, like we did
in the components repo, but for now until we can, the release script
should work by loading the package builder CJS through the dynamic
import expression.
PR Close#46454
During JIT compilation of standalone components the compiler did not deduplicate
declarations in the imports array, unlike the AOT compiler. This may result in
runtime errors during directive matching, when the same component is found
multiple times resulting in NG0300, for example:
> NG0300: Multiple components match node with tagname mat-form-field: MatFormField and MatFormField.
This commit fixes the issue by deduplicating imports in the JIT compiler.
Relates to https://github.com/angular/angular/issues/46109#issuecomment-1160705031Closes#46109
PR Close#46439
in the animation players, make sure than upon reset the
_onStartFns and _onDoneFns are also re-applied so that
they can be called again after resetting the animation
also set the noop animation player's _finished to false
when the player resets (needed to make sure that the _onDoneFns
get called)
resolves#26630
PR Close#46364
tsec previously did not use runfiles on Windows even when the flag was enabled.
The latest version now adds an option to force its usage.
PR Close#46447
Fixes that the server renderer was producing an invalid `style` attribute when a null value is passed in. Also aligns the behavior with the DOM renderer by removing the attribute when it's empty.
Fixes#46385.
PR Close#46433
Prior to this commit, the TestBed logic erroneously tried to apply provider overrides to standalone pipes that were imported in an NgModule. This commit updates the logic to recognize types that may have a scope (an NgModule or a standalone component) and skip other types while applying provider overrides recursively.
PR Close#46407
Prior to standalone components, the `applyProviderOverridesToModule` method was used exclusively for NgModules. With standalone, its scope was expended to include standalone components as well. This commit renames the method to `applyProviderOverridesInScope` to better reflect this + also renames a field that refers to a set that contains already overridden types.
PR Close#46407
Replaces the copied `spec_bundle` rule in the devtools folder with the
one provided by dev-infra. Initially we couldn't use the rule because
it wasn't available / and also later didn't work with the linker
version from `compiler-cli` built from `HEAD`.
PR Close#46437
With the new ESM version of `ng-dev`, the TypeScript config loading
cannot happen automatically because `ts-node` cannot hook into the
Node ESM module resolution at runtime. To fix this `ng-dev` is now
loading a plain `.ng-dev/config.mjs` and the runtime just needs to be
configured accordingly, i.e. running `ng-dev` with `ts-node` so that
the ESM loader can be wired up before Node's runtime starts (using e.g.
`node --loader`).
PR Close#46437
We recently aggressively limited Renovate to only two days and set the
hourly limit to one. This resulted in e.g. Angular not being updated
for quite a while now, as well as missing out on e.g. dev-infra updates
which should happen as often as possible.
This commit reworks the config to (1) avoid legacy syntax and (2) to
update Angular-cross repo depsas often as possible. Also groups Bazel
dependencies better and attempts to fix the non-working Babel dep
grouping.
PR Close#46437
This commit adds a full example for the IfLoadedDirective and moves
the code to the StackBlitz playground for structural directives.
Fixes#40739, #37119
PR Close#46425
add a mat open_in_new icon to the blog external link present in the
left sidenav on smaller screens so that it can be distinguished from
the other (/internal) links
this is a continuation of #45876
PR Close#46384
The `CanMatchFn` is already exposed in the type signature for `canMatch` on the
`Route`. This function type should already be exposed as public API but was
missed in the initial implementation because the older guards use the `any` type
instead.
PR Close#46394
Once a `Route` matches via the `match` or `path` property, we need to
immediately create the injector for the route (if it has providers)
before running the `CanMatch` guards. This is necessary because the
`CanMatch` guards might be provided in the `Route` providers.
Fixes#46386
PR Close#46394
Previously, the `createEnvironmentInjector` function allowed creating an instance of an EnvironmentInjector without providing a parent injector. This resulted in an injector instance, which was detached from the DI tree, thus having limited value. This commit updates the types of the `createEnvironmentInjector` function to make the parent injector a required argument.
PR Close#46397
Simplifying the tree shakable error messages with the new format and removing the errorMessage variables
```ts
throw new RuntimeError(
RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
ngDevMode && 'Injector has already been destroyed.');
```
PR Close#46382
Align tree shakable error messages are simplified with the new format and errorMessage variables are removed.
```ts
throw new RuntimeError(
RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
ngDevMode && 'Injector has already been destroyed.');
```
PR Close#46370
add an open_in_new icon to the blog external link present in the
aio-top-menu so that it can be distinguished from the other (/internal)
links
resolves#38412
PR Close#45876
If the snapshot publish job is manually being restarted, the tag in the
snapshot repo might already exist and the job will fail. We can just
forcibly re-create the tag (even if it will be at the same revision).
We use force mode in a couple of other command as well, such as `git
push` of the actual tag and snapshot revision/SHA.
PR Close#46366
I have removed unnecessary code from the components & i initialize the
form in OnInit function (life cycle). I think initilization of forms and
getting data from service must be done inside ngOnInit.
PR Close#45527
Fix the order of logs that represent the output of the multicasting example, as the correct behavior is that all observers are notified of the final value before any of them is notified about completion.
PR Close#46127
In Bazel worker-land, workers which use incremental compilation must still
emit all declared outputs and cannot rely on these outputs persisting from
previous builds.
This commit adds a flag to `performCompilation` which can be used by the
worker infrastructure to instruct the compiler to always emit all possible
output files, regardless of any incremental build optimizations.
PR Close#46355
The `Observable` chain is currenlty the most straightforward way to
handle navigation cancellations where we ensure that the cancelled
navigation does not continue to be processed. Until we design and
implement an alternative way to accomplish equivalent functionality,
we need to maintain the `Observable` chain wherever we might execute
user code. One reason for this isthat user code may contain redirects so we do not
want to execute those redirects if the navigation was already cancelled.
PR Close#46021
Currently we have two main types of guards:
`CanLoad`: decides if we can load a module (used with lazy loading)
`CanActivate` and friends. It decides if we can activate/deactivate a route.
So we always decide where we want to navigate first ("recognize") and create a new router state snapshot. And only then we run guards to check if the navigation should be allowed.
This doesn't handle one very important use case where we want to decide where to navigate based on some data (e.g., who the user is).
I suggest to add a new guard that allows us to do that.
```
[
{path: 'home', component: AdminHomePage, canUse: [IsAdmin]},
{path: 'home', component: SimpleHomePage}
]
```
Here, navigating to '/home' will render `AdminHomePage` if the user is an admin and will render 'SimpleHomePage' otherwise. Note that the url will remain '/home'.
With the introduction of standalone components and new features in the Router such as `loadComponent`,
there's a case for deprecating `CanLoad` and replacing it with the `CanMatch` guard. There are a few reasons for this:
* One of the intentions of having separate providers on a Route is that lazy
loading should not be an architectural feature of an application. It's an
optimization you do for code size. That is, there should not be an architectural
feature in the router to specifically control whether to lazy load something or
not based on conditions such as authentication. This is a slight nuanced
difference between the proposed canUse guard: this guard would control whether
you can use the route at all and as a side-effect, whether we download the code.
`CanLoad` only specified whether the code should be downloaded so canUse is more powerful and more appropriate.
* The naming of `CanLoad` will be potentially misunderstood for the `loadComponent` feature.
Because it applies to `loadChildren`, it feels reasonable to think that it will
also apply to `loadComponent`. This isn’t the case: since we don't need
to load the component until right before activation, we defer the
loading until all guards/resolvers have run.
When considering the removal of `CanLoad` and replacing it with `CanMatch`, this
does inform another decision that needed to be made: whether it makes sense for
`CanMatch` guards to return a UrlTree or if they should be restricted to just boolean.
The original thought was that no, these new guards should not allow returning UrlTree
because that significantly expands the intent of the feature from simply
“can I use the route” to “can I use this route, and if not, should I redirect?”
I now believe it should allowed to return `UrlTree` for several reasons:
* For feature parity with `CanLoad`
* Because whether we allow it as a return value or not, developers will still be
able to trigger a redirect from the guards using the `Router.navigate` function.
* Inevitably, there will be developers who disagree with the philosophical decision
to disallow `UrlTree` and we don’t necessarily have a compelling reason to refuse this as a feature.
Relates to #16211 - `CanMatch` instead of `CanActivate` would prevent
blank screen. Additional work is required to close this issue. This can
be accomplished by making the initial navigation result trackable (including
the redirects).
Resolves#14515
Replaces #16416Resolves#34231Resolves#17145Resolves#12088
PR Close#46021
This commit adds an extended diagnostics check that verifies that all control flow directives (such as `ngIf`, `ngFor`) have the necessary directives imported in standalone components. Currently there is no diagnostics produced for such cases, which makes it harder to detect and find problems.
PR Close#46146
An inline type-check block is required when a reference to a component class
cannot be emitted from an ngtypecheck shim file, but the logic to detect this
situation did not consider the configured `rootDir`. When a `rootDir` is
configured the reference emitter does not allow generating an import outside
this directory, which meant that a shim file wouldn't be able to reference
the component class. Consequently, type-check block generation would fail
with a fatal error that is unaccounted for, as gathering diagnostics should
be non-fallible.
This commit fixes the problem by leveraging the existing `canReferenceType`
logic of the type-checking `Environment`, instead of the rudimentary check
whether the class is exported as top-level symbol (`checkIfClassIsExported`).
Instead, `canReferenceType` pre-flights the generation of an import using the
`ReferenceEmitter` to tell exactly whether it will succeed or not; thus taking
into account the `rootDirs` constraint as well.
Fixes#44999
PR Close#46096
When a Content Security Policy is defined that uses trusted-types in an application that uses lazy chunk files, ng
serve will be broken as angular#bundler entry needs to be added to
Content Security Policy.
Fixes#44647
PR Close#45450
In the example, @ContentChild is used in app.component.ts but the component we want to project content into is example-zippy.component.ts.
PR Close#45828
improve the accessibility of the aio-select component so that it is
clear for screen reader users its functionality (currently it is
presented as a simple button), following the WAI-ARIA authoring
practices (see: https://www.w3.org/TR/wai-aria-practices/#combobox)
A first attempt in improving the accessibility of the component has been
tried in PR #45937 by replacing it with the material select component,
such implementation has however been scrapped since the increase of
payload sizes has proven prohibitively large
(also note that given native select elements haven't been used given the lack
of syling options for such elements)
PR Close#46013
add proper aria-labels for the twitter and website link of contributors
(which being icons they have no text) so that they can be correctly read
by screenreaders
also add aria-labels to the view-bio buttons for a better user
experience
PR Close#46324
* beforePreactivation hook is unused
* The only place that uses afterPreactivation does not use the arguments
Not to say we won't want to provide hooks similar to this in the future,
but the current state is over-engineered for what it's being used for.
PR Close#46321
Saves us some bytes by not emitting `providers` in `defineInjector`. While the amount of bytes isn't huge, I think that this change is worthwhile, because `ng generate` currently generates `providers: []` with every `NgModule` which users can forget to remove.
PR Close#46301
The hero ID "11" does not correspond to any hero from the example mock heroes list described at https://angular.io/tutorial/toh-pt2#create-mock-heroes. ID 12 seems to be the more fitting ID to get the hero with name "Dr. Nice".
PR Close#46304
`ngComponentOutlet` already handles null/undefined values, but the types don't reflect that. These changes update the types.
Fixes#45716.
PR Close#46280
@angular/bazel has been deprecated since v10, and is no longer supported. We
don't need to mention fixes/features for Bazel in the release notes.
PR Close#46310
Updates dev-infra to the latest revision. This revision supports
for custom release prechecks and performs the release build
before the staging, verifying integrity later. This has various
benefits for stability and making the less less relucant to build
issues that mess up a previously-merged staging PR.
PR Close#46291
This commit reuses the logic of the `withBody` helper and implements the `withHead` based on it.The helper method is useful for tests that rely on a certain tags being present in document's `<head>` element.
PR Close#46250
This commit renames the packages/private/testing/src/render3.ts -> packages/private/testing/src/utils.ts to avoid using the `render3` term as it used to differentiate VE and Ivy, which is no longer relevant.
PR Close#46250
This commit exports the `isHostComponentStandalone` function and also changes a location where it's imported from. The function was moved recently in a different PR, which caused some conflicts after merging other PRs that relied on the old structure.
PR Close#46274
change the alerts present in the docs to callouts so
that their header can be properly rendered
(since alters don't support have headers)
PR Close#46262
`@angular/bazel` currently uses an older version of `@microsoft/api-extractor` which is causing downstream issues in Components. These changes bump up to a version that has a fix.
Context: https://github.com/angular/components/pull/25027
PR Close#46259
Consider the case in which `FormBuilder` is used to construct a group with an optional field:
```
const controls = { name: fb.control('') };
const foo: FormGroup<{
name: FormControl<string | null>;
address?: FormControl<string | null>;
}> = fb.group<{
name: FormControl<string | null>;
address?: FormControl<string | null>;
}>(controls);
```
Today, with fully strict TypeScript settings, the above will not compile:
```
Types of property 'controls' are incompatible.
Type '{ name: FormControl<string | null>; address?: FormControl<FormGroup<SubFormControls> | null | undefined> | undefined; }' is not assignable to type '{ name: FormControl<string | null>; address?: FormGroup<SubFormControls> | undefined; }'.
```
Notice that the `fb.group(...)` is calculating the following type for address: `address?: FormControl<FormGroup<string|null>`. This is clearly wrong -- an extraneous `FormControl` has been added!
This is coming from the calculation of the result type of `fb.group(...)`. In the type definition, if we cannot detect the outer control type, [we assume it's just an unwrapped value, and automatically wrap it in `FormControl`](https://github.com/angular/angular/blob/14.0.0/packages/forms/src/form_builder.ts#L66).
Because the optional `{address?: FormControl<string|null>}` implicitly makes the RHS have type `FormControl<string|null>|undefined`, [the relevant condition is not satisfied](https://github.com/angular/angular/blob/14.0.0/packages/forms/src/form_builder.ts#L55). In particular, the condition expects just `FormGroup<T>`, not `FormGroup<T>|undefined`. So we assume `T` is a value type, and it gets wrapped with `FormControl`.
The solution is to add the cases where `undefined` is included in the union type when detecting which control `T` is (if any).
PR Close#46253
Add info to the pipe not found error message so to give some help to the developer for
resolving the problem more efficiently
(Note: this change also distinguishes the case in which the hosting component is standalone)
PR Close#46247
split the single RuntimeError utils test testing about the correct
formatting of errors in multiple separate unit tests (for better
granularity and clearness)
PR Close#46239
the formatted error messages always include a period separator between the
provided error message and the find-more suffix, this is not always
desirable as it may add periods when they shoud not be, so improve the
formatting by checking and applying the period only if the provided message
doesn't end with a character which already represents a separator
additionally also improve the formatting by trimming the provided error
message
note that such trimming needs to be performed before the separator check
so that for example an error message like `"some error! "` doesn't produce
`"some error! ."` but it successfully produces "some error!"
PR Close#46239
It is currently unclear which directive to use for FormRecord. This commit amends the docs to explicitly state that the group directives can and should be used with records.
PR Close#46235
improve code regarding element validation by creating a new file
exporting validation functions and not exporting utils previously
globally available
PR Close#46175
Previously, [UpgradeModule#bootstrap()][1], while being a replacement
for and accepting the same arguments as [angular.bootstrap()][2], did
not return the same value as `angular.bootstrap()` (i.e. the AngularJS
injector in most cases). This made it less straight forward to migrate
some usecases that relied on the return value of `.bootstrap()`. The
work-around was to access the injector via [UpgradeModule#$injector][3]
(after the app had been bootstrapped with `UpgradeModule#bootstrap()`).
This commit addresses this by ensuring `UpgradeModule#bootstrap()`
returns the same value as `angular.bootstrap()`, making it easier to
replace the latter with the former.
[1]: https://angular.io/api/upgrade/static/UpgradeModule#bootstrap
[2]: https://docs.angularjs.org/api/ng/function/angular.bootstrap
[3]: https://angular.io/api/upgrade/static/UpgradeModule#%24injectorFixes#46211
PR Close#46214
This adds a test to illustrate the "canceling" behavior we get from the
`Observable` chain in the Router. A new navigation cancels ongoing ones,
and that means also preventing intermediate results in user guards from
executing. This test is important when thinking about future refactors
which might attempt to change the details of how the `applyRedirects`
operator executes.
PR Close#46231
We currently use all the ESM2020 and type sources as inputs for rollup
and type bundle actions, respectively. This is a source of slowness in
Bazel sandboxed builds because many unused files will be linked/made
available for many concurrently-running actions.
We should limit the inputs only to what is assumed to be used. We cannot
know exactly and need to include transitive types from `node_modules`,
but that is an inevitable construct with the current Bazel rules.
Note that the external node modules could still bring in a lot of files,
like in Material where the `.d.ts` files for all locales are brought
into the sandbox (from `@angular/common`). We likely would need to
remove these files in a postinstall for now, to speed up actions,
similar to how we did it for RxJS in all repositories. These are known
to be not used in the components repo.
PR Close#46187
To mitigate the effect of Observables with memory leak, this change clears
the `ChangeDetectorRef` when the `AsyncPipe` is destroyed. This avoids any
leak within the `Observable` to retain the view data. A test has been added
to verify that this change works correctly with promises that resolve _after_
the pipe has been destroyed.
Note: this is not marked as fix as `AsyncPipe` itself is _not_ leaking any
memory.
Closes#17624
PR Close#46128
The field's type does not account for the `null` value that is assigned
in the field's initializer. This commit includes `null` in the type for
better type-safety. Exising reads are updated with a non-null assertion
operation in places where initialization is known to have occurred.
PR Close#46128
Makes the following improvements in the runtime:
* Uses the unique ID of the component definition to keep track of its injector in the `StandaloneFeature`, instead of the definition itself. This reduces the amount of memory we can leak, if something doesn't get cleaned up.
* Changes the naming and description of the `ComponentDef.id` to reflect what it is used for.
PR Close#46093
There's some old logic in the error handler that tries to read an `ngErrorHandler` property off of the errors that are being logged. As far as I can tell, this is a ViewEngine leftover and it isn't actually being used anywhere.
PR Close#46216
In #45445 function inlining had to be disabled on one of our instructions, because Closure wasn't optimizing it correctly, causing an error at runtime. The error has been resolved so we can remove the deoptimization hint.
PR Close#46149
When generating .d.ts metadata for NgModules, by default we emit type
references to their declarations, imports, and exports. However, this
information is not necessarily useful to consumers. References to private
directives (those that aren't exported by the NgModule) for example aren't
at all useful as they can only affect other components declared in the
NgModule. References to imports are of limited usefulness - they might be
helpful for an IDE to understand the DI structure of an application, but
aren't at all used by a downstream compiler.
Generating this metadata is not without cost. When an incremental build
system uses changes in inputs to determine when a rebuild is necessary, any
changes in .d.ts files might cause downstream targets to rebuild. If those
.d.ts changes are in the "private" side of the NgModule (imports or non-
exported directives/pipes), then these rebuilds are wholly unnecessary.
This commit introduces the `onlyPublishPublicTypingsForNgModules` flag for
the compiler. When this flag is set, the compiler will filter the emitted
references in NgModule .d.ts output and only reference those directives/
pipes that are exported from the NgModule (its public API surface). Omitting
the flag preserves the existing behavior of emitting all references, both
public and private.
This is especially useful for build systems such as Bazel.
PR Close#45894
The developer preview link was previously prefixed with the Github URL for
Angular's repo. However, it's meant to go to a guide page on AIO itself.
This commit removes the link prefix.
PR Close#46225
This commit adds the new `@developerPreview` tag to all of the standalone
component related APIs. With this, AIO will show an API status label which
links to the documentation on Developer Preview.
PR Close#46050
This commit adds a tag processor for `@developerPreview`. Adding this tag to
an exported symbol or to a decorator parameter causes an API status tag to
be shown for the API which links to the Developer Preview documentation.
PR Close#46050
This commit updates the releasing/versioning doc on angular.io to cover the
new "Developer Preview" concept. This replaces the old section on the no-
longer-relevant "Angular Labs".
PR Close#46050
This commit updates the `bootstrapApplication` and the `importProvidersFrom` function docs with additional content that includes usage examples.
PR Close#46202
This makes a small update to the example so that it shows a use-case
that's not already covered by the 'enabled' option. The existing example
would get identical behavior to `scrollPositionRestoration: 'enabled'`
with `anchorScrolling: 'enabled'`.
The updated example shows a use-case for when custom scrolling _would_
be needed. For example, when data is fetched because it is not available
immediately or through a resolver. This is one of the cases described in #24547
This update is sufficient to address all of the documentation problems
noted in the aforementioned issue. Another fix should be made to address
the problem that scroll restoration needs to be delayed until after CD
has run so the update block of the activated component's template is
run.
PR Close#46201
This commit adds the Standalone guide link to the `@Component`, `@Directive` and `@Pipe` decorator properties related to standalone functionality to improve discoverability of the guide as well as providing extra context in API docs.
PR Close#46184
This commit updates the `inject` function docs by:
- rephrasing a description to include more usage cases
- adding usage examples
- making a function itself a public API (vs its alias const that was used previously)
PR Close#46168
A recent PR to the Angular common closure-locale file generation
highlighted that the GitHub robot does currently not consider the
`closure-locale.ts` file as relevant for g3. The file is synced into
g3 and the robot should reflect that.
Note: The exclude/include patterns currently will include some of the
legacy/backwards-compatibility locale files, but these will never change
and can be removed in v15. For now it is acceptable to not overly
complicate the exclude/include lists for few files that never change.
PR Close#46177
This commit adds the component name into unknown element/property error message, so that it's easier to find a location of a template where the problem happened.
Closes#46080.
PR Close#46160
The MISSING_INJECTION_CONTEXT runtime error can be thrown when the
inject function is used outside of the class creation context.
Before this change we've only used a vague terms of the
'injection context'. This commit extends the error message to
indicate that we really talk about the class construction context.
PR Close#46166
This commit updates the error message to use correct info depending on whether a component is standalone or not. Previously we were always referring to @NgModules as a place to fix the issue, but not we also mention @Component when needed (for standalone components).
PR Close#46159
change the alert present in the lifecycicle-hook docs to a callout so
that its header can be properly rendered (since alters don't support have headers)
PR Close#46145
Angular generally supports cycles between components in the same NgModule.
We have a mechanism of moving the component scope declaration into the
NgModule file in this case. This ensures that Angular never itself
introduces an import which creates a cycle.
What happens if the cycle already exists in the user's program, though, is a
bit different. In these cases, the "correct" emit for Angular is to generate
the component scope (whether direct or remote) inside of a closure, to
prevent evaluating the scope's references until module evaluation is
complete and all cyclic imports have been resolved. We don't want to do this
for *all* scopes because the code size cost of emitting a function wrapper
is non-zero.
In this fix, we take the presence of a `forwardRef` in a component's
`imports` or in an NgModule `declarations` or `imports` as a sign that
component scopes emitted into those files need to be protected against
cyclic references. In a future commit, we may introduce a warning or error
if cyclic imports are not protected behind `forwardRef` in these cases, but
this will take some time to implement.
PR Close#46139
Previously, `getImageDimensions()` would try to resolve image URLs
relative to the base path using `path.resolve()`. This resulted in
root-relative URLs (i.e. URLs starting with `/`) being treated as
absolute filesystem paths and thus resolving incorrectly
([example failure][1]).
This commit fixes it by using `.join()` instead, which is more
appropriate in this case. (Originally discussed [here][2].)
[1]: https://circleci.com/gh/angular/angular/1173150
[2]: https://github.com/angular/angular/pull/46134#issuecomment-1137191996
PR Close#46138
Prior to this commit, the error message that was produced for the unknown property situation, din't contain extra info on how the problem can be fixed. This commit adds more info to the error message and makes it similar to the one we use during the AOT compilation.
PR Close#46147
improve the error message developers get when adding a standalone
component in the TestBed.configureTestingModule's declarations array,
by making more clear the fact that this error originated from the
TestBed call
resolves#45923
PR Close#45999
the symbol `…` displays correctly in code-example blocks and in
plain html text, it does however not work correctly for code espressed
using backticks, fix such occurrences by replacing `…` with `...`
PR Close#46123
This exposes a new function from the router public API that allows
developers to create a `UrlTree` from _any_ `ActivatedRouteSnapshot`.
The current Router APIs only support creating a `UrlTree` from an
`ActivatedRoute` which is both active _and_ materially appears in the
`UrlTree` (it cannot be an empty path named outlet). This is because the
implementation of the current way of creating a `UrlTree` attempts to
look up the `UrlSegment` of the `ActivatedRoute` in the currently active
`UrlTree` of the router. When this doesn't work, the `UrlTree` creation
fails.
Note that this API does not replace the current one. That would actually be a
breaking change but should be done at some point in the future (v15). That is,
`router.navigate` should call this new function. At that point, we can
remove `_lastPathIndex`, `_urlSegment`, and `_correctedPathIndex` from
the `ActivatedRoute`, along with all of the logic associated with
determining what those should be. In addition, this would unblock a fix
for #26081 because the `applyRedirects` and `recognize` operations
could be combined into one. Overall, this would simplify logic in the router
and reduce code size. It also exposes core routing capabilities as a helper function
which were previously private API, which is a necessary step towards #42953.
As a stress test for this new function, it _was_ swapped in as the
default for `UrlTree` creation in #45859 and tested internally. The
results indicate that this function behaves correctly.
resolves#42191 (Tested directly)
resolves#38276 (The test with a guard covers this case)
resolves#22763 (Tested directly)
PR Close#45877
Call tsc_wrapped's fileExists function instead of TypeScript's.
tsc_wrapped (used internally by ngc-wrapped) has an optimization under
bazel to avoid file system calls where possible. It takes advantage
bazelOpts.allowedInputs, which contains a list of all files available
for compilation.
File system calls can be quite slow depending on the file system. In
google3 I saw a 38 seconds compilation, which spent 6 seconds just doing
fs.stat calls during module resolution. Those fs.stat calls are entirely
gone after with this change.
PR Close#46069
instead of presenting the same (or similar information) in both the
DEVELOPER.md and the BAZEL.md files, more all the information in the
BAZEL file and refer to that section in the DEVELOPER file
PR Close#46084
This commit improves the reported error when importing e.g. `RouterModule.forRoot()`
from within `Component.imports`. Such import is not supported, as standalone components
can only refer to other standalone entities or NgModules in their `imports` array;
`ModuleWithProviders` are not supported as `Component.imports` is meant to be used
for the compilation scope of the component, _not_ for configuring DI.
Closes#46003
PR Close#46009
This commit moves the foreign function resolver logic for detecting a
`ModuleWithProviders` in a return type position of a function call, as the logic can
then be reused for standalone components in a subsequent commit.
PR Close#46009
add a role and an aria-label to the aio-notification component so that
it can be handled better by assistive technologies
resolves#44345
PR Close#45770
tweak the current structural directives guide (currently mainly targeted
at the creation of custom structural directives) so that is more generic
and a point of reference for structural directives in general
this also includes the re-addition of the one-per-element section
removed in PR #40015resolves#44786
PR Close#44895
At the end of Part 2 of the Tour or Heroes tutorial, there is a code sample that is broken. It looks like it was added by mistake because it is not related to the summary.
PR Close#46105
The formatting of the `babel_ast_host.ts` file is invalid due to a
recently-merged PR. The PR had a passing `lint` state but this seemed
to just appear like this because the Git comparison range on upstream
branches can become invalid (due to a known bug in CircleCI -- reported)
PR Close#46082
If the `event.total` is undefined, this line would have generated a `NaN` due to division by zero. I suppose, that a `0` would be more suitable for this case.
PR Close#46077
We recently had a couple of issues with the shallowing of snapshot
git repositories. In an attempt to fix this, parts of the publish
script of the COMP repo have been used, but variables have not been
updated properly.
This commit fixes an unbound variable, avoiding errors when snapshots
are published for a new branch (e.g. when we branch-off).
PR Close#46076
Update angular.io to the latest prerelease versions of Angular CLI and
framework (v14.0.0-rc.0).
Also update angular.io to more closely align with new CLI apps. See also
the [diff][1] between a basic v13.0.0-next.9 CLI app and a v14.0.0-rc.0
one.
[1]: https://github.com/cexbrayat/angular-cli-diff/compare/13.0.0-next.9...14.0.0-rc.0
PR Close#45997
Update the docs examples to the latest prerelease versions of Angular
CLI and framework (v14.0.0-rc.0).
Also update the example apps to more closely align with new CLI apps.
See also the [diff][1] between a basic v13.0.0-rc.3 CLI app and a
v14.0.0-rc.0 one.
[1]: https://github.com/cexbrayat/angular-cli-diff/compare/13.0.0-rc.3...14.0.0-rc.0
PR Close#45997
update the error message presented during aot compilation when an unrecognized
tag/element is found in a standalone component so that it does not mention
the ngModule anymore
Note: the jit variant is present in PR #45920resolves#45818
PR Close#45919
Currently for cases when an unknown structural directive is applied to `<ng-template>`s, an error message thrown by the framework doesn't contain a tag name, for example:
```
NG0303: Can't bind to 'unknownDir' since it isn't a known property of 'null'.
```
The underlying reason is that the tag name for the `<ng-template>` is not produced (`null` is useed as a value) by the compiler in case of inline templates and runtime logic relies on this effect.
This commit handles this situation when an error message is thrown, as the fastest way to improve the error message. More refactoring would be needed to avoid relying on the mentioned effect at runtime.
PR Close#46068
Previously classs, interface and enum members where filtered with the default word ignore list. This lead to poor search results if a search for a member on the ignore list was performed.
PR Close#46060
The CLI autocompletion doc added in https://github.com/angular/angular-cli/pull/23146 includes a demo GIF, but AIO currently has no infrastructure to pull assets like images from the CLI repository, so this demo needs to be stored directly in AIO on this repository.
PR Close#45995
update the error message presented during jit compilation when an unrecognized
tag/element is found in a standalone component so that it does not mention
the ngModule anymore
Note: the aot variant is present in PR #45919resolves#45818
PR Close#45920
Previously, the code in TestBed didn't take into account the fact that the `cmp.dependencies` array after the AOT compilation might contain regular (NgModule-based) Components/Directive/Pipes. As a result, some NgModule-specific code paths were invoked for non-NgModule types, thus leading to errors.
This commit updates the code to handle AOT-compiled structure of standalone components correctly.
PR Close#46052
This commit updates the NgModule logic to account for a case when a type has more than one generated def. This is a common situation for NgModules which have at least two: ɵmod and ɵinj. Previously, the second def was not stored before applying overrides, thus leaving it modified after the test, leaking the state as a result. This fix ensures that we store all defs before applying any overrides.
PR Close#46049
Add a new page in developers guide section with the general
overview of the standalone components, directives and pipes
Additional APIs (bootstrapApplication, router, DI) as also
covered.
PR Close#46058
This commit accounts for the Babel types changes. Some properties
can now also be `undefined` so existing checks/assertions had to
be adjusted to also capture `undefined` (along with `null`).
Additionally, in preparation for a new ECMA proposal, Babel types
seem to have been updated to include private names in object property
keys. This is not necessarily the case for object expressions, but
could be for object patterns (in the future -- when implemented).
More details: https://github.com/babel/babel/pull/14304 and
https://github.com/tc39/proposal-destructuring-private.
PR Close#45967
We recently updated Babel and the Bazel types but this actually
resulted in duplicates, causing differences between what people
seen in their IDE vs. what Bazel builds.
This commit removes the lock file and generates it fully fresh,
deduping dependencies and also fixing the differences between
local IDE and Bazel.
As part of this we also need to update/fixup one assertion on the
Babel node path types, because the node start/end can now also
be `undefined`.
PR Close#45967
DEPRECATED:
It is now deprecated to provide *both* `AbstractControlOption`s and an async validators argument to a FormControl. Previously, the async validators would just be silently dropped, resulting in a probably buggy forms. Now, the constructor call is deprecated, and Angular will print a warning in devmode.
DEPRECATED:
The `initialValueIsDefault` option has been deprecated and replaced with the otherwise-identical `nonNullable` option, for the sake of naming consistency.
In some places, the [@see][1] JSDoc tag was incorrectly used instead of
the [@link][2] inline tag, leading to warnings during doc generation and
the `@see` tags being ignored (and thus shown in the docs as is).
Replace the `@see` tags with the intended `@link` tags.
[1]: https://jsdoc.app/tags-see.html
[2]: https://jsdoc.app/tags-inline-link.html
PR Close#46040
Adds additional tests to verify `enabledBlocking` functionality. The
initial attempt to fix#44355 would have broken the scenario where a new
navigation cancels the initial navigation. We also cannot rely on
`NavigationError` like the example workaround in that issue report is
doing because there won't be one if a guard simply rejects
the initial nav (#16211).
PR Close#45733
This commit fixes a small issue in the logic around the calculation of
template scopes for standalone components. These scopes include a
`Reference` for each dependency of a standalone component, which is used to
generate references to that dependency in various contexts.
Previously, the `Reference` used for a dependency was the one generated from
its own metadata. For example, a referenced directive used the `Reference`
that was created when analyzing the directive declaration itself. This still
works, as the compiler is always able to emit a reference to any valid
`Reference`. However, it's not optimal.
The `Reference` which should be used instead is the one generated from
analyzing the standalone component's `imports` array, which has knowledge of
how the dependency is referenced from within the standalone component's file
itself. This allows the compiler to skip creating a new import for the
dependency when emitting the standalone component, and use the existing,
user-authored import instead. This saves on code size and avoids taxing the
bundler with unnecessary imports.
PR Close#46029
The Angular compiler performs cycle detection when generating imports within
component files. This was previously necessary as reifying dependencies
discovered via NgModules into the component output could add imports that
weren't present in the original component and potentially create cycles.
Doing this could cause order-of-execution issues with existing user imports,
so the compiler detects this case and falls back to an alternative way of
specifying component dependencies that doesn't risk creating cycles.
For standalone components, Angular does not need to add new imports to the
component file as the user has already explicitly referenced dependencies
in the `@Component.imports`. As a result, the cycle detection can be
skipped.
Correctly authoring a program with import cycles is always challenging. One
side of a cyclic import will always initially evaluate to `undefined`, and
this can result in errors in the component definition when this happens
within component `imports`.
Our compiler _could_ detect the cycle and choose to wrap the component
dependencies in an automatic closure instead, avoiding any issues with
`undefined` during an eager evaluation. However, this commit makes an active
choice not to do that as it only serves to mask the problems with cyclic
imports. Future refactorings may cause the "other half" of the cycle to
break. Users should instead be aware of the potential problems with cycles
and explicitly defer evaluations with `forwardRef` where needed. This
ensures that future implementations of Angular compilation which may not be
able to automatically detect import cycles and correct accordingly can still
compile such components.
PR Close#46029
* `FormRecord` jsdocs should now appear on a.io
* The `{@see foo#bar}` syntax previously did not work, and has been replace with backticks
PR Close#46023
Update the CLI install command in the CLI overview page to explicitly
specify a version. This ensures that the version installed is
appropriate for the version of the docs (e.g. installing CLI v12.x when
following the v12 docs) and it consistent with the `setup-local` guide.
PR Close#46020
Some CLI versions (such as `@next`) are not parsed (and thus not
formatted) correctly in code snippets. Fix this by explicitly adding an
appropriate CSS class to the `<aio-angular-dist-tag>` elements to let
PrettyPrint know how to style this token.
PR Close#46020
Fixes issue #45769
Removes the malevolent comic book character, "Narco," from the list of heroes. This change removes the reference from the code, text and screenshots used in the documentation and makes other minor edits as necessary.
PR Close#46008
Document updated with the assistance of the SME.
Add missing prerequisites and what's next sections
Make suggested changes to Event binding doc.
PR Close#45897
New binding overview doc. Content derived from existing docs.
Make changes suggested in PR for binding overview doc.
Deleted bottom paragraph from Binding overview per comments made by
atscott and alxhub.
PR Close#45897
New Transforming data with pipes document.
Content taken from the original Pipes document.
Content edited with the assistance of the SME.
PR Close#45897
New overview file using the Understanding… format.
The original Pipes document was considered too long and
was broken down into several separate topics.
Content edited with the assistance of the SME.
PR Close#45897
Class and style binding was pulled out of Attribute, class, and style
binding doc and put in its own doc.
Content edited with the assistance of the SME.
Prerequisites and What's next sections were added.
PR Close#45897
Attribute document broken down into two separate documents:
1) Attribute binding
2) Class and style binding
Content edited with the assistance of the SME.
PR Close#45897
Consider a typed group for storing contact information:
```
declare interface ContactControls {
name: FormControl<string|null>;
}
contactForm: FormGroup<ContactControls> = ...;
saveForm(form: FormGroup<ContactControls>) {
service.newContact(contactForm.value);
}
```
What should be the type of `newContact`? The answer, of course, is the value type:
```
declare interface Contact {
name: string|null;
}
class ContactService {
newContact(c: Contact) {}
}
```
This is quite redundant, and therefore, we should allow the value type to be generated automatically. We already have the helper types to do this -- we just need to document and export them. Then, this becomes possible:
```
class ContactService {
newContact(c: RawValue<FormGroup<ContactControls>>) {}
}
```
PR Close#45978
This commit adds the `ngDevMode` check to tree-shake away an error message string (which also retains a reference to an extra function).
PR Close#45994
Previously, the examples were split across shards based on the order in
which `globby()` returned them. This was based on the assumption that
`globby()`/the OS would list files in a deterministic order. However, it
turns out that examples can be listed in different orders between
executions, leading in them not being split correctly across shards on
CI (which further means that some examples may be tested multiple times
and others may not be tested at all).
You can see an example [here][1], where the `getting-started` example is
tested in both the 4th and 5th shards.
This commit fixes this by explicitly sorting the examples based on their
path.
[1]: https://circleci.com/gh/angular/angular/1165448
PR Close#46005
This action will enforce that all pull requests receive an approval from
at least one googler on the final commit for the pull request. Historically,
we have allowed all post approval changes regardless of authorship. Moving
forward, with this change, we will only allow known googlers to perform
post approval changes.
When a post approval change occurs by a non-googler, the action will
automatically rerequest a review from the latest googler who provided
an approval on the change.
PR Close#46006
With the introduction of standalone components, it is no longer guaranteed that getAllAngularRootElements will be available on the global object. This PR removes the dependency on this function so that DevTools can continue to work for Angular applications that use `bootstrapApplication`.
PR Close#45983
Currently, the `Router` will create the `EnvironmentInjector` for a
`Route` with `providers` as soon as it _attempts_ to match segments to
the `Route`. Instead, this change updates the logic to only create the
injector once we have confirmed that the `Route` matches. Note that this
will include partial matches where the final navigation still fails with
a "cannot match any routes to segment" error. We need to maintain the
injector hierarchy so we still need to create parent injectors before
descending into the child routes and determining if there is a full
match or just a partial one.
resolves#45988
PR Close#45990
The `inject()` function was introduced with Ivy to support imperative
injection in factory/constructor contexts, such as directive or service
constructors as well as factory functions defined in `@Injectable` or
`InjectionToken`. However, `inject()` in a component/directive constructor
did not work due to a flaw in the logic for creating the internal factory
for components/directives.
The original intention of this logic was to keep `ɵɵdirectiveInject` tree-
shakable for applications which don't use any component-level DI. However,
this breaks the `inject()` functionality for component/directive
constructors.
This commit fixes that issue and adds tests for all the various cases in
which `inject()` should function. As a result `ɵɵdirectiveInject` is no
longer tree-shakable, but that's totally acceptable as any application that
uses `*ngIf` or `*ngFor` already contains this function. It's possible to
change how `inject()` works to restore this tree-shakability if needed.
PR Close#45991
Use the absolute path for the artifacts directory, as well as encapsulate the clone
vs init logic to prevent it from changing directories.
Manually remove the shallow marker so that git does not recognize this as a shallow repo.
PR Close#45979
Rather than using git init to create an empty repo and then shallow fetch the
repo for a specific branch, we shallow clone the repository itself for the branch.
This prevents us from running into the issue of Github denying the push because it
comes from a shallow branch which does not map back to the repository.
PR Close#45975
It looks like because the primary branch for our ephemeral repos doesn't match the build repos
we are pushing to it causes errors around shallow clones. This attempts to prevent this.
PR Close#45974
Add support to material design icons in offline mode for Angular Devtools. Self hosting the web font so icons are loaded regardless of network connection.
Bring the font file as well as its corresponding css file from third_party repo through bazel into shell-browser directory while building.
PR Close#45743
Previously, the preview server would incorrectly identify a running
`aio_preview` CI job as failed and therefore skip creating a preview.
This happened because it only checked whether the job's status is
`success`, failing to account for the fact that the job would have a
`running` status.
(This bug was accidentally introduced in #45934.)
This commit avoids the problem by getting rid of the job status check
altogether. This check does not offer any benefit, since the CI job will
always be in a `running` state (i.e. neither successfully completed nor
failed).
PR Close#45948
This change adds the capability of ngc_wrapped to emit an
unused_inputs_list file that could be used by starlark.
We are making this change because in situations where angular modules
depend on angular modules, it becomes very easy for a single change to
trigger a long cascading set of angular builds since each angular rule
depends on the transitive closure of input files.
With this change in place, and once it is properly configured, bazel
will update the set of inputs to a build rule after it is built once
removing any of the inputs specified in this list, making incremental
builds quicker by skipping any rebuilds that only had changes to unused
inputs.
This logic should be, and is likely duplicated in tsc_wrapped to solve
the same problem in pure TypeScript situations, ideally we could use the
same implementation one day.
In addition, its possible that tree artifacts are not as supported as
we'd like, and where this change should mark entire directories as
unused, we may get better performance gains by enumerating the directory
and being more explicit about specific inputs which are unused.
PR Close#45946
This commit updates the Testability-related tests to reset the testability getter class after each test to avoid leaking the state between tests. This should improve the stability of the testability tests that are currently flaky on CI.
PR Close#45947
The Testability-related logic was refactored in https://github.com/angular/angular/pull/45657 to become tree-shaking-friendly: it was decoupled from the core providers of the `BrowserModule`. This commit updates the newly-introduced `bootstrapApplication` function to exclude Testability-providers by default (note: the Testability is still included in the NgModule-based bootstrap).
In order to add the Testability to the app bootstrapped via `bootstrapApplication`, the `provideProtractorTestingSupport` function is introduced.
PR Close#45885
Previously, using `FormBuilder` with a union type would produce unions of *controls*:
```
// `foo` has type `FormControl<string>|FormControl<number>`.
const c = fb.nonNullable.group({foo: 'bar' as string | number});
```
This actually works in many cases, due to how extraordinarily powerful Typescript's distributive types are (e.g. `value` still has type `string|number`), but it is subtly incorrect. Here is a code example that exposes the reason the inference is incorrect. It exploits the fact that Typescript will not "un-distribute" a type, producing an obviously spurious error:
```
// fc gets an inferred distributive union type `FormControl<string> | FormControl<number>`
let fc = c.controls.foo;
// Error: Type 'FormControl<string | number>' is not assignable to type 'FormControl<string> | FormControl<number>'.
fc = new FormControl<string|number>('', {initialValueIsDefault: true});
```
Instead, we want the union to apply to the *values*:
```
// `foo` should have type `FormControl<string|number>`.
const c = fb.nonNullable.group({foo: 'bar' as string | number});
```
Essentially, we want to prevent Typescript from distributing the type. [As specified in the handbook](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types):
> Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.
This PR applies this suggestion to `FormBuilder`'s type inference.
Fixes#45912.
PR Close#45942
We've had a TODO to expose ManualOnPush for a long time, but it hasn't moved since then. These changes remove it since it would be easy to re-introduce if we wanted to, it frees up an extra space in the flags bitmap and it removes some `render3` tests that we won't have to migrate to `TestBed`.
PR Close#45943
When an external template is read, adds the template file to to the project which contains.
This is necessary to keep the projects open when navigating away from HTML files.
Since a `tsconfig` cannot express including non-TS files,
we need another way to indicate the template files are considered part of the project.
Note that this does not ensure that the project in question _directly_ contains the component
file. That is, the project might just include the component file through the program rather
than directly in the `include` glob of the `tsconfig`. This distinction is somewhat important
because the TypeScript language service/server prefers projects which _directly_ contain the TS
file (see `projectContainsInfoDirectly` in the TS codebase). What this means it that there can
possibly be a different project used between the TS and HTML files.
For example, in Nx projects, the referenced configs are `tsconfig.app.json` and
`tsconfig.editor.json`. `tsconfig.app.json` comes first in the base `tsconfig.json` and
contains the entry point of the app. `tsconfig.editor.json` contains the `**.ts` glob of all TS
files. This means that `tsconfig.editor.json` will be preferred by the TS server for TS files
but the `tsconfig.app.json` will be used for HTML files since it comes first and we cannot
effectively express `projectContainsInfoDirectly` for HTML files.
We could consider also updating the language server implementation to attempt
to select the project to use for the template file based on which project
contains its component file directly, using either the internal `project.projectContainsInfoDirectly`
or as a workaround, check `project.isRoot(componentTsFile)`.
Finally, keeping the projects open is hugely important in the solution style config case like
Nx. When a TS file is opened, TypeScript will only retain `tsconfig.editor.json` and not
`tsconfig.app.json`. However, if our extension does not also know to select
`tsconfig.editor.json`, it will automatically select `tsconfig.app.json` since it is defined
first in the `tsconfig.json` file. So we need to teach TS server that we are (1) interested in
keeping projects open when there is an HTML file open and (2) optionally attempt to do this
_only_ for projects that we know the TS language service will prioritize in TS files (i.e.,
attempt to only keep `tsconfig.editor.json` open and allow `tsconfig.app.json` to close)
and prioritize that project for all requests.
fixes https://github.com/angular/vscode-ng-language-service/issues/1623
fixes https://github.com/angular/vscode-ng-language-service/issues/876
PR Close#45601
Based on early feedback, calling `fb.nonNullable.group(...)` continues to be clunky for a form with many such groups. Allowing `NonNullableFormBuilder` to be directly injected enables the following:
```
constructor(private fb: NonNullableFormBuilder) {}
```
PR Close#45904
Explain how to use OnPush change detection strategy and what are the
different edge cases. Looks into several different scenarios and covers
the behavior of OnPush for each one of them.
PR Close#45880
Add a guide that explains:
- How we can slow the change detection down
- How to discover slow computations with Angular DevTools
- Explain how to fix slow computations
PR Close#45880
Explain the relationship between Angular and Zone.js. Covers how to
discover code that triggers change detection more often than we have to
run it and explain how to run code outside the Angular zone.
PR Close#45880
There was an extra backslash in the description of the pipe character. This could be misleading as people could think that the backslash is a pipe character.
PR Close#45916
This allows the documentation for the options `errorOnUnknownElements` and `errorOnUnknownProperties` to be displayed in the docs.
They aren't currently displayed, as `TestModuleMetadata` is a type and not an interface.
See https://next.angular.io/api/core/testing/TestModuleMetadata
PR Close#45891
There was a difference in the set of paths between check/sync scripts internally and externally.
This commit aligns both configurations.
PR Close#45915
the second step of the tour of heroes refers to a runtime error which
generally isn't presented to new users since it gets caught by the
TypeScript compiler's strict mode, clarify such detail so not to confuse
readers
resolves#45759
PR Close#45878
When hard-coding content in a `<code-example>` tag inside an `.md` file,
the content is treated as HTML by the Markdown processor and thus any
characters with special meaning in HTML have to be encoded (or replaced
with HTML entities).
However, the content that is embedded into `<code-example>` tags via
docregions is treated as text (since it is not parsed by the Markdown
processor) and thus should not have encoded characters or HTML entities.
PR Close#45820
This commit disables the `aio_preview` CircleCI job temporarily, since it's failing after switching to CircleCI API v2. It will be enabled back once the code is updated. More info can be found here: https://github.com/angular/angular/issues/45931
PR Close#45932
In PR #45405, the Angular Package Format (APF) was updated so that
secondary entry-points (such as `@angular/common/http`) do not have
their own `package.json` file, as they used to. Instead, the paths to
their various formats and types are exposed via the primary
`package.json` file's `exports` property. As an example, see the v13
[@angular/common/http/package.json][1] and compare it with the v14
[@angular/common/package.json > exports][2].
Previously, `ngcc` was not able to analyze such v14+ entry-points and
would instead error as it considered such entry-points missing.
This commit addresses the issue by detecting this situation and
synthesizing a `package.json` file for the secondary entry-points based
on the `exports` property of the primary `package.json` file. This data
is only used by `ngcc` in order to determine that the entry-point does
not need further processing, since it is already in Ivy format.
[1]: https://unpkg.com/browse/@angular/common@13.3.5/http/package.json
[2]: https://unpkg.com/browse/@angular/common@14.0.0-next.15/package.json
PR Close#45833
Move the `loadPackageJson()` helper (and associated generic types, such
as `JsonObject`) from `packages/entry_point.ts` to `utils.ts` and also
rename it to `loadJson()`. This way, they can be used in other places in
future commits, without introducing cyclical dependencies.
PR Close#45833
in the tour of heros part 2 guide the addition of a button with spans is
slighly unclear, so update the code to make things more clear
resolves#45760
PR Close#45858
Speeds up the `d.ts` bundling by configuring it as a Bazel
persistent worker. Also improve logging for the ng packager
rule to make it easier to spot which actions/bundles take
up significant time.
Type bundling will occur for every entry-point so for machines
with rather limited cores/threads, this will be useful to save
NodeJS boot and resolution time.
PR Close#45900
Uses `createEsbuildAngularOptimizePlugin` from dev-infra-private and passes in `GLOBAL_DEFS_FOR_TERSER_WITH_AOT` into a new esbuild prod configuration. Notably, this removes references to `ngDevMode` from the final build and enables minification.
PR Close#45886
In Angular v12 we introduced debugging APIs sufficient for DevTools.
Prior to that Angular DevTools accesses the logical data structures of
Ivy directly, which sometimes produces suboptimal results and skips
dynamically inserted content.
With the end of v11's LTS, we'll support only Angular v12 and up.
PR Close#45883
Update the `update-preview-server.sh` script that is used to update the
PR preview server to also remove unused Docker images and containers
after the update. This avoids having unused Docker artifacts grow
uncontrolled and fill up the VM disk drive.
PR Close#45895
Update the mocks used in the `verify-setup` tests of the PR preview
server to account for changes made in PR #45349. These tests run to
verify that a newly built docker container works as expected before
deploying it to the preview server, so having them fail prevents the
preview server from updating automatically.
NOTE:
These tests are currently not run on CI due to complications with
running Docker inside Docker.
PR Close#45895
Fixes the Bazel analysis warning and the fact that Yarn is unnecessarily
downloaded by `rules_nodejs`.
```
DEBUG: /home/circleci/.cache/bazel/_bazel_circleci/9ce5c2144ecf75d11717c0aa41e45a8d/external/build_bazel_rules_nodejs/index.bzl:73:14: yarn_install#yarn attribute not set and no repository named 'yarn' exists; installing default yarn
```
PR Close#45892
This commit refactors the `Testability`-related logic to extract the necessary providers into a separate array, so that it can later become it's own NgModule (or exposed as an array of providers) and be excluded from the new APIs by default.
PR Close#45657
This commit renames an internal function that implements the core bootstrap logic. The function is exported as a private symbol (with `ɵ`), but in order to avoid any possible confusion, we include "internal" into the function name as well.
PR Close#45896
The "set-document-title" guide was in place to direct developers to the
`Title` service for managing page titles. Managing the title is now
available in the `Router` package and is much easier. This change
deletes the old guide and redirects it to the section in the router
guide about setting the page title.
PR Close#45857
Removes scripts and documentation for tools which are no longer
actively used and likely do not work anyway at this point.
All of our PR-related tooling has moved into the `yarn ng-dev` command.
The `PR_REVIEW` markdown file is deleted since it was soley about
the legacy review scripts and the PR review workflow also does not
seem like the common/standard workflow Angular team members follow.
PR Close#45868
An additional issue with the current approach of how Yarn and Bazel
interact, Yarn 1.x. does not prune unused nested `node_modules`. This
can throw-off the Bazel NodeJS rules because they (correctly) would not
expect such a nested folder.
This seems to happen in some caches currently, so we invalidate the
cache. Its worth seeing if we should rather cache the Yarn cache
folder on Windows as well, but for now this will remain as is.
Yarn 2.x+ will solve this for us, by addressing the root-cause.
Dev-Infra already has Yarn 2.x+ running, so it's not far from happening.
PR Close#45872
The NodeJS Bazel linker does not work well on Windows because there
is no sandboxing and linker processes from different tests will attempt
to modify the same `node_modules`, causing concurrency race conditions
and resulting in flakiness.
PR Close#45872
@@ -12,7 +12,7 @@ Info on remote development and developing inside a container with VSCode:
_Prerequisite: [Install Docker](https://docs.docker.com/install) on your local environment._
To get started, read and follow the instuctions 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.
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.
# comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
mergeConflictComment:"Hi @{{PRAuthor}}! This PR has merge conflicts due to recent upstream merges.\nPlease help to unblock it by resolving these conflicts. Thanks!"
@@ -125,9 +69,7 @@ merge:
# list of PR statuses that need to be successful
requiredStatuses:
- 'ci/circleci:build'
- 'ci/circleci:lint'
- 'ci/angular:size'
- 'google3'
- 'google-internal-tests'
- 'pullapprove'
# the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
@@ -143,29 +85,29 @@ triage:
defaultMilestone:82,
# arrays of labels that determine if an issue has been triaged by the caretaker
l1TriageLabels:
- - 'comp:*'
- - 'area:*'
# arrays of labels that determine if an issue has been fully triaged
l2TriageLabels:
- - 'P0'
- 'comp:*'
- 'area:*'
- - 'P1'
- 'comp:*'
- 'area:*'
- - 'P2'
- 'comp:*'
- 'area:*'
- - 'P3'
- 'comp:*'
- 'area:*'
- - 'P4'
- 'comp:*'
- 'area:*'
- - 'P5'
- 'comp:*'
- 'area:*'
- - 'feature'
- 'comp:*'
- 'area:*'
- - 'discussion'
- 'comp:*'
- 'area:*'
- - 'needs clarification'
- 'comp:*'
- 'area:*'
- - 'needs reproduction'
- 'comp:*'
- 'area:*'
# options for the triage PR plugin
triagePR:
@@ -177,10 +119,10 @@ triagePR:
defaultMilestone:82,
# arrays of labels that determine if a PR has been triaged by the caretaker
l1TriageLabels:
- - 'comp:*'
- - 'area:*'
# arrays of labels that determine if a PR has been fully triaged
As contributors and maintainers of the Angular project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
## Our Pledge
Communication through any of Angular's channels (GitHub, Discord, Gitter, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
In the interest of fostering a safe and welcoming environment, we as
the Angular team pledge to make participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity, gender expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Angular project to do the same.
## Our Standards
If any member of the community violates this code of conduct, the maintainers of the Angular project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
Examples of behavior that contributes to creating a positive environment
include:
If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [conduct@angular.io](mailto:conduct@angular.io).
* 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
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
professional setting
## Our Responsibilities
Angular team are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Angular team have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, and to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies to all Angular communication channels - online or in person,
and it also applies when an individual is representing the project or its community in
public spaces. Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the Angular team at conduct@angular.io. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The Angular team
will maintain confidentiality with regard to the reporter of an incident.
Enforcement may result in an indefinite ban from all official Angular communication
channels, or other actions as deemed appropriate by the Angular team.
Angular maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
### Appeal
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?
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
@@ -68,7 +68,7 @@ A minimal reproduction allows us to quickly confirm a bug (or point out a coding
We require a minimal reproduction to save maintainers' time and ultimately be able to fix more bugs.
Often, developers find coding problems themselves while preparing a minimal reproduction.
We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it.
We understand that sometimes it might be hard to extract essential bits of code from a larger codebase, but we really need to isolate the problem before we can fix it.
Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced.
@@ -246,7 +246,7 @@ The `footer` is optional. The [Commit Message Footer](#commit-footer) format des
@@ -306,10 +306,6 @@ There are currently a few exceptions to the "use package name" rule:
* `migrations`: used for changes to the `ng update` migrations.
* `ngcc`: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
* `ve`: used for changes specific to ViewEngine (legacy compiler/renderer).
* `devtools`: used for changes in the [browser extension](./devtools/README.md).
* none/empty string: useful for `test` and `refactor` changes that are done across all packages (e.g. `test: add missing unit tests`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
@@ -394,7 +390,7 @@ The following documents can help you sort out issues with GitHub accounts and mu
@@ -109,11 +115,11 @@ Check out our [upgrade guide](https://update.angular.io/) to find out the best w
### Contributing Guidelines
Read through our [contributing guidelines][contributing] to learn about our submission process, coding rules and more.
Read through our [contributing guidelines][contributing] to learn about our submission process, coding rules, and more.
### Want to Help?
Want to report a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.
Want to report a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for [contributing][contributing] and then check out one of our issues labeled as <kbd>[help wanted](https://github.com/angular/angular/labels/help%20wanted)</kbd> or <kbd>[good first issue](https://github.com/angular/angular/labels/good%20first%20issue)</kbd>.
Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules). For vulnerabilities in Angular, please submit your report [here](https://bughunters.google.com/report).
For more information, check out [Angular's security policy](https://angular.io/guide/security).
@@ -9,67 +9,57 @@ Everything in this folder is part of the documentation project. This includes:
<a name="developer-tasks"></a>
## Developer tasks
We use [Yarn](https://yarnpkg.com) to manage the dependencies and to run build tasks.
We use [Yarn](https://yarnpkg.com) to manage the dependencies and development tasks. Behind the scenes, [Bazel](https://bazel.build/) is used to build targets and run tests.
You should run all these tasks from the `angular/aio` folder.
Here are the most important tasks you might need to use:
*`yarn` - install all the dependencies.
*`yarn setup` - install all the dependencies, boilerplate, stackblitz, zips and run dgeni on the docs.
*`yarn setup-local` - same as `setup`, but build the Angular packages from the source code and use these locally built versions (instead of the ones fetched from npm) for aio and docs examples boilerplate.
*`yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc).
*`yarn build-local` - same as `build`, but use`setup-local` instead of `setup`.
*`yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
*`yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
*`yarn lint` - check that the doc-viewer code follows our style rules.
*`yarn test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
*`yarn test --watch=false` - run all the unit tests once.
*`yarn build` - create a development build of the application.
*`yarn build-prod` - create a production build of the application.
*`yarn build-local` - same as `build`, but uses locally built Angular packages from source code rather than from npm.
*`yarn start` - run a development web server that watches, rebuilds, and reloads the page when there are changes to the source code or docs.
*`yarn start-local` - same as `start`, but uses local Angular packages.
*`yarn test` - run all the unit tests for the doc-viewer once.
*`yarn test-local` - similar to `test`, but tests against locally built Angular packages.
*`yarn test-and-watch` - watch all the source files for the doc-viewer, and run all the unit tests when any change.
*`yarn e2e` - run all the e2e tests for the doc-viewer.
*`yarn e2e-local` - similar to `e2e`, but tests against locally built Angular packages.
*`yarn lint` - check that the doc-viewer code follows our style rules.
*`yarn docs` - generate all the docs from the source files.
*`yarn docs-watch` - watch the Angular source and the docs files and run a short-circuited doc-gen for the docs that changed.
*`yarn docs-lint` - check that the doc gen code follows our style rules.
*`yarn docs-watch` - similar to `start`, but only watches for docs changes and uses a faster, low-fidelity build ideal for quick editing.
*`yarn docs-test` - run the unit tests for the doc generation code.
*`yarn docs-lint` - check that the doc gen code follows our style rules.
*`yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
*`yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
*`yarn create-example` - create a new example directory containing initial source files.
*`yarn generate-stackblitz` - generate the stackblitz files that are used by the `live-example` tags in the docs.
*`yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
*`yarn example-playground <exampleName>` - set up a playground to manually test an example combined with its boilerplate files
-`--local` - link locally build Angular packages as deps
-`--watch` - update the playground when sources change
*`yarn example-e2e` - run all e2e tests for examples. Available options:
-`--setup`: generate boilerplate, force webdriver update & other setup, then run tests.
-`--local`: run e2e tests with the local version of Angular contained in the "dist" folder.
_Requires `--setup` in order to take effect._
-`--local`: run e2e tests against locally built Angular packages.
-`--filter=foo`: limit e2e tests to those containing the word "foo".
-`--exclude=bar`: exclude e2e tests containing the word "bar".
> **Note for Windows users**
>
> Setting up the examples involves creating some [symbolic links](https://en.wikipedia.org/wiki/Symbolic_link) (see [here](./tools/examples/README.md#symlinked-node_modules) for details). On Windows, this requires to either have [Developer Mode enabled](https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10) (supported on Windows 10 or newer) or run the setup commands as administrator.
>
> The affected commands are:
> - `yarn setup` / `yarn setup-*`
> - `yarn build` / `yarn build-*`
> - `yarn boilerplate:add`
> - `yarn example-e2e --setup`
> The underlying Bazel build requires creating [symbolic links](https://en.wikipedia.org/wiki/Symbolic_link) (see [here](./tools/examples/README.md#symlinked-node_modules) for details). On Windows, this requires to either have [Developer Mode enabled](https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10) (supported on Windows 10 or newer) or run the setup commands as administrator.
## Using ServiceWorker locally
Running `yarn start` (even when explicitly targeting production mode) does not set up the
ServiceWorker. If you want to test the ServiceWorker locally, you can use `yarn build` and then
serve the files in `dist/` with `yarn http-server dist -p 4200`.
serve the files with `yarn http-server ../dist/bin/aio/build -p 4200`.
## Guide to authoring
There are two types of content in the documentation:
* **API docs**: descriptions of the modules, classes, interfaces, decorators, etc that make up the Angular platform.
* **API docs**: descriptions of all that make up the Angular platform, such as the modules, classes, interfaces or decorators.
API docs are generated directly from the source code.
The source code is contained in TypeScript files, located in the `angular/packages` folder.
Each API item may have a preceding comment, which contains JSDoc style tags and content.
The content is written in markdown.
The content is written in markdown. To generate docs, each package's files need to be explicitly included in the [packages/BUILD.bazel](../packages/BUILD.bazel) file under the `files_for_docgen` target.
* **Other content**: guides, tutorials, and other marketing material.
All other content is written using markdown in text files, located in the `angular/aio/content` folder.
@@ -87,7 +77,7 @@ writing guide pages, explains how to use the documentation classes and component
### Generating the complete docs
The main task for generating the docs is `yarn docs`. This will process all the source files (API and other),
Running the `yarn build` or `yarn start` tasks will automatically generate the docs. This will process all the source files (API and other),
extracting the documentation and generating JSON files that can be consumed by the doc-viewer.
### Partial doc generation for editors
@@ -109,26 +99,13 @@ correctly.
The general setup is as follows:
* Open a terminal, ensure the dependencies are installed; run an initial doc generation; then start the doc-viewer:
```bash
yarn setup
yarn start
```
* Open a second terminal and start watching the docs
* Open a terminal, ensure the dependencies are installed, then start the doc-viewer:
```bash
yarn docs-watch
```
>Alternatively, try the consolidated `serve-and-sync` command that builds, watches and serves in the same terminal window
```bash
yarn serve-and-sync
```
* Open a browser at https://localhost:4200/ and navigate to the document on which you want to work.
You can automatically open the browser by using `yarn start -o` in the first terminal.
* A browser will open automatically at https://localhost:4200/. Navigate to the document on which you want to work.
* Make changes to the page's associated doc or example files. Every time a file is saved, the doc will
be regenerated, the app will rebuild and the page will reload.
The dependencies of the angular.io app (including Angular, Angular Material and Angular CLI) are automatically updated using [Renovate](https://renovatebot.com/).
However, it is useful to periodically also manually update the app to more closely match (in file layout, configs, etc.) what a new Angular CLI app would look like.
This is typically only needed once for each new major Angular version.
Since angular.io is an Angular CLI app, we can take advantage of `ng update` to apply migrations.
Follow these steps to align the angular.io app with new CLI apps.
> **Note:**
> The following steps assume that the related Angular dependencies have already been updated in [aio/package.json](./package.json) (for example, automatically by Renovate).
> **Note:**
> All commands shown below are expected to be executed from inside the [aio/](./) directory (unless specified otherwise).
- Determine (for example, by examining git history) what is the last versions for which this process was performed.
These will be referred to as `<FROM_VERSION_*>`.
If you can't determine these, use arbitrary versions, such as the previous major version.
- Run the following commands to automatically apply any available migrations to the project:
```sh
# Ensure dependencies are installed.
yarn install
# Migrate project to new versions.
yarn ng update @angular/cli --allow-dirty --migrate-only --from=<FROM_VERSION_CLI>
yarn ng update @angular/core --allow-dirty --migrate-only --from=<FROM_VERSION_ANGULAR>
yarn ng update @angular/material --allow-dirty --migrate-only --from=<FROM_VERSION_MATERIAL>
```
> **Note:**
> Depending on the number of changes generated from each `ng update` command, it might make sense to create a separate commit for each update.
- Inspect [package.json](./package.json) to determine what is the current version of Angular CLI (i.e. `@angular/cli`) used in the app.
This will be referred to as `<TO_VERSION_CLI>`.
- Use the [angular-cli-diff](https://github.com/cexbrayat/angular-cli-diff) repository to discover more changes (which are not automatically applied via `ng update` migrations) between Angular CLI apps of different versions.
Visit https://github.com/cexbrayat/angular-cli-diff/compare/<FROM_VERSION_CLI>...<TO_VERSION_CLI>, inspect the changes between the two versions and apply the ones that make sense to the angular.io source code.
- Commit all changes and [submit a pull request](../CONTRIBUTING.md#submit-pr).
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.
Paul Gschwendtner
