This patch is a final major refactor in styling Angular.
This PR includes three main fixes:
All temporary state taht is persisted between template style/class application
and style/class application in host bindings is now removed.
Removes the styling() and stylingApply() instructions.
Introduces a "direct apply" mode that is used apply prop-based
style/class in the event that there are no map-based bindings as
well as property collisions.
PR Close#32259
PR Close#32591
This patch is a final major refactor in styling Angular.
This PR includes three main fixes:
All temporary state taht is persisted between template style/class application
and style/class application in host bindings is now removed.
Removes the styling() and stylingApply() instructions.
Introduces a "direct apply" mode that is used apply prop-based
style/class in the event that there are no map-based bindings as
well as property collisions.
PR Close#32259
PR Close#32596
This commit expands the `lint` CircleCI job to also run the
`tools/verify-codeownership.js` script. This script verifies that some
important files/directories in the codebase have code-owners assigned in
`.github/CODEOWNERS`.
The main purpose of this change is to prevent adding new directories
(e.g. packages or docs guides/examples) without assigning appropriate
code-owners. When no code-owner is explicitly assigned, corresponding
PRs will automatically request reviews from @igorminar, who is the
"fall-back" code-owner.
PR Close#32577
The `aio/scripts/verify-codeownership.js` script (formerly
`verify-docs-codeownership.js`) can be used to verify whether there are
directories in the codebase that don't have a codeowner (in
`.github/CODEOWNERS`) and vice versa. It does not aim to cover all files
and directories, but do a coarse check on some important (or frequently
changing) directories.
Previously, the script only checked for API docs examples (in
`packages/examples/`) and guides (and related images and example) (in
`aio/content/`).
This commit expands the script to also check for packages (i.e.
top-level directories in `packages/`). It also renames the script from
`verify-docs-codeownership.js` to `verify-codeownership.js`, to better
reflect its new behavior.
PR Close#32577
This patch is a final major refactor in styling Angular.
This PR includes three main fixes:
All temporary state taht is persisted between template style/class application
and style/class application in host bindings is now removed.
Removes the styling() and stylingApply() instructions.
Introduces a "direct apply" mode that is used apply prop-based
style/class in the event that there are no map-based bindings as
well as property collisions.
PR Close#32259
The docs examples e2e tests have been quite flaky recently. This causes
the `test_docs_examples` and `test_docs_examples_ivy` CircleCI jobs to
often fail (and block PRs) without a real reason.
This commit adds support for re-running failed docs examples e2e tests
and configures the `test_docs_examples` and `test_docs_examples_ivy`
jobs to try running each test that fails a second time, before giving up
and marking it as failed.
Closes#31841Closes#31842
PR Close#32497
Not mentioned in the docs.
Whenever offset property is used inside a keyframe's step at least once, then it must be defined to all the steps.
When read the first time, I supposed that the API automatically sets an even offset to the remaining not defined offsets, which is not
PR Close#32350
The Table of Contents (ToC) is auto-generated based on the content of
heading elements on the page. At the same time, anchor links are
auto-generated and added to each heading element. Note that the Material
Icons used for the anchor icon make use of ligatures, which means that
the icons are specified by using their textual name as text content of
the icon element. As a result, the name of the icon is included in the
parent element's `textContent`.
Previously, the `TocService` used to strip off these anchor elements
when generating the content of ToC items, but not when generating the
content of their tooltips. Thus, tooltips for ToC items would
confusingly include a `link` suffix (`link` is the textual name of the
icon used in heading anchor links).
This commit fixes this by deriving the tooltip content from the
transformed text content (which already has anchor links stripped off),
instead of from the original heading content.
PR Close#32418
This allows the script to recognise some matches that it would miss
before and avoid listing them as missing.
Ideally, the script should be able to understand the globs in
`CODEOWNERS` and correctly find matching file-system paths.However, for
the limited purposes of the script (and for just a couple of relevant
globs), implementing this would be an overkill.
Implemented the "manual expansion" instead.
(We might revisit, if the needs change.)
PR Close#32360
This script can be used for manually checking that all docs
guides/examples/images have owners in `.github/CODEOWNERS`.
This commit adds support for also checking codeownership of API docs
examples (in `packages/examples/*`). The script is also renamed to the
more generic (and accurate) `verify-docs-codeownership.js`.
PR Close#32360
TestBed.get is not type safe, fixing it would be a massive breaking
change. The Angular team has proposed replacing it with TestBed.inject
and deprecate TestBed.get.
Deprecation from TestBed.get will come as a separate commit.
Issue #26491Fixes#29905
BREAKING CHANGE: Injector.get now accepts abstract classes to return
type-safe values. Previous implementation returned `any` through the
deprecated implementation.
PR Close#32200
This avoids warning such as the following ([example][1]):
```
warn: Invalid tags found -
doc "platform-browser/ɵBROWSER_SANITIZATION_PROVIDERS__POST_R3__" (const)
from file "platform-browser/src/browser.ts"
```
[1]: https://circleci.com/gh/angular/angular/427064
PR Close#32207
The automated links for state() and group() are currently going to the
wrong api pages. Edit directs them to the correct animations api pages.
PR Close#32267
This commit switches the default value of the enableIvy flag to true.
Applications that run ngc will now by default receive an Ivy build!
This does not affect the way Bazel builds in the Angular repo work, since
those are still switched based on the value of the --define=compile flag.
Additionally, projects using @angular/bazel still use View Engine builds
by default.
Since most of the Angular repo tests are still written against View Engine
(particularly because we still publish VE packages to NPM), this switch
also requires lots of `enableIvy: false` flags in tsconfigs throughout the
repo.
Congrats to the team for reaching this milestone!
PR Close#32219
Bundle size changed in both zone.js(legacy) and zone-evergreen.js
- zone.js(legacy) package increased a little because the following feature and fixes.
1. #31699, handle MSPointer events PR
2. https://github.com/angular/zone.js/pull/1219 to add __zone_symbol__ customization support
- zone-evergreen.js package decreased because
1. the MSPointer PR only for legacy
2. the Object.defineProperty patch is moved to legacy #31660
PR Close#31975
Examples for testing are designed specifically to run in StackBlitz and
are not regular cli projects (e.g. their `main.ts` files may load and run
tests instead of bootstrapping an app). They are not intended to be
downloaded and built/run locally using the cli.
In order to avoid confusing users, this commit removes the download links
from the guide. If desired, the projects can still be exported locally
via StackBlitz's UI.
Related to #31020 and #31937.
PR Close#31949
The `setup-local` npm script uses `NgPackagesInstaller` to replace the
Angular packages with the locally built ones. Previously, it would (a)
assume that the packages were built and (b) it would do anything if the
currently installed versions already correspond to locally built
packages (even if not the latest version).
This could lead to all sorts of errors, such as:
- Confusing error messages, `dist/packages-dist/` was missing.
- Using outdated build artifacts from `dist/packages-dist/` without a
warning.
- Not installing the latest locally built packages, because the ones
installed already corresponded to locally built (but older) ones.
This commit fixes these issues by ensuring that:
- The local packages are always built before being used by
`NgPackagesInstaller`.
- The local packages are installed, even if the ones install already
correspond to local packages.
NOTE: Special `*-ci` scripts are introduced (for use on CI) that skip
building the local packages, since that step would have been taken
care of (in a more efficient way) in a previous CI step.
PR Close#31985
Previously, when `NgPackagesInstaller` needed to install the local
Angular packages to a project, it assumed the `dist/packages-dist/`
would exist and contain up-to-date built packages. I.e. it was up to the
user to have built the packages first (by running the appropriate
script).
However, many people not familiar with the `aio/` infrastructure assumed
that `yarn build-local` or `yarn build-with-ivy` would take care of all
the necessary steps.
To avoid getting confusing errors (or worse yet, using outdated local
packages), `NgPackagesInstaller` now has an option to build the packages
before using them.
One caveat is that the build script does not currently work on Windows,
so a warning is printed instead, letting the user know they need to
(somehow) take care of it themselves.
NOTE 1: Since the build script is using bazel, running it should not be
expensive if the directory is up-to-date (i.e. no changes have
been made to source code after the last build).
NOTE 2: This commit adds support for `--build-packages`, but does not
change the default behavior (not building the packages). It will
be turned on in a subsequent commit.
PR Close#31985
- Change margin to the header so that the the label aligns with the header
- Make code in API pages pre-wrap so that you can see the actual text on the screen - helps with issue #27296
- Modified text to be title case in label API to be consistent with rest of app labels
- Removed unused table of contents SCSS file
- TOC SCSS file reorg cleanup
- Soften headers font-weight in API pages
- Make linenums ordered list inside code examples always show as numbers
PR Close#31013
- Update the `stackblitz.json` config files (used for generating
Stackblitz projects and ZIP archives) to include the correct files
(taking into account the current layout of the example projects).
- Update the boilerplate files for `testing` examples to match the
current layout of the example projects.
PR Close#31937
The generated StackBlitz project and ZIP archives are no longer used
(and they are broken anyway), so removing them altogether to avoid
confusion.
Note: Still keeping the example project, because that is referenced in
the `setup` guide.
PR Close#31937
This PR adds the following links to web.dev/angular:
1. Link to the guides in the resource section under "Online Training"
2. Links to code-splitting & preloading in the lazy-loading guide
3. Link to the accessibility guide on web.dev/angular
PR Close#31804
This commit changes the emit order of ngcc when a class has multiple static
fields being assigned. Previously, ngcc would emit each static field
followed immediately by any extra statements specified for that field. This
causes issues with downstream tooling such as build optimizer, which expects
all of the static fields for a class to be grouped together. ngtsc already
groups static fields and additional statements. This commit changes ngcc's
ordering to match.
PR Close#31933
PR #31839 contains perf and code cleanup changes that add 48 bytes to the
main bundle size. Perf gains and code clarity justify this increase.
Unfortunately the size verification job is rejecting this PR as it reports
size gains from a fixed size and not relative increase of size from a particular PR.
It was decided during the internal team discussion to bump up size limits to
correctly reflect current state of the master and increase from this PR.
PR Close#31839
The code example refers to `src/app/heroes/heroes.component.html` but its header was `src/app/hero.service.ts` which was obviously a mistake.
PR Close#31811
The `format` attribute is an artifact of an old version of the docs
tooling (before moving it into the angular/angular repo) and no longer
does anything. People are still copy-pasting it from existing examples.
This commit removes all occurrences of the `format` attribute on code
examples.
PR Close#31674
Previously, `linenums` defaulted to true if the content was more than 10
lines long and false otherwise.
Since in most cases linenums add unnecessary visual noise, this commit
changes `linenums` to always default to false (regardless of the size of
the content). It can be still be turned on by explicitly setting to true
or a number.
PR Close#31674
- Make docs cards expand to full width in smaller screen sizes.
- Reduce spacing around card container to match general spacing patterns seen in angular.io.
- Improve SCSS formatting.
PR Close#31576
This commit is the final patch of the ivy styling algorithm refactor.
This patch swaps functionality from the old styling mechanism to the
new refactored code by changing the instruction code the compiler
generates and by pointing the runtime instruction code to the new
styling algorithm.
PR Close#30742
This commit updates the necessary config files to run the angular.io and
docs tooling unit tests in random order (and fixes the tests that were
failing due to their dependence on the previous ordered execution).
Besides being a good idea anyway, running tests in random order is the
new [default behavior in jasmine@3.0.0][1], so this commit is in
preparation of upgrading jasmine to the latest version.
[1]: https://github.com/jasmine/jasmine/blob/v3.0.0/release_notes/3.0.md#breaking-changes
PR Close#31527
- Add more spacing to inputs.
- Correct placeholder colors in inputs.
- Add aria label to input for accessibility.
- Clean up layout styles and mobile view.
Fixes#31265
PR Close#31272
Previously, the `test-pwa-score` script would only check the `pwa`
score. (All categories were reported, but a min. score could only be
specified for `pwa`.)
This commit adds support for checking the scores on all available
categories (such as a11y, performance, seo, etc.).
PR Close#31414
This commit slightly improves the log outout of the `test-pwa-score`
script (e.g. by showing the total duration, indenting messages to group
them together, etc.). It, also, includes various minor refactorings.
These changes are in preparation of augmenting the script to support
checking the scores on all available categories (such as a11y,
performance, seo, etc.) in a subsequent commit.
PR Close#31414
This is slightly faster (15%-20%). Currently, this doesn't make a
noticeable difference, since the total time is 10s-15s, but it might
add up, if we decide to run audits on multiple pages.
PR Close#31414
The `ScrollService` sets up some global `window` listeners.
Previously, these listeners were never unregistered. This was not a
problem in the real app, because the `ScrollService` instance exists for
the lifetime of a user session. In tests, however, where the `window`
instance is among all tests, the listeners would survive the
`ScrollService` tests. This, in addition to the fact that we used a mock
`ViewportScroller` which did not return the expected type from
`getScrollPosition()`, caused errors to be thrown in unrelated tests
(i.e. whenever a scroll event was emitted on `window`). See [here][1]
for an example failure.
This commit fixes it by adding an `ngOnDestroy()` method that
unregisters the listeners and ensuring it is called after each
`ScrollService` test.
[1]: https://circleci.com/gh/angular/angular/381649
PR Close#31390
Previously, the `search-results` layout was switch from horizontal to
vertical at 480px. Yes, since some search queries can yield more than 5
`.search-area`s, even 600px are too narrow to accomodate a horizontal
layout.
This commit changes the breakpoint at which the layout switches to
vertical from 480px to 600px.
PR Close#31390
Previously, `.search-area` had a default style of `display: flex`, but
it was overriden to `display: block` in media queries for
`max-width: 480px` and `min-width: 600px`. As a result, it only had
`display: flex` between 481px and 599px.
Since no flex layout features are necessary inside `.search-area`, this
commit changes the style to always be `display: block` (i.e. the default
for `div` elements).
PR Close#31390
add e2e test for SVG template example
fix template syntax example app
- linting errors
- runtime exceptions
- template type errors
- deprecated type casting
- deprecated currency pipe example
Relates to #30559
PR Close#31356
Matias Niemelä
Judy Bogart
Kapunahele Wong
George Kalpakas
idzark
Tom Kwong
Trevor Karjanis
Phaneendra
Carlos Ortiz García
Leonardo Zizzamia
Dominik Pieper
Timar
Potapy4
alexzuza
John Ralph Umandal
AMarinov
Mirco Widmer
Alan
Tiep Phan
Kara Erickson
Kirk Larkin
Santosh Yadav
Issei Horie
Joey Perrott
Amadou Sall
Jordan Nelson
Ankit Prajapati
Aristeidis Bampakos
Gabor Szekely
Filipe Silva
Emmanuel DEMEY
Richard Lea
mgechev
Alex Rickabaugh
JiaLiPassion
Jordan Nelson
Syu Kato
Simon Kurtz
Daniel Waxweiler
EddyP23
Stefanie Fluin
Yann Bertrand
kristinavavrova
Pawel Kozlowski
Ben Elliott
Adrien Crivelli
katryo
Max Ivanov
Eneko Nieto
Jane Sandberg
Jonathan Pool
Eric Corson
Pete Bacon Darwin
istiti
Stephen Fluin
Ivan Tham
Tzvi Melamed
Rudolf Olah
Snehal Baghel
Michael Prentice
Philippe Martin
artem-galas
Brandon
Stepan Suvorov