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
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
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
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
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
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
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 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
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
This commit updates the PullApprove config to decrease the number of required reviews from `public-api` and `size-tracking` group members.
PR Close#45855
make clearer that the click code snippet present in the tour of heroes
part 2 guide is not complete but adding ellipsis at the end of the
snippet and also by slightly tweaking the text introducing the snippet
resolves#45758
PR Close#45829
in the aio resources page there is a main h1 heading and then the next
headings used are h3 and h4, thus h2 is being skipped, change such
headings so that there is no heading skipping (which is a bad practice
and can result to confusing experiences from screen reader users)
PR Close#45822
This is the commit accounting for the Github primary branch
rename when we actually perform the update.
We have three change phases: Prepare, Direct, Cleanup. This commit
is for the `direct` phase.
in the aio home page the sections' decorative images provide an alt
texts, which shouldn't actually be present
(see: https://www.w3.org/WAI/tutorials/images/decorative/), empty such
alt text for a better user experience
PR Close#45740
currently the aio home page presents a single h1 which is ignored by
assistive technologies since it has its display set none, so replace it
with a new h1 containing the main text of the page instead
PR Close#45740
replace the generic `*` selector used in the alert styling with
`p` (which is what gets generated from the markdown) as the styling adds
margins which are not always wanted
PR Close#45761
This commit updates the SystemJS for one of the example apps (the `upgrade-module` one) to include a resolution rule for the `tslib`. This is needed in case `tslib` is referenced from the framework code (for example in case of downleveling of some operators). This makes it consistent with other example app configs.
PR Close#45706
This commit adds extra logic to avoid internal and privately exported symbols from being referenced during auto-linking. Currently such symbols can be used for linking, thus resulting in a non-existing link and causing the linking process to fail.
PR Close#45689
This reverts commit 254d6cea9a.
This test has only been introduced in the next branch with
https://github.com/angular/angular/pull/44901. The cherry-pick
of the flaky test fix does not work in the patch branch due to
some other missing changes and the test did not exist in 13.3.x
anyway.
PR Close#45691
In PR #42230, the locale file generation process was modified so that
generated locale files are no longer checked into the repository. Update
a few links in the docs that pointed to the previously checked in files
to point to other places where the files exist.
PR Close#45661
This commit updates one of the styling tests to reset perf counters, making it order-independent and non-flaky (previously the test got random failures depending on whether there are other tests invoked before).
PR Close#45670
currently if a user tries to navigate via keyboard, once the are
presented with search results, the search results panel remains
present and can potentially hide most of the content on the page,
in such case keyboard navigation will be severly hindered and
the only option for the user would be to go back to the seach input
text and clear its value, fix such inconvenience by looping the
focus in the header area close to the search results and the
results panel itself
note: an alternative implementation using the cdkTrapFocus has been
attempted in PR #45194, such alternative implementation presented a
number of (minor) drawbacks (including the increase main bundle size
due to the inclusion of the A11yModule), so it was agreed to proceed
with the manual implementation present in these changes instead.
PR Close#45654
use border-top-width instead of padding-top as the strategy for moving
the search-results panel down, this fixes the issue of the panel going
behind the toolbar (which causes either overlapping text in the home
page or the results scrollbar to be hidden behind the toolbar in other
pages)
PR Close#45579
PR Close#45654
move the aria-label used inside the close-button to the button itself
(since otherwise the button's aria-label overrides the childs)
PR Close#45579
PR Close#45654
Currently that group has just 2 reviewers, but we often update the files that belong to that group during the deprecation period. Adding more people would allow to balance the reviews better.
PR Close#45652
We throw an error when a directive is trying to extend a component, but we don't actually say which class is responsible which can be difficult to track down. These changes add the two class names to the error message.
PR Close#45658
We allow the path to contain both the `t.BoundAttribute` and `t.BoundEvent` for two-way
bindings but do not want the path to contain both the `t.BoundAttribute` with its
children when the position is in the value span because we would then logically create a path
that also contains the `PropertyWrite` from the `t.BoundEvent`. This early return condition
ensures we target just `t.BoundAttribute` for this case and exclude `t.BoundEvent` children.
Fixes https://github.com/angular/vscode-ng-language-service/issues/1626
PR Close#45582
This commit improves the error message that is thrown at runtime when multiple components match the same element. Now the error message contains names of classes that represent those components.
PR Close#45645
Replace wrong mention of 'heroService.delete()' with 'heroService.deleteHero()' because 'heroService.delete()' doesn't exist and 'heroService.deleteHero()' should be mentioned instead
Resolves#45636
PR Close#45637
This commit moves all release notes for everything before v11.0.0 to a separate file, so that the changelog can be rendered correctly via GitHub UI.
Closes#45635.
PR Close#45639
This commit updates an existing bootstrap logic to avoid referencing the `PlatformRef` instance to keep track of the platform status. Instead, we use platform injector, so that the `PlatformRef`can be tree-shaken away in the bootstrap logic for Standalone Components.
The motivation for this change is that retaining the `PlatformRef` class also retains NgModule-based bootstrap code, which would not be needed in case of Standalone Components.
PR Close#45519
Our logic for generating code from an AST uses recursion which limits the number of expressions we can nest before we reach the call stack limit. These changes add a limit in order to avoid errors in some cases where the chains become extremely long.
Fixes#45564.
PR Close#45574
- Specify `NgForm` gets applied by default on `<form>` elements before the long example using it
- Move the strange (and questioned in a commented line) snippet about undefined ref vars in a standalone paragraph and clarify its meanings (adding the part about directive just because there was something similar already there)
- Extend and modify `*ngFor` example, since in the original that was misleading to think reference variable couldn't be used inside a loop
- Remove two lines stating that with `*ngIf` and `*ngFor` the framework cannot know if a template is ever instantiated (can't see how this relate with the page)
- Add an explanation of assignment of default `$implicit` value to undefined input variables
- Modify template example for template input variable to be a complete ngForOf loop instead of the original poor intelligible truncated one
- Replace last generic statements about variable namespaces with a more pragmatic and explanatory one concerning the resolution in case of homonymy
PR Close#45455
This commit removes the `ComponentFactoryResolver` as a constructor argument of the `ApplicationRef` class. This makes it lazily instantiated + simplifies further refactoring in a context of Standalone Components.
PR Close#45507
This commit refactors the set of hardcoded platform core providers into tree-shakable providers.
In addition to making them tree-shakable, this would also avoid the need to rely on the platform creation logic in an upcoming bootstrap logic for Standalone Components.
PR Close#45506
When starting this tutorial, it's not clear to the user whether they should add routing right away, Etc. The other tutorials within the routing section do a better job of this.
Also.. the suggested name of this sample app clashes with that of a previous tutorial, forcing the user to either delete the previous tutorial files, choose a different name for this tutorial's app, or place this app in a different parent directory.
Conflicts:
aio/content/guide/router-tutorial-toh.md
PR Close#45372
By running renovate once a week, we can consolidate all the updates into a single weekly PR, before each Wednesday release. That will significantly reduce the burden on caretakers, and make patch ports less onerous.
PR Close#45605
Previously, the `guide/compoent-style` page was used in e2e tests to
verify the behavior of `{@example}` dgeni tags. However, this guide has
been updated and no longer contains an `{@example}` tag.
This commit switches to using a different page (`api/common/NgIf`) that
does currently contain an `{@example}` tag.
(NOTE: This will also fix the [CI failures][1] in #45501.)
[1]: https://circleci.com/gh/angular/angular/1145424
PR Close#45551
PR Close#45563
Previously, only `language="sh"` and `language="bash"` would be
recognized (and formatted) as cli commands in `<code-example>`.
This commit adds `shell` to the list of languages recognized as cli
commands.
(NOTE: This will fix the [CI failures][1] in #45325.)
[1]: https://circleci.com/gh/angular/angular/1145559
PR Close#45551
PR Close#45563
The footer uses `h3` elements out of order, which causes a "Heading
elements are not in a sequentially-descending order" a11y error.
Replace the `h3` elements with `div` to improve a11y.
Fixes#44338
PR Close#45510
in the validators documentation, the value for the formControl for both required and requiredTrue validators is an empty string. This is OK for required since it gives us an error. But I think if we set the value of formControl responsible for requiredTrue to something other than an empty string (e.g.: 'some value'), it would demonstrate the difference between required and requiredTrue better.
PR Close#45533
in the validators documentation, the value for the formControl for both required and requiredTrue validators is an empty string. This is OK for required since it gives us an error. But I think if we set the value of formControl responsible for requiredTrue to something other than an empty string (e.g.: 'some value'), it would demonstrate the difference between required and requiredTrue better.
PR Close#45533
The code in the patch branch is slightly different from the master branch: the master branch contains some changes where Map are used instead of objects in animations. As a result, one of the tests is failing in patch, since it expects Maps, but receives objects.
PR Close#45531
This is needed because Angular CLI 13.3 contains fixes that are needed for Stackblitz Node 16 to compile Sass. We also added `copyfiles` in `aio/tools/examples/shared/package.json` as `yarn sync-deps` was failing due to the missing dependency.
PR Close#45502
This commit fixes an inconsistency where a type check location for an inline
type check block would be interpreted to occur in a type-checking shim instead.
This resulted in a missing template mapping, causing a crash due to an unsafe
non-null assertion operator.
In the prior commit the `TcbLocation` has been extended with an `isShimFile`
field that is now being used to look for the template mapping in the correct
location. Additionally, the non-null assertion operator is refactored such
that a missing template mapping will now ignore the warning instead of crashing
the compiler.
Fixes#45413
PR Close#45478
Extends `TcbPosition` with a field that indicates whether the `tcbPath` is a
type-checking shim file, or an original source file with an inline type check
block.
This field is used in an upcoming commit that fixes an inconsistency with how
inline type check blocks are incorrectly interpreted as a type-checking shim
file instead.
PR Close#45478
Inline type check blocks (TCBs) are emitted into the original source file, but
node positions would still be represented as a `ShimLocation` with a `shimPath`
corresponding with the type-checking shim file. This results in inconsistencies,
as the `positionInShimFile` field of `ShimLocation` would not correspond with
the `shimPath` of that `ShimLocation`.
This commit is a precursor to letting `ShimLocation` also represent the correct
location for inline type check blocks, by renaming the interface to
`TcbLocation`. A followup commit addresses the actual inconsistency.
PR Close#45478
Updates the AIO payload size goldens to reflect the Angular update
affecting both the `aio` and `aio_local` build (due to CLI devkit
changes affecting both goldens, and the Angular update also affecting
the non-local `aio` build / job).
Patch-port of 6e1fce529a
Aside from AIO, the forms integration test size golden also
needs to be updated. A zonejs change caused the 500 bytes limit
to be exceeded. The change landed in `master` without exceeding,
but exceeded in the `13.3.x` branch (unrelated to the Angular
update). Manually confirmed by diffing the bundles that this change
is the culprit.
https://github.com/angular/angular/commit/c08705899f538bd2d26475c94c2832631c16977b
PR Close#45469
The API golden Bazel rule has changed in the shared dev-infra code. Instead
of putting golden API reports into the golden folder as per their original
location in the NPM package, golden reports are now stored based on the
package exports. This makes it more obvious how entry-points are consumable
As part of this change, since the API golden rule now consutls the NPM package
`exports` field, the `localize/tools` entry-point golden file is now generated.
Previously it wasn't generated due to it not having a secondary entry-point
`package.json` file. Such package json files should not be needed anymore
and will be gone in future APF versions.
PR Close#45469
assign different aria labels to the primary nav and the one used for
guides and docs, so that impaired users can more easily distinguish the
two
PR Close#45209
remove redundant main role as pages should always have a
single element with a main role (also remove the role assigne
to the main tag as that is implied)
PR Close#45209
currently the navigation ul used in aio-top-menu has a role of
navigation, but listitems should be owned by list parents
(see more: https://www.w3.org/TR/wai-aria-1.1/#listitem)
so wrap the ul in a nav and remove the role="navigation" from the
ul element to fix such issue
resolves#44562resolves#16938 (the second point)
PR Close#45209
Close#44913
The following case is not handled correctly by `zone.js`.
```
const delayedPromise = new Promise((resolve) => {
setTimeout(resolve, 1, 'timeout');
});
new Promise((resolve) => {
resolve(delayedPromise);
resolve('second call');
}).then(console.log);
```
It should output `timeout`, since the promise is resolved by the
1st resolve, the `second call` should be ignored.
So this is a bug that the original implementation not ensure the
`resolve` is only called once.
PR Close#45283
Uploading payload size is unreliable from within Bazel. This is
because tests might not run for every commit, tests might have
been cached from a pull request RBE-build (causing payload uploading
to be skipped most of the time as every change comes from a PR)
We should disable the uploading as this is a fundamental problem
(good thing to note now) that we can solve with better payload
size tracking that we want to establish as part of dev-infra.
PR Close#45446
The `patchCallbacks` is used for patching the `document.registerElement` and
`customElements.define`. We explicitly wrap the patching code into try-catch since
callbacks may be already patched by other web components frameworks (e.g. LWC), and they
make those properties non-writable. This means that patching callback will throw an error
`cannot assign to read-only property`. See this code as an example:
https://github.com/salesforce/lwc/blob/master/packages/@lwc/engine-core/src/framework/base-bridge-element.ts#L180-L186
We don't want to stop the application rendering if we couldn't patch some
callback, e.g. `attributeChangedCallback`.
PR Close#42546
PR Close#45400
For quite some time now, since we started to use Bazel for integration tests, we
relied on some size tracking logic that did not actually fully work under Bazel.
It was thought that all the necessary CI push/PR information is available to the
Bazel test, but that was not the case. This was now fixed with the recent Rules NodeJS
v5 update where I made sure the `env.sh` variables are actually available before we
write them to the temporary file for the Bazel-access.
This now will unveil an issue because payload size goldens would start being based
on their branch name. e.g. the golden key in `13.3.x` should not be `master` but
`13.3.x`. This makes more sense than `master` as key, but makes things more
cumbersome and ideally we would not store the branch name at all (this is a larger
change though -- not worth now since we might refactor this anyway). For now we will
update the size tracking logic to always use `master` as golden key (like it worked
in the past year(s))
With the environment fix we now (again) start uploading payload size results to Firebase.
This did not work by accident either. The uploading logic is reliant on the CircleCI
commit range which is not working/reliable in upstream branches. This commit
removes this reliance on `COMMIT_RANGE` since it's not strictly necessary and
currently breaking renovate PRs. We can re-enable this when we have a solution with
CircleCI, or a workaround/resolution logic provided in e.g. `ng-dev ci determine-commit-range`.
PR Close#45444
Improves stability of the Windows Bazel CI job by
installing Bazelisk globally.
Also makes the environment helpers more convenient by
evaluating the variable assignments directly, simplifying
some Bash logic.
PR Close#45443
Dedupes the Yarn run steps, avoiding the need to manually keep
this step in sync (e.g. with the timeout -- which is currently missing
for the windows job)
PR Close#45443
Recent changes in `rules_nodejs` caused the test case copy file actions
to be transitioned into the `exec` configuration, resulting in much larger
file paths. These paths break on Windows with the shell argument limit, and
with the path limit, causing errors like:
```
ERROR: C:/users/circleci/ng/packages/compiler-cli/test/compliance/test_cases/BUILD.bazel:9:12: Copying file packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/structural_directives_if_directive_def.js failed: (Exit 1): cmd.exe failed: error executing command
cd /d C:/users/circleci/_bazel_circleci/u4uoan2j/execroot/angular
SET PATH=C:\Program Files\Git\usr\bin;C:\Program Files\Git\bin;C:\Windows;C:\Windows\System32;C:\Windows\System32\WindowsPowerShell\v1.0
SET RUNFILES_MANIFEST_ONLY=1
cmd.exe /C bazel-out\x64_windows-opt-exec-2B5CBBC6\bin\packages\compiler-cli\test\compliance\test_cases\test_cases--1973427149-cmd.bat
The system cannot find the path specified
```
https://app.circleci.com/pipelines/github/angular/angular/44038/workflows/4b530cb2-f232-4e1d-b35a-e6e085151d08/jobs/1140017
PR Close#45443
It is totally fine, and expected to use Git Bash for running Bazel
on Windows. In fact this is the most common setup for Bazel on Windows
and it's unrealistic to run without it.
This allows us to remove the old/legacy Powershell setup from CI
which is also quite flaky sometimes and does not reproduce how
Bazel is used on windows-users dev machines.
PR Close#45443
The Angular components repository can only start using Bazel Rules NodeJS v5
when `@angular/bazel` is published with support for it. To work around this
cycle we temporarily disable the unit tests job until we migrated the COMP
repo as well.
PR Close#45443
We updated buildifier and a few warnings became errors now. This commit
cleans up the failing unused variable instances, making the linter happy.
Additionally for the API extractor BUILD file, the package defaults
need to move to satisfy buildifier.
PR Close#45443
As mentioned in previous commits (check them for more details), `@bazel/typescript`
no longer contains `ts_library`-specific code, so we no longer need that dependency.
PR Close#45443
`@bazel/typescript` code moved to `@bazel/concatjs` for the tsc-wrapped code.
Note that this code is likely going to be removed anyway soon when we
move dts bundling from `ng_module` to `ng_package`.
PR Close#45443
Previously `tsc-wrapped` which is the foundation for `ngc-wrapped`, resided
in `@bazel/typescript`. It has been moved to `@bazel/concatjs` in rules_nodejs
so we need to account for that as part of our rules_nodejs v5 update.
PR Close#45443
We must read `Symbol.species` safely because `this` may be anything. For instance, `this`
may be an object without a prototype (created through `Object.create(null)`); thus
`this.constructor` will be undefined. One of the use cases is SystemJS creating
prototype-less objects (modules) via `Object.create(null)`. The SystemJS creates an empty
object and copies promise properties into that object (within the `getOrCreateLoad`
function). The zone.js then checks if the resolved value has the `then` method and invokes
it with the `value` context. Otherwise, this will throw an error: `TypeError: Cannot read
properties of undefined (reading 'Symbol(Symbol.species)')`.
PR Close#45369
Update the `Dockerfile` used to create the preview server to use the
latest stable version of Debian (`bullseye`) and also update package
versions to latest versions.
Also, unpin the versions of installed packages (except for Node.js
related ones) as pinning proved problematic due to many packages
removing old versions from the official repositories.
NOTE:
This change will allow the preview server to be updated on the VM and
take advantage of recent fixes, such as #45349. Currently, the update
fails with the error:
```
E: Version '7.64.0-4+deb10u1' for 'curl' was not found
The command '/bin/sh -c apt-get update -y && apt-get install -y curl=7.64.0-4+deb10u1' returned a non-zero code: 100
```
PR Close#45390
Jasmine checks internally if `process` and `process.on` is defined. Otherwise,
it installs the browser rejection handler through the `global.addEventListener`.
This code may be run in the browser environment where `process` is not defined, and
this will lead to a runtime exception since Webpack 5 removed automatic Node.js polyfills.
PR Close#42260
PR Close#45392
The Bazel NodeJS rules provide two ways of accessing node modules:
* A linker which creates a `node_modules` directory in the execroot/or in the runfiles.
* A patched module resolution where no node modules directory necessarily needs to exist.
The first is the default in `rules_nodejs` and the second is technically the most idiomatic
resolution mechanism in Bazel (as it matches with a runfile resolution library).
The linker is prone to race conditions in persistent workers, or non-sandbox environments (like
windows). This is because the linker for all workers will operate on a shared `execroot` directory
and the same `node_modules` directory is modified all the time / potentially conflicting with other
linker processes from other concurrently-running workers.
We rely on the patched module resolution anyway, but just need to disable the unused linker to avoid
issues like the following:
```
---8<---8<--- Start of log, file at /private/var/tmp/_bazel_splaktar/280f06d55552a0d01f89f0955b5acd78/bazel-workers/worker-8-TypeScriptCompile.log ---8<---8<---
[link_node_modules.js] An error has been reported: [Error: ENOENT: no such file or directory, unlink 'node_modules'] {
errno: -2,
code: 'ENOENT',
syscall: 'unlink',
path: 'node_modules'
} Error: ENOENT: no such file or directory, unlink 'node_modules'
---8<---8<--- End of log ---8<---8<---
INFO: Elapsed time: 12.796s, Critical Path: 5.39s
INFO: 645 processes: 477 internal, 12 darwin-sandbox, 156 worker.
```
PR Close#45393
Move to the CircleCI v2 api as the authentication fails for downloading artifacts using the v1 methods.
CircleCI v2 api now requires authentication to occur view the headers instead of being done in a
query parameter, all of the CircleCI interactions are now performed through one fetchFromCircleCi method
which ensures the token is provided in the headers as expected.
PR Close#45349
ZoneJS has been updated as part of the lock file refresh by Renovate. The
polyfills bundle reduced in size by around 4k which is due to some code
simplication in ZoneJS being finally released. This is the commit responsible
for the major reduction (also mentioning the reduction):
https://github.com/angular/angular/commit/0f298a13dbd141e5440d1388b124d03384641efe
PR Close#45298
* feat(core): support TypeScript 4.6 (#45190)
Adds support for TypeScript 4.6.
PR Close#45190
* build: update version to 13.3.0
Bumps up the version to 13.3.0-next.0 so the tooling can pick it up.
* `tree` function now accepts the old root rather than the old
`UrlTree`. The `urlTree` argument was only used to get the `root`.
This change makes it more clear what that pararmeter is used for and
what's actually being used
* Move the `oldRoot` (previously `urlTree`) to be the first argument of `tree`.
This change now mirrors the argument order for `replaceSegment` and
can be read from left to right more easily "in this root,
replace this old segment group with this new segment group".
* Extract `newRoot` to a variable. This just makes it more clear what's
going on at the end rather than combining a bunch of operations into
one.
These changes are being made so that hopefully a future refactor can be
done which does not rely on the `urlTree` argument at all in the
`createUrlTree` function. These refactorings will make it easier to see
1:1 functionlity in these various places.
PR Close#45306
Changes <div> to <p> in description to match the elements in the screenshot.
Update lifecycle-hooks.md
Changes <div> to <p> in description to match the elements in the screenshot.
PR Close#45063
When authoring Angular templates, developers are likely to be most interested in
the current Directive/Component inputs and outputs, then potential
attributes which would match other directives to the element,
and lastly the plethora of DOM events and attributes.
This change ensures that Angular-specific information appears above DOM
information by prepending the first printable ASCII characters to the
sort text.
Fixes https://github.com/angular/vscode-ng-language-service/issues/1537
PR Close#45293
When parsing interpolations, the input string is _decoded_ from what was
in the orginal template. This means that we cannot soley rely on the input
string to compute source spans because it does not necessarily reflect
the exact content of the original template. Specifically, when there is
an HTML entity (i.e. ` `), this will show up in its decoded form
when processing the interpolation (' '). We need to compute offsets
using the original _encoded_ string.
Note that this problem only surfaces in the splitting of interpolations.
The spans to this point have already been tracked accurately. For
example, given the template ` <div></div>`, the source span for the
`div` is already correctly determined to be 6. Only when we encounter
interpolations with many parts do we run into situations where we need
to compute new spans for the individual parts of the interpolation.
PR Close#44811
Jasmine logs a warning when there's a `describe` with no tests. These changes fix one such case in the compiler that happens when the tests are run against Windows.
PR Close#45285
CI components test install the angular package from the local
version, but still use the zone.js from npm, so this commit let
components also install zone.js from local too.
PR Close#45277
This commit removes special (undocumented) logic in the Router code that is
meant to prevent duplicate navigations that result from location syncs in
AngularJS/Angular hybrid applications.
The duplicate navigations can occur when both the Router and the AngularJS sync
code detect a location change via a popstate/hashchange event. When this
happens, the Angular Router schedules a navigation to sync itself with
the browser, but the hybrid listener may also schedule an additional
navigation. There are a few reasons this logic should not be included in
the Router:
* This special logic is not tree shakeable so it introduces a bundle
size cost for all applications, most of which don't need it.
* There have been many updates to the routing pipeline to tolerate
duplicate navigations. That is, duplicate navigations can happen and
routing should still complete successfully.
* https://github.com/angular/angular/commit/0e8548f667e5fdefa3ac7cdf1ba47e3e17011ffc
* https://github.com/angular/angular/commit/9e039ca68bfae5328f3fc1f16fabd7673c466a25
* The logic is really in the wrong place: The hybrid sync code should be
the location to handle this. If duplicate navigations are meant to be
avoided, the hybrid sync code should have handling to _not_ trigger
duplicate navs.
* This logic _also_ used to exist because the mock location
helper used for test incorrectly triggered popstate events during
router navigations. In order to avoid unexpected behavior in tests, this
logic needed to be added. This incorrect mocking may also have been
put in place because the upgrade module _would_ see a location change
event and trigger a duplicate navigation. The location mock has since been updated to
match real browser behavior so this is no longer necessary. The
upgrade module has also been updated to not trigger duplicate
navigations. The following commits are related to this:
* https://github.com/angular/angular/commit/202a1a56314af4ddb99c476f974536a10e390319
* https://github.com/angular/angular/commit/c6a93001eb74374b0fbc6aea1286fe1183d21382
Side note: The `setTimeout` in the location change listener is used to
ensure the ordering of duplicate navigations was consistent. You can see
that the logic being removed here expects the imperative navigation to precede the
popstate/hashchange. With the removal of this code, the `setTimeout` no
longer serves a purpose. However, it has been found that tests can rely
on this behavior (incorrectly) because they expect the navigation to be
complete but in reality, it hasn't even started because the test has not
flushed the timeout. Removing the timeout would be a breaking change as
a result.
PR Close#45240
Similar to 63e9cc7cba, but for the
patch branch where the `aio` job increased in total by ~100b.
New total: 718427 bytes
Before total: 718357 bytes
PR Close#45239
Previously, dev-infra only bundled the CLI with all its dependencies, while
we still also kept all bundled dependencies in the `dependencies`. This basically
meant that the CLI bundling did not provide any value at all.
We fixed this upstream and now dependencies are still bundled, but no longer
also declared as `dependencies`. We also stopped shipping deep JS files, only
shipping the bundles now.
As part of this deep file removal, we introduced a runtime entry-point for
exports/types. This one will also benefit from the bundling and it will be
predictable what symbols dev-infra consumer projects rely on (allowing us to
also have an API guard or something in the future).
PR Close#45239
Several people on the team (myself included) have had issues where the `webdriver-manager` step of the `postinstall` script fails on the first run, but work correctly on the second one.
These changes attempt to simplify the workflow by retrying the script up to 3 times before giving up.
PR Close#45252
This commit updates the `NgLocalization` token to become tree-shakable (vs using a direct reference to that token in the `providers` section of the `CommonModule`). The `NgLocalization` token is used for apps that use i18n and for other apps it would be excluded from the bundle.
PR Close#45118
PR Close#45226
The documented command for updating the forms gold files was outdated
and didn't work. Since this command list can easily become outdated,
remove the individual commands in favor of the simpler global scripts.
PR Close#45198
The `ApplicationModule` module has a number of tokens declared as non-tree-shakable providers. This commit updates them to make tree-shakable.
PR Close#45102
PR Close#45222
The `Compiler`, `ApplicationRef` and `ApplicationInitStatus` classes are registered as non-tree-shakable providers in the `ApplicationModule`. This commit converts them to the tree-shakable providers instead.
PR Close#45102
PR Close#45222
The `SCHEDULER` provider was used previously when both ViewEngine and Ivy code was present. After some prior refactoring, all references to the `SCHEDULER` token were removed, but the token itself remains present in the `ApplicationModule`, which makes it non-tree-shakable.
This commit removes the `SCHEDULER` token as unused.
PR Close#45102
PR Close#45222
improve the http aio example by:
- adding a background color to the messages section so that it
can be distinguished from the others
- avoid using `hr` elements to divide the various sections, use
css instead (so that the divisions can also be omitted when
the sections are not being shown)
- fix the erroneous presence of an input text element inside a button
(see: https://github.com/angular/angular/pull/44557#discussion_r787239658)
PR Close#44986
Sometimes Renovate proposes an update and we need to add some
manual fixups, like updating a size golden. For this we push to
same upstream branch.
Renovate will update the PR though when another new revision/version
becomes available, overriding the fixup and discarding it.
This happened quite often now and causes significantly more
work required by the dev-infra time..
PR Close#45204
Fixes the stamping for snapshot builds and the artifact deployment job.
Currently the stamped versions will have the `.with-local-changes` version
suffix given that we add a file to the Git repo that is just
needed for the CircleCI cache key computation.
PR Close#45147
Automatic updating of Babel was disabled because there were build failures
when using the latest version of Babel, but these have been resolved in
#44931. This commit removes Babel packages from Renovate's ignored list
to allow automatic updates again.
PR Close#45203
The `@angular/localize` package depends on a version of Babel that is two years
old, so this commit updates to the latest version.
Some changes were made to the linker and compliance tests to account for slight
changes in source maps, along with a few code updates because of changes to
the typings of Babel.
PR Close#45203
The `lastChild` property in the match result is only used to compute the
remaining segments (i.e. the ones which were not consumed). The updated
type here makes it easier to use and more clear.
PR Close#45170
in the aio example apps page the style guide for documentation
contributions is included in the Routing section instead of being
in its own section, add a documentation section and include the example
in that one
PR Close#45148
The currently recommended best practice for Github action workflows is to set top-level permissions to read only. And if the job uses the automatic `GITHUB_TOKEN`, fine-grained permissions for each job based on the job's requirements should also be added.
All existing workflows in the repository now have top-level read only permission blocks.
Only the `scorecard` workflow currently requires additional job level permissions and the minimum set of permissions were already present for the job.
PR Close#45177
PR #44550 introduced an animation for pages/tabs transitions in the
animations example application, after such change intermittent e2e
failures started to occur (see for example: #45083), add a delay to
account for such animation to all the animations pages/tabs e2e tests so
to fix the flakyness caused by the animation
PR Close#45144
This commit fixes a use-case where unsubscribing from a JSONP request will result in "Uncaught ReferenceError: ng_jsonp_callback_xy is not defined"
thrown into console. Unsubscribing won't remove its associated callback function because the requested script will finish
loading anyway and will try to call the handler.
PR Close#34818
PR Close#36807
The compiler-cli's declaration files are not necessarily compatible with web
environments that use `@angular/localize`, and would inadvertently include
`typescript` declaration files in any compilation unit that uses
`@angular/localize` (which increases parsing time and memory usage during
builds) using a default import that only type-checks when
`allowSyntheticDefaultImports` is enabled.
Fixes#45179
PR Close#45180
developers should not access the router-outlet directive in their
template before defining a template variable for it, such
implementation is present in a couple of aio guides, fix such guides
so that they show the more correct way of accessing the outlet's data
resolves#36173
PR Close#45140
Before this, the compiler resolves the value in the DTS as dynamic.
If the `trigger` is imported from `@angular/animations`, this PR will
use FFR to simulate the actual implementation in JS and extracts the
animation name.
PR Close#45169
currently animations with unsupported CSS properties cause a hard error
and the crash of the animation itself, instead of this behaviour just
ignore such properties and provide a warning for the developer in
the console (only in dev mode)
this change also introduces a general way to present warnings
in the animations code
resolves#23195
PR Close#45185
The prior approach would consider all existing namespaces from back to front
to find the one that's the closest ancestor for a given host element. An
expensive `contains` operation was used which needed to traverse all the
way up the document root _for each existing namespace_. This commit implements
an optimization where the closest namespace is found by traversing up from
the host element, avoiding repeated DOM traversal.
Closes#45055
PR Close#45113
This commit removed references to the `IterableDiffers` and `KeyValueDiffers` classes from the `ApplicationModule`, which effectively make them tree-shakable. Both classes have `prov` static field with the right setup, so they'll be properly initialized when referenced.
PR Close#45094
PR Close#45115
Since `SwUpdate#available` and `SwUpdate#activated` are deprecated, the new way should be included in the docs instead of the deprecated one.
docs: added missing imports
added imports for VersionReadyEvent, filter, and map
docs: updated service-worker-communications.md
rewrite of SwUpdate service to describe the new versionUpdates property
docs: Apply suggestions from code review
Co-authored-by: George Kalpakas <kalpakas.g@gmail.com>
docs: added events
added VERSION_DETECTED and VERSION_INSTALLATION_FAILED
docs: Apply suggestions from code review
Co-authored-by: George Kalpakas <kalpakas.g@gmail.com>
PR Close#44858
the header hamburger menu gets removed from the page by moving it
outside the screen, it can however still be accessed via keyboard
navigation, add a visibility hidden to the element to prevent such
behavior
PR Close#45067
the query call used for the transition between the Home and About tabs
doesn't work as intented since it doesn't find any matching element,
remove such quering since it is not needed
PR Close#45126
Close#42834
In the new version fo Mocha, all global test functions are from `global`
object instead of `Mocha` object. Adn the current `zone.js` Mocha
patch's logic looks like this.
```
global.describe = Mocha.describe = function() {
return originalMochaDescribe.apply(this, arguments);
}
```
and `originalMochaDescribe` is the unpathced Mocha implementation
looks like this
```
function describe() {
return context.describe(...);
}
```
And the `context` will finally delegate to `global.describe()`,
so the current `zone.js` patch causes infinite loop.
This commit will not patch function of `Mocha` object any longer.
PR Close#45047
add information to the query api docs clarifying that elements with
a trigger can be queried via `:leave` when their parent is leaving
this exception is potentially something to be changed (see #45058)
but for the time being the docs can be updated to make the users
aware of such behavior
PR Close#45059
improve the aio animations guide information around elements entering and
leaving, this includes, querying them, their transitions and also improvements
to the animations guide live examples
PR Close#44550
Before Ivy, it was only possible to call the `ViewContainerRef.createComponent` function with the ComponentFactory as the first argument. An instance of a `ComponentFactory` resolved via `ComponentFactoryResolver` contained a reference to an `NgModule` where the component is declared. As a result, the component maintained a DI connection with the module injector tree (by retrieving an instance of `NgModuleRef` internally), even when the custom injector was provided (we try to find a token in a custom injector first and consult module injector after that).
With Ivy, we expanded the `ViewContainerRef.createComponent` function API to support direct references to the Component classes without going through the factory resolution step. As a result, there was no connection to the NgModule that declares the component. Thus, if you provide a custom injector, this is the only injector that is taken into account.
This commit updates the logic for the factory-less case to try retrieving an instance of an `NgModuleRef` using the DI tree which `ViewContainerRef` belongs to. The `NgModuleRef` instance is then used to get a hold of a module injector tree. This brings the factory-less and factory-based logic to more consistent state.
Closes#44897.
PR Close#44966
In templates with several levels of nested nodes, it's common for several `elementStart`/`elementEnd` instructions to show up in a row which can be optimized away.
These changes add chaining support for `elementStart`, `elementEnd`, `elementContainerStart` and `elementContainerEnd` to shave off some bytes when possible.
PR Close#44994
Previously the logic for generating chained instructions was somewhat rigid, because we had to collect all of the calls ahead of time and then call one of the chained instruction helpers. This doesn't work for something like `elementStart`, because we have to descend into other elements that could add to the chain.
These changes refactor the code so that we collect the list of instructions in a flat array and we do the chaining only once at the end when we have the entire instruction set for the code block.
The new approach has the advantage of being (almost) entirely configuration-based via the `CHAINABLE_INSTRUCTIONS` array and being more flexible in allowing us to chain instructions that span across elements.
PR Close#44994
This commit updates various places in the repo (mostly tests/examples) to drop all `.ngfactory` and `.ngsummary` imports as they are no longer needed in Ivy.
PR Close#44957
When an `NgModel` is created within a `form`, it receives an `NgControl` based on its `name`, but
the control doesn't get swapped out if the name changes. This can lead to problems if the `NgModel`
is part of an `ngFor`, because the name can change based on its position in the list and a new
control can be defined with the same name, leading us to having multiple directives pointing to
the same control. For example, if we start off with a list like :
```
[0, 1, 2]; -> [NgModel(0), NgModel(1), NgModel(2)]
```
Then we remove the second item:
```
[0, 2]; -> [NgModel(0), NgModel(2)]
```
And finally, if we decide to add an item to the end of the list, we'll already have a control for
index 2, causing the list to look like:
```
[0, 2, 3]; -> [NgModel(0), NgModel(2), NgModel(2)]
```
These changes fix the issue by removing the old control when the `name` of the directive changes.
Fixes#38465.
Fixes#37920.
PR Close#40459
This commit updates the `PatternValidator` class to inherit `AbstractValidatorDirective` to make it conistent with other validators.
Closes angular#42267
PR Close#44887
For two-way-bindings that use the banana-in-a-box syntax, the compiler
synthesizes an event assignment expression from the primary expression.
It is valid for the primary expression to be terminated by the non-null
operator, however naive string substitution is used for the synthesized
expression, such that the `!` would immediately precede the `=` token,
resulting in the valid `!=` operator token. The expression would still
parse correctly but it doesn't implement the proper semantics, resulting
in incorrect runtime behavior.
Changing the expression substitution to force a space between the
primary expression and the assignment avoids this mistake, but it
uncovers a new issue. The grammar does not allow for the LHS of an
assignment to be the non-null operator, so the synthesized expression
would fail to parse. To alleviate this, the synthesized expression is
parsed with a special parser flag to allow for this syntax.
Fixes#36551
PR Close#37809
This commit updates `DebugNode` and `DebugElement` implementaitons to cleanup ViewEngine removal artifacts. There is no need for a separate interface and implementation class, so we can combine them now. This comment also gets rid of `R3` suffixes (denoting Ivy) in helper methods.
PR Close#44270
The devtools scoped commits are not included in the repository's CHANGELOG.md
file as these commits are not references areas which are included in the
primary released artifacts.
PR Close#44964
add types to all the buttons in the angular.io examples to encourage
the best practice of always including a type per button (regardless
to whether it is in a form or now)
PR Close#44557
remove the comments present in aio examples saying that for older
browsers such as IE CustomEvent could be necessary (as the the Event
constructor could be not available)
such comments are no longer necessary/relevant since the Event constructor
is available for all the supported browsers
PR Close#44557
the aio examples have various eslint issues regarding template rules, those
are currently turned off and TODO comments have been added to them in the
examples eslintrc, fix such issues and remove the respective TODO comments
this also includes examples refactoring to use buttons for better accessibility,
this change tries to make the smallest amound of changes to the examples' behaviors
and designs/UI
PR Close#44557
in the last Lines ViewEncapsulationComponent should be EmulatedEncapsulationComponent as there is no such ViewEncapsulationComponent exists in this example where as
ShadowDomEncapsulationComponent contains NoEncapsulationComponent and EmulatedEncapsulationComponent
PR Close#42899
add a section regarding reordering list items in the complex animation
sequences guide to help developers rememeber to use a `TrackByFunction`
whenever they are animating `*ngFor` list items which change their
ordering
as suggested here: https://github.com/angular/angular/issues/42750#issuecomment-979127165
relates to issue #28040 and #42750
PR Close#44567
After trying this feature, it turns out the approach does not work and we
will be reverting the commits. Note that the feature _never_ worked so it's
not a breaking change.
PR Close#44961
Refs http://b/214103351.
This happens if a user writes `<span i18n>Message</span>`. This is accepted as an internationalized message, but without a description. JSCompiler will throw an error in this situation because descriptions are generally required. Now, the Angular compiler will generate a suppression annotation so JSCompiler allows the syntax. This will ease an internal migration to JSCompiler-based i18n.
PR Close#44787
This code mimics behavior that Google Analytics has been using to
prevent duplicate navigations. They set up their own `HybridRoutingService`
location sync to avoid duplicate navigations that came from the Angular
router. This would happen because the Angular router would trigger a
navigation, which would then get picked up by the `$locationShim`, which
would trigger a `$locationChangeStart`, which would then be picked up by
the `setUpLocationSync` watcher here, which would again trigger a
navigation in the Angular Router.
All of this can be prevented by checking if the `navigationId` exists on
the history state object. This property is added by the Angular router
during navigations.
fixes#21610
PR Close#43441
This updates the router upgrade tests to use less mocked behavior. The
test upgrade location module is copied from the one that's used in the
common package. This update to the tests verifies more real behavior of
the upgrade module.
PR Close#43441
The logical filesystem would store a cached result based on the canonical path,
where the cached value contains the physical path that was originally provided.
This meant that other physical paths with an identical canonical path would use
a cached result derived from another physical path.
This inconsistency is not known to result in actual issues but is primarily
being made as a performance improvement, as using the provided physical paths
as cache key avoids the need to canonicalize the path if its result is already
cached.
PR Close#44798
The generated imports should normally use module specifiers that are valid for
use in production code, where arbitrary relative imports into e.g. node_modules
are not allowed. For template type-checking code it is however acceptable to
use relative imports, as such files are never emitted to JS code. It is
desirable to allow a filesystem relative import as fallback if an import would
otherwise fail to be generated, as doing so allows fewer situations from
needing an inline type constructor.
PR Close#44798
This commit removes the leftover `Identifiers` class that was used in the
ViewEngine compiler. The remaining usages of the `inlineInterpolate` and
`interpolate` instructions were refactored to make use of an
`InterpolationExpression` output expression to capture the argument list of an
interpolation expression. An attempt was made to refactor this further by
converting to the desired interpolation instruction immediately, but some
downstream consumers are designed in a way where the argument list itself is
needed, e.g. as other arguments need to be prepended/appended.
PR Close#44676
When `HttpTestingController.verify` is used to verify that there are not open,
unexpected requests it would throw an error with the method and URL of all pending
requests, excluding the query parameters. This is confusing, as e.g. `expectOne`
matches a URL including its query parameters and `expectOne` does include the
query parameters when it reports when no request could be matched.
This commit changes the error that is reported by `verify` to include the query
parameters.
Closes#19974
PR Close#44917
Fixes#44589
In the navigation pane, the title and tooltip for the page,
Preparing component for translation, are incorrect. This PR
fixes this issue.
PR Close#44710
Update aio/content/guide/service-worker-devops.md
ngsw.json is the manifest file which is generated at build time ( based on ngsw-config.json ). This explains this a bit clearer.
At first, I thought that it was a wrongly named filename. Not is it explicitly described.
Co-Authored-By: George Kalpakas <kalpakas.g@gmail.com>
PR Close#44823
This commit refactors the `RuntimeError` class to support a short version of providing error messages:
```
throw new RuntimeError(
RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED,
ngDevMode && 'Injector has already been destroyed.');
```
In prod mode, the second argument becomes `false` andn this commit extends the typings to support that.
This commit also contains a couple places were the `RuntimeError` class is used to demostrate the compact form.
PR Close#44783
This commit removes CSS keyframes-based code that was used to support animations in old browsers. With IE11 deprecation, all supported browsers have native WebAnimations support, so the old code can be removed. This results in ~7KB decrease of the animations package bundle size, since most of the code was non-tree-shakable.
Closes#44520.
PR Close#44919
Support for namespace URIs rather than short namespace names was added in
https://github.com/angular/angular/commit/2b9cc8503d48173492c29f5a271b61126104fbdb to
support how Ivy passed around the namespace URI rather than short name at the time.
As a side-effect, this meant that namespace URIs were supported by the
default dom renderer as part of the public API (likely unintentionally).
It did not, however extend the support to other parts of the system (setAttribute, setAttribute,
and the ServerRenderer). In the future we should decide what exactly the
semantics for dealing with namespaces should be and make it consistent.
fixes#44028
PR Close#44914
This commit updates a type used in the transplanted views perf tests, to make the test compatible with strict template type-checking.
Currently, compiling the perf test results in the following TS error:
```
error TS2322: Type 'TemplateRef<{}>' is not assignable to type 'TemplateRef<NgForOfContext<any, any[]>>'.
17 <ng-container *ngFor="let n of views; template: template; trackBy: trackByIndex"></ng-container>
~~~~~~~~
```
PR Close#44905
Currently, `ngModel` calls` setValue` after the `resolvedPromise` is resolved.
The promise is resolved _after_ the child template executes. The change detection
is run but `OnPush` views are not updated because they are not marked as dirty.
PR Close#44886
Previously, some NgModules that were added to the delayed scoping queue, never got removed from the queue before unit test execution. That resulted in some components (declared in those NgModules) missing their scope (which components/directives/pipes were matched).
This commit adds the logic to invoke delayed scoping queue flushing before starting a test to avoid missing/incomplete scopes for Components used in a test.
PR Close#44814
Attempting to run as is fails because we have `"type": "module"`. `shelljs` is a CommonJS module however, so we need to do a default import and destructure.
```
$ node packages/compiler-cli/test/compliance/update_all_goldens.js
const {exec} = require('shelljs');
^
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/home/douglasparker/Source/ng/packages/compiler-cli/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///home/douglasparker/Source/ng/packages/compiler-cli/test/compliance/update_all_goldens.js:11:16
at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
at async Loader.import (node:internal/modules/esm/loader:178:24)
at async Object.loadESM (node:internal/process/esm_loader:68:5)
at async handleMainPromise (node:internal/modules/run_main:63:12)
```
PR Close#44916
Fixes formatting in one of the Zone BUILD files.
The lint check on the renovate branch did not check
formatting as it seems. Needs more investigation as
the PR was green.
PR Close#44911
Previously with ESBuild 0.14.11, when a file had dynamic requires to
builtin NodeJS modules like `url`, the resolution completed successfully
regardless of `--platform browser`. This seems to be fixed in ESBuild now.
This unveiled some resolution errors with our Saucelabs bundle generation
because the framework code sometimes switches dynamically to `require('url')`
if `window.URL` is not defined. Previously this just didn't matter, but now
the `require('url')` is checked and a module resolution error is reported given
`url` not being available in the browser as a builtin module.
We fix this by marking the module as external. We will not hit this code path
anyway in the browser saucelabs code. Similarly we exclude all platform-server
files from the bundle. This is not strictly needed after the `url` module being
marked as external, but the issue showed that lots of unnecessary code for the
server platform is included. This can be omitted (unfortunately not from the TS
compilation without over-complicating things significantly more; experimented with
that).
PR Close#44911
Updates the postinstall patch for the benchmark macro rule from dev-infra.
We moved the ZoneJS setup to the bundler. This was necessary in order to
switch away from the Go-based (windows-incompatible, m1-incompatible)
concatjs devserver to a rather basic HTTP server (also provided by dev-infra now).
PR Close#44911
TypeScript configures `strictNullChecks` to be disabled by default, so the nullish
coalescing check should follow the same default. The rule actively depends on
`strictNullChecks`, as TypeScript doesn't include `null`/`undefined` in its types
otherwise so the check wouldn't have a way to differentiate between them.
This commit also takes the `strict` flag into account when `strictNullChecks` itself
is not configured.
PR Close#44862
Previously, when the notification text did not fit on the viewport
width, it got truncated and it was not possible to see the whole text.
This commit fixes this by making the notification scrollable when the
text overflows.
PR Close#44900
On smaller screens, the action button in `NotificationComponent` is
hidden (due to limited horizontal screen "real estate"). Thus, the only
way to perform the action is to click on the notification message, which
is typically a link.
Previously, the link inside the notification did not take up the whole
height of the notification bar. As a result, clicking outside the link
would dismiss the notification without following the link.
This commit makes it easier to interact with the notification (esp. on
smaller screens) by ensuring the link covers the whole notification bar
(width and height).
PR Close#44900
The initial commit e9124b42d5 stored the errors rather than
throwing but did not store them in a place that was accessible to consumers. Instead,
the errors should be added to the IndexedComponent so they can be surfaced where the
index results are consumed
PR Close#44884
The jasmine types for `spyObj.calls().all()` seem to be more specific,
relying on `ThisType<Fn>` to determine the context/receiver for an invoked
spy. This type does not work as expected with class members as it seems.
This commit fixes three of these type checking failures by explicitly casting
the spy context to the actual class owning the method member.
PR Close#44876
Recently, the [CLI repository][1] switched to not prefixing tag names
with a `v`. Update the `versionInfo` generated for CLI commands docs, so
that the links to the source code (which include the tag name) are
correct.
Fixes#44822
[1]: https://github.com/angular/angular-cli
PR Close#44835
This functionally dead code was originally introduced via pull request
were added to verify the fix, and the many comments on that issue after
it was closed indicate that it wasn't actually resolved.
In fact, setting `selectedIndex` does absolutely nothing here, since
the selected index is immediately overridden by setting the `value`
property. A working fix (with tests) for the IE/Safari bug is in pull
request #23784. Originally this dead code was removed as part of that PR,
but @AndrewKushnir recommended creating a separate PR for the cleanup.
PR Close#37614
The survey id is used as a key in the local storage to keep the state (don't show the message again). Reusing this survey id will make the message invisible to some users who already have that key in local storage.
PR Close#44865
To speed up the components CI job (avoiding it being a bottleneck in FW),
we will stop building everything in `src/...`, but rather only build targets
which are needed to run all tests within `src/...`.
This notably should avoid unnecessary NPM package building. Arguably that
part would also be valuable to have, but we already test the `ng_package`
rule in FW itself, plus we run snapshot tests in the components repo as well.
PR Close#44832
Re-enables the components-repo unit tests job that we previously
disabled due to the devmode target change that caused conflicts
with `angular/components` patching `ng_module.bzl` of `@angular/bazel`.
PR Close#44832
When the indexer encounters a location where the source span doesn't
match up with the expected identifier, the current visitor code throws
an error. Instead, this change creates an error and moves on to the next
template item. This allows the indexer to continue analysis even when
there are errors in the source mapping. In addition, it still allows callers
to surface those errors in their own way while still providing as much indexed
information as possible about a node.
PR Close#44825
It's best to disable this optional migration in the minor release, although it shouldn't run anyway -- we don't want people accidentally running it.
This PR will be rolled back after the minor is out.
PR Close#44828
An `ng-template` with an inline template (i.e. has a structural
directive) would previously not get an `undefined` `tagName` because the
logic assumed the element would be `t.Element` or `t.Content` and read
the tag name from the `name` property. For a `t.Template`, this exists
instead on the `t.tagName`. The final result would be an `tagName` of `undefined`
for the parent `t.Template`, causing failures in the indexer downstream.
This `undefined` value is actually expected in the renderer code, even
though the type does not specify this possibility. This change updates
the type of `tagName` to be `string|null` and explicitly handles the
case where there is a structural directive on an `ng-template`. You can
see how the two are differentiated in the compliance code that was
modified in this commit.
PR Close#44788
* Update the UniqueAlterEgoValidator code example
* Add async-validator docregion to hero-form-reactive.component.2.ts
* Fix typo under Implementing a custom async validator
* Add h3 sections for adding async validators to reactive & template-driven forms
PR Close#44764
When setting up an async validator in a template-driven form, it's necessary to register the directive with NG_ASYNC_VALIDATORS instead of NG_VALIDATORS. This was not mentioned in the docs.
PR Close#44764
Modified required validator and checkbox validator to inherit abstractValidator.
For every validato type different PR will be raised as discussed in #42378.
Closes#42267
PR Close#44162
When the user opts into the noop `NgZone`, they usually still interact with the static methods on the non-noop class. This change adds a check to handle the case where zone.js hasn't been loaded.
Fixes#44784.
PR Close#44800
The previous fix for correcting spans with comments in
https://github.com/angular/angular/commit/59eef29a6c5d568ca80595cd7018e21ad406c85d
had the unfortunate side effect of _breaking_ the spans with comments
when there was leading whitespace. This happened because the previous
fix was testing one without a comment, identifying that the offset shouldn't
have anything added to it, and then removing that offset adjustment
(`offsets[i] + (expressionText.length - sourceToLex.length)`).
Upon further investigation, this offset adjustment _was actually
necessary_ for when the input had comments, but this was only because
the `stripComments` function used `trim` to remove whitespace for these
cases. This is the real problem -- not only does it create a ton of confusion
but also it means that the behavior of the lexer and resulting spans is
different between inputs with comments and inputs without comments.
After reviewing how the `inputLength` of `_ParseAST` was used, it
appears that the correct behavior would be to _not_ trim the input. The
`inputLength` is used to advance the current index beyond points which
have been processed. This _should_ include any whitespace. Additionally,
`inputLength` doesn't appear to be needed at all. When there was no
comment in the input, it was always equal to the `input.length` anyways.
When there _is_ a comment, it should include that comment anyways to
advance the index beyond the comment.
PR Close#44785
This includes the initial documentation for extended diagnostics with a page for each of the two initial checks. They follow the same general formula, and hopefully in the future they can be properly generated from metadata rather than copy-pasted as they are currently.
PR Close#44704
Refs #42966.
Look for changes in error docs (i.e. docs under `aio/content/error/`) in
`authors-package`, so that such docs are tracked when running the
`serve-and-sync` script.
PR Close#44704
Refs #42966.
Look for changes in error docs (i.e. docs under `aio/content/error/`) in
`authors-package`, so that such docs are tracked when running the
`serve-and-sync` script.
PR Close#44704
When running tests with code coverage using Istanbul, the code is
instrumented with coverage reporting statements. These statements are
also inserted into synthesized constructors, preventing Angular from
properly recognizing them as synthesized constructor.
This commit changes the regex to detect synthesized constructors to allow
for statements within the constructor before the `super(...arguments);`
call. This is limited to code that does not contain a `}`, but this
is sufficient to support Istanbul's coverage instrumentation statements.
The tests have been extended with an input file that is being
instrumented using `babel-plugin-istanbul` for both ES2015 and ES5
targets, in order to verify that the approach works for real-world
usages.
Fixes#31337
PR Close#44732
Previously, if a bad extended diagnostic category was given, it would fail with the expected error as well as an unexpected assertion error:
```
$ ng build -c development
✔ Browser application bundle generation complete.
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Unexpected call to 'assertNever()' with value:
test
at /home/douglasparker/Source/ng-new/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
at processTicksAndRejections (internal/process/task_queues.js:95:5)
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Unexpected call to 'assertNever()' with value:
test
at /home/douglasparker/Source/ng-new/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
at processTicksAndRejections (internal/process/task_queues.js:95:5)
Error: error NG4004: Angular compiler option "extendedDiagnostics.checks['invalidBananaInBox']" has an unknown diagnostic category: "test".
Allowed diagnostic categories are:
warning
error
suppress
```
The assertion comes from `ExtendedTemplateCheckerImpl`, which expects a well-formed configuration, yet the compiler would construct it even when errors were found. This commit skips constructing and running extended diagnostics if the configuration had errors, which should avoid triggering these assertion errors.
I'm unfortunately not able to actually test this change. The test passes even before the fix because the `ngc` binary and end-to-end tests [don't request diagnostics unless the configuration is considered valid](https://github.com/angular/angular/blob/ed21f5c75378e1ce717ee3d76d28c8c994209de1/packages/compiler-cli/src/perform_compile.ts#L292-L293). See [Slack](https://angular-team.slack.com/archives/C4WHZQMRA/p1642641305003800) for more details.
PR Close#44778
`Renderer2` APIs expect to be called with the namespace name rather than
the namespace URI. Rather than passing around the URI and having to
account for different calling contexts, this change consistently uses
the namespace short names.
Importantly, the URI was only used in `component_ref.ts` `create`
(because `getNamespace returned the URIs`) and `createElementNode` in
`node_manipulation.ts` (because `getNamespaceUri` also used the URIs).
In contrast, attributes would use the _short names instead of URIs_
(see `setUpAttributes` in `attrs_utils.ts`). These names are pulled
directly from the attribute, i.e. `xhtml:href` and not converted to URI.
This dichotomy is confusing and unnecessary. The change here aligns the two
approaches in order to provide consistently throughout the system.
This relates to #44766 because the `createElementNode` was calling the
`AnimationRenderer.createElement` which delegates to the
`ServerRenderer`, which in turn was only set up to expect short names.
As a result, the `NAMESPACE_URIS` lookup failed and `Domino` created
the `svg` as a regular `Element` which does not have a `styles`
property.
resolves#44766
PR Close#44766
Refs #42966.
There were two remaining places where `_extendedTemplateDiagnostics` needed to be set which should have been removed in #44712 but got missed. This updates them to only require `strictTemplates` and not `_extendedTemplateDiagnostics` so the feature is properly enabled in production.
PR Close#44777
# **NOTE 1**: Pin to exact images using an ID (SHA). See https://circleci.com/docs/2.0/circleci-images/#using-a-docker-image-id-to-pin-an-image-to-a-fixed-version.
@@ -103,20 +108,8 @@ executors:
windows-executor:
working_directory:~/ng
resource_class:windows.2xlarge
# CircleCI windows VMs do have the GitBash shell available:
# 'private' mostly contains entrypoints for 3P Angular.
# Note that 'private/migrations' _is_ used.
- 'packages/compiler-cli/private/bazel.ts'
- 'packages/compiler-cli/private/localize.ts'
- 'packages/compiler-cli/private/tooling.ts'
- 'packages/compiler-cli/private/babel.d.ts'
# google3 defines its own binary entrypoints.
- 'packages/compiler-cli/src/bin/**'
- 'packages/docs/**'
- 'packages/elements/schematics/**'
- 'packages/examples/**'
@@ -97,7 +110,7 @@ merge:
# whether the PR shouldn't have a conflict with the base branch
noConflict:true
# list of labels that a PR needs to have, checked with a regexp (e.g. "target:" will work for the label "target: master")
# list of labels that a PR needs to have, checked with a regexp.
requiredLabels:
- 'target:*'
@@ -119,7 +132,7 @@ merge:
# the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
# {{MERGE_LABEL}} will be replaced by the value of the mergeLabel option
# {{PLACEHOLDER}} will be replaced by the list of failing checks
mergeRemovedComment:"I see that you just added the `{{MERGE_LABEL}}` label, but the following checks are still failing:\n{{PLACEHOLDER}}\n\n**If you want your PR to be merged, it has to pass all the CI checks.**\n\nIf you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."
mergeRemovedComment:"I see that you just added the `{{MERGE_LABEL}}` label, but the following checks are still failing:\n{{PLACEHOLDER}}\n\n**If you want your PR to be merged, it has to pass all the CI checks.**\n\nIf you can't get the PR to a green state due to flakes or broken `main`, please try rebasing to `main` and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."
Angular CLI saves a number of cachable operations on disk by default.
When you re-run the same build, the build system restores the state of the previous build and re-uses previously performed operations, which decreases the time taken to build and test your applications and libraries.
@@ -7,9 +8,10 @@ When you re-run the same build, the build system restores the state of the previ
To amend the default cache settings, add the `cli.cache` object to your [Workspace Configuration](guide/workspace-config).
The object goes under `cli.cache` at the top level of the file, outside the `projects` sections.
@@ -18,27 +20,35 @@ The object goes under `cli.cache` at the top level of the file, outside the `pro
},
"projects": {}
}
```
</code-example>
For more information, see [cache options](guide/workspace-config#cache-options).
### Enabling and disabling the cache
Caching is enabled by default. To disable caching run the following command:
```bash
Caching is enabled by default.
To disable caching run the following command:
<code-example format="shell" language="shell">
ng config cli.cache.enabled false
```
</code-example>
To re-enable caching, set `cli.cache.enabled` to `true`.
### Cache environments
By default, disk cache is only enabled for local environments.
To enable caching for all environments, run the following command:
```bash
<code-example format="shell" language="shell">
ng config cli.cache.environment all
```
</code-example>
For more information, see `environment` in [cache options](guide/workspace-config#cache-options).
@@ -50,11 +60,14 @@ The Angular CLI checks for the presence and value of the `CI` environment variab
### Cache path
By default, `.angular/cache` is used as a base directory to store cache results. To change this path, run the following command:
By default, `.angular/cache` is used as a base directory to store cache results.
To change this path, run the following command:
<code-example format="shell" language="shell">
```bash
ng config cli.cache.path ".cache/ng"
```
</code-example>
### Clearing the cache
@@ -62,14 +75,18 @@ To clear the cache, run one of the following commands.
To clear the cache on Unix-based operating systems:
```bash
<code-example format="shell" language="shell">
rm -rf .angular/cache
```
</code-example>
To clear the cache on Windows:
```bash
rmdir /s /q .angular/cache
```
<code-example format="shell" language="shell">
For more information, see [rm command](https://man7.org/linux/man-pages/man1/rm.1.html) and [rmdir command](https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/rmdir).
rmdir /s /q .angular\cache
</code-example>
For more information, see [rm command](https://man7.org/linux/man-pages/man1/rm.1.html) and [rmdir command](https://docs.microsoft.com/windows-server/administration/windows-commands/rmdir).
For details about changes between versions, and information about updating from previous releases,
see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases
For details about changes between versions, and information about updating from previous releases, see the Releases tab on GitHub: https://github.com/angular/angular-cli/releases
## Basic workflow
Invoke the tool on the command line through the `ng` executable.
Online help is available on the command line.
Enter the following to list commands or options for a given command (such as [generate](cli/generate)) with a short description.
Enter the following to list commands or options for a given command \(such as [generate](cli/generate)\) with a short description.
<code-example format="shell" language="shell">
<code-example language="bash">
ng help
ng generate --help
</code-example>
To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:
<code-example language="bash">
<code-example format="shell" language="shell">
ng new my-first-project
cd my-first-project
ng serve
</code-example>
In your browser, open http://localhost:4200/ to see the new application run.
@@ -38,9 +44,10 @@ When you use the [ng serve](cli/serve) command to build an application and serve
<div class="alert is-helpful">
When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory. Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
When you run `ng new my-first-project` a new folder, named `my-first-project`, will be created in the current working directory.
Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command.
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>` first.
If the current working directory is not the right place for your project, you can change to a more appropriate directory by running `cd <path-to-other-directory>`.
</div>
@@ -58,7 +65,7 @@ You can edit the generated files directly, or add to and modify them using CLI c
Use the [ng generate](cli/generate) command to add new files for additional components and services, and code for new pipes, directives, and so on.
Commands such as [add](cli/add) and [generate](cli/generate), which create or operate on applications and libraries, must be executed from within a workspace or project folder.
* See more about the [Workspace file structure](guide/file-structure).
* See more about the [Workspace file structure](guide/file-structure).
### Workspace and project configuration
@@ -66,10 +73,15 @@ A single workspace configuration file, `angular.json`, is created at the top lev
This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.
The [ng config](cli/config) command lets you set and retrieve configuration values from the command line, or you can edit the `angular.json` file directly.
Note that option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands can use either camelCase or dash-case.
* See more about [Workspace Configuration](guide/workspace-config).
* See the [complete schema](https://github.com/angular/angular-cli/wiki/angular-workspace) for `angular.json`.
<div class="alert is-helpful">
**NOTE**: <br />
Option names in the configuration file must use [camelCase](guide/glossary#case-types), while option names supplied to commands must be dash-case.
</div>
* See more about [Workspace Configuration](guide/workspace-config).
## CLI command-language syntax
@@ -77,34 +89,44 @@ Command syntax is shown as follows:
* Most commands, and some options, have aliases. Aliases are shown in the syntax statement for each command.
* Most commands, and some options, have aliases.
Aliases are shown in the syntax statement for each command.
* Option names are prefixed with a double dash (--).
Option aliases are prefixed with a single dash (-).
* Option names are prefixed with a double dash \(`--`\) characters.
Option aliases are prefixed with a single dash \(`-`\) character.
Arguments are not prefixed.
For example:
<code-example language="bash">
ng build my-app -c production
<code-example format="shell" language="shell">
ng build my-app -c production
</code-example>
* Typically, the name of a generated artifact can be given as an argument to the command or specified with the --name option.
* Typically, the name of a generated artifact can be given as an argument to the command or specified with the `--name` option.
* Argument and option names can be given in either
[camelCase or dash-case](guide/glossary#case-types).
`--myOptionName` is equivalent to `--my-option-name`.
* Argument and option names can be given in either [camelCase or dash-case](guide/glossary#case-types).
`--myOptionName` is equivalent to `--my-option-name`.
### Boolean options
Boolean options have two forms: `--this-option` sets the flag to `true`, `--no-this-option` sets it to `false`.
If neither option is supplied, the flag remains in its default state, as listed in the reference documentation.
### Relative paths
Options that specify files can be given as absolute paths, or as paths relative to the current working directory, which is generally either the workspace or project root.
### Schematics
The [ng generate](cli/generate) and [ng add](cli/add) commands take as an argument the artifact or library to be generated or added to the current project.
The [ng generate](cli/generate) and [ng add](cli/add) commands take, as an argument, the artifact or library to be generated or added to the current project.
In addition to any general options, each artifact or library defines its own options in a *schematic*.
Schematic options are supplied to the command in the same format as immediate command options.
@shortDescription Expression has changed after it was checked
@description
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.
In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven’t changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occur, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed.
Angular only throws this error in development mode.
This error commonly occurs when you’ve added template expressions or begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or a child component changes its parent bindings.
In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed.
This catches errors where the view is left in an inconsistent state.
This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent.
If either of these occur, this is a sign that change detection is not stabilized
Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`.
It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.
@debugging
The [source maps](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed.
Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct [component lifecycle hook](guide/lifecycle-hooks) for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.
The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging.
Navigate up the call stack until you find a template expression where the value displayed in the error has changed.
Ensure that there are no changes to the bindings in the template after change detection is run.
This often means refactoring to use the correct [component lifecycle hook](guide/lifecycle-hooks) for your use case.
If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.
If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging/).
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
@shortDescription Circular dependency in DI detected while instantiating a provider
@description
A cyclic dependency exists when a [dependency of a service](guide/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
A cyclic dependency exists when a [dependency of a service](guide/hierarchical-dependency-injection) directly or indirectly depends on the service itself.
For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`.
Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
@debugging
Use the call stack to determine where the cyclical dependency exists. You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service’s dependencies and identify the loop causing the problem.
Break this loop (or circle) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.
Use the call stack to determine where the cyclical dependency exists.
You will be able to see if any child dependencies rely on the original file by [mapping out](guide/dependency-injection-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.
Break this loop \(or circle\) of dependency to resolve this error.
This most commonly means removing or refactoring the dependencies to not be reliant on one another.
You see this error when you try to inject a service but have not declared a corresponding provider. A provider is a mapping that supplies a value that you can inject into the constructor of a class in your application.
Read more on providers in our [Dependency Injection guide](guide/dependency-injection).
@debugging
Work backwards from the object where the error states that a [provider](guide/architecture-services) is missing: `No provider for ${this}!`. This is commonly thrown in [services](tutorial/toh-pt4), which require non-existing providers.
Work backwards from the object where the error states that a [provider](guide/architecture-services) is missing: `No provider for ${this}!`.
This is commonly thrown in [services](tutorial/toh-pt4), which require non-existing providers.
To fix the error ensure that your service is registered in the list of providers of an `NgModule` or has the `@Injectable` decorator with a `providedIn` property at top.
The most common solution is to add a provider in `@Injectable` using `providedIn`:
Two or more components use the same [element selector](guide/component-overview#specifying-a-components-css-selector). Because there can only be a single component associated with an element, selectors must be unique strings to prevent ambiguity for Angular.
@debugging
Use the element name from the error message to search for places where you’re using the same [selector declaration](guide/architecture-components) in your codebase:
Use the element name from the error message to search for places where you're using the same [selector declaration](guide/architecture-components) in your codebase:
Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
If you’re having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](guide/styleguide#component-selectors) for your selectors to prevent collisions.
If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](guide/styleguide#component-selectors) for your selectors to prevent collisions.
Angular can’t find a directive with `{{ PLACEHOLDER }}` export name. The export name is specified in the `exportAs` property of the directive decorator. This is common when using FormsModule or Material modules in templates, and you’ve forgotten to [import the corresponding modules](guide/sharing-ngmodules).
Angular can't find a directive with `{{ PLACEHOLDER }}` export name.
The export name is specified in the `exportAs` property of the directive decorator.
This is common when using FormsModule or Material modules in templates and you've forgotten to [import the corresponding modules](guide/sharing-ngmodules).
<div class="alert is-helpful">
@@ -13,20 +16,30 @@ This is the runtime equivalent of a common compiler error [NG8003: No directive
</div>
@debugging
Use the export name to trace the templates or modules using this export.
Ensure that all dependencies are [properly imported and declared in your NgModules](guide/sharing-ngmodules). For example, if the export not found is `ngForm`, we need to import `FormsModule` and declare it in the list of imports in `*.module.ts` to resolve the error.
Ensure that all dependencies are [properly imported and declared in your NgModules](guide/sharing-ngmodules).
For example, if the export not found is `ngForm`, we need to import `FormsModule` and declare it in the list of imports in `*.module.ts` to resolve the error.
The pipe referenced in the template has not been named or declared properly.
Angular can't find a pipe with this name.
The pipe referenced in the template has not been named or declared properly.
A [pipe](guide/pipes) must be either declared or imported in the `NgModule` where it is used, and the name used in a template must match the name defined in the pipe decorator.
@debugging
Use the pipe name to trace the templates or modules where this pipe is declared and used.
To resolve this error, ensure that:
- A local custom pipe is uniquely named in the pipe's decorator, and declared in the `NgModule`, or
- A pipe from another `NgModule` is added to the imports of the `NgModule` where it is used.
* A local custom pipe is uniquely named in the pipe's decorator, and declared in the `NgModule`, or
* A pipe from another `NgModule` is added to the imports of the `NgModule` where it is used
If you recently added an import or declaration, you may need to restart your server to see these changes.
@shortDescription Decorator argument is not an object literal
@description
To make the metadata extraction in the Angular compiler faster, the decorators `@NgModule`, `@Pipe`, `@Component`, `@Directive`, and `@Injectable` accept only object literals as arguments.
This is an [intentional change in Ivy](https://github.com/angular/angular/issues/30840#issuecomment-498869540), which enforces stricter argument requirements for decorators than View Engine. Ivy requires this approach because it compiles decorators by moving the expressions into other locations in the class output.
This is an [intentional change in Ivy](https://github.com/angular/angular/issues/30840#issuecomment-498869540), which enforces stricter argument requirements for decorators than View Engine.
Ivy requires this approach because it compiles decorators by moving the expressions into other locations in the class output.
@shortDescription No suitable injection token for parameter
@description
There is no injection token for a constructor parameter at compile time. [InjectionTokens](api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
@debugging
Look at the parameter that throws the error and all uses of the class. This error is commonly thrown when a constructor defines parameters with primitive types like `string`, `number`, `boolean`, and `Object`.
Use the `@Injectable` method or `@Inject` decorator from `@angular/core` to ensure that the type you are injecting is reified (has a runtime representation). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
Look at the parameter that throws the error, and all uses of the class.
This error is commonly thrown when a constructor defines parameters with primitive types such as `string`, `number`, `boolean`, and `Object`.
Use the `@Injectable` method or `@Inject` decorator from `@angular/core` to ensure that the type you are injecting is reified \(has a runtime representation\).
Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
A component, directive or pipe that is referenced by this component would require the compiler
to add an import that would lead to a cycle of imports. For example, consider a scenario where
a `ParentComponent` references a `ChildComponent` in its template:
A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template:
There is already an import from `child.component.ts` to `parent.component.ts` since the `ChildComponent`
references the `ParentComponent` in its constructor.
There is already an import from `child.component.ts` to `parent.component.ts` since the `ChildComponent` references the `ParentComponent` in its constructor.
But note that the parent component's template contains `<child></child>`. The generated code for this
template must therefore contain a reference to the `ChildComponent` class. In order to make this reference
the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would
The parentcomponent's template contains `<child></child>`.
The generated code for this template must therefore contain a reference to the `ChildComponent` class.
In order to make this reference, the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would cause an import cycle:
To avoid adding imports that create cycles, additional code is added to the `NgModule` class where
the component is declared that wires up the dependencies. This is known as "remote scoping".
To avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
This is known as "remote scoping".
### Libraries
Unfortunately, "remote scoping" code is side-effectful, which prevents tree shaking, and cannot
be used in libraries. So when building libraries using the `"compilationMode": "partial"` setting,
any component that would require a cyclic import will cause this `NG3003` compiler error to be raised.
Unfortunately, "remote scoping" code is side-effectful —which prevents tree shaking— and cannot be used in libraries.
So when building libraries using the `"compilationMode": "partial"` setting, any component that would require a cyclic import will cause this `NG3003` compiler error to be raised.
@debugging
The cycle that would be generated is shown as part of the error message. For example:
The cycle that would be generated is shown as part of the error message.
For example:
<code-example hideCopy="true">
<span class="nocode">The component ChildComponent is used in the template but importing it would create a cycle:
Use this to identify how the referenced component, pipe or directive has a dependency back to the
component being compiled. Here are some ideas for fixing the problem:
Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
Here are some ideas for fixing the problem:
* Try to re-arrange your dependencies to avoid the cycle. For example using an intermediate interface
that is stored in an independent file that can be imported to both dependent files without
causing an import cycle.
* Move the classes that reference each other into the same file, to avoid any imports between them.
* Convert import statements to type-only imports (using `import type` syntax) if the imported declarations
are only used as types, as type-only imports do not contribute to cycles.
* Try to rearrange your dependencies to avoid the cycle.
For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
* Move the classes that reference each other into the same file, to avoid any imports between them.
* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
@shortDescription Unknown HTML element or component
@description
One or more elements cannot be resolved during compilation because the element is not defined by the HTML spec, or there is no component or directive with such element selector.
<div class="alert is-helpful">
This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: …`.
This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: …`.
</div>
@debugging
Use the element name in the error to find the file(s) where the element is being used.
Check that the name and selector are correct. If the component is from a different module or import, check that the component is exported from its origin module and imported into the correct `*.modules.ts` file, and declared in the imports list.
Check that the name and selector are correct.
If the component is from a different module or import, check that the component is exported from its origin module and imported into the correct `*.modules.ts` file, and declared in the imports list.
When using custom elements or web components, ensure that you add [`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA) to the application module.
If this does not resolve the error, check the imported libraries for any recent changes to the exports and properties you are using, and restart your server.
An attribute or property cannot be resolved during compilation.
This error arises when attempting to bind to a property that does not exist. Any property binding must correspond to either:
* A native property on the HTML element, or
* An `@Input()` property of a component or directive applied to the element.
This error arises when attempting to bind to a property that does not exist.
Any property binding must correspond to either:
The runtime error for this is `NG0304: '${tagName}' is not a known element: …’`.
* A native property on the HTML element, or
* An `@Input()` property of a component or directive applied to the element.
The runtime error for this is `NG0304: '${tagName}' is not a known element: …'`.
@debugging
Look at documentation for the specific [binding syntax](guide/binding-syntax) used. This is usually a typo or incorrect import. There may also be a missing direction with property selector ‘name’ or missing input.
Look at documentation for the specific [binding syntax](guide/binding-syntax) used.
This is usually a typo or incorrect import.
There may also be a missing direction with property selector 'name' or missing input.
Angular can’t find a directive with `{{ PLACEHOLDER }}` export name. This is common with a missing import or a missing [`exportAs`](api/core/Directive#exportAs) on a directive.
Angular can't find a directive with `{{ PLACEHOLDER }}` export name.
This is common with a missing import or a missing [`exportAs`](api/core/Directive#exportAs) on a directive.
<div class="alert is-helpful">
@@ -14,18 +15,30 @@ This is the compiler equivalent of a common runtime error [NG0301: Export Not Fo
</div>
@debugging
Use the string name of the export not found to trace the templates or modules using this export.
Ensure that all dependencies are properly imported and declared in our Modules. For example, if the export not found is `ngForm`, we will need to import `FormsModule` and declare it in our list of imports in `*.module.ts` to resolve the missing export error.
Ensure that all dependencies are properly imported and declared in our Modules.
For example, if the export not found is `ngForm`, we will need to import `FormsModule` and declare it in our list of imports in `*.module.ts` to resolve the missing export error.
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.
Jessica Janiuk
