improve the aio contributors card by aligning centrally the
contributor's name and adding some padding so that it doesn't
get too close to the card's edges
Note: the name's aligning was already present by wrongly removed in
PR #43355
PR Close#43844
webkit browsers show a cancel X icon in the input search on focus/hover
which allows to clear the content of the input, such icon has small
glitches/imperfections so use a mat-icon instead
(this also adds such icon to non-webkit browsers)
PR Close#43600
In 305d05545a, we accidentally stopped
instantiating the `SwUpdatesService` service, which meant that we were
no longer subscribing to ServiceWorker update events and proactively
checking for updates. We would still gets updates, because the
ServiceWorker automatically checks on each navigation request and when a
new ServiceWorker instance is created, but we would not proactively
fetch updates and also miss `unrecoverable` errors.
This commit fixes this by exposing an `enable()` method from
`SwUpdatesService`, which has to be explicitly called for the service to
be enabled, and ensures that the method is called when `AppComponent` is
initialized.
The commit also gets rid of the `SwUpdatesModule` (whose only purpose
was to provide `SwUpdatesService`) in favor of using `providedIn`.
Fixes#43695
PR Close#43766
Previously, we used to prepend version info to error messages by
updating their `message` property and their `stack` property. However,
due to the fact that on some browsers `error.stack` is lazily computed
based on `error.message` the first time the `stack` property is
accessed, this resulted in prepending the version info twice.
This commit ensures that the version info is only prepended to
`error.stack` once to avoid unnecessary repetition in error messages.
PR Close#43767
The way the Sass rule was defined previously resulted in invalid CSS of
the form:
```css
table > thead > { ... }
```
This, in turn, resulted in a build-time warning:
```
Warning: > styles.9a5a35b070498c08.css:3079:14: warning: Unexpected "{"
3079 │ table thead > {
╵ ^
```
This commit fixes the affected rule (mostly to avoid the warning,
because this change doesn't seem to have any visual difference). It also
fixes other rules that were currently not affected (because they only
had nested rules and no direct styles), but were susceptible to being
affected in the future.
PR Close#43767
prevent screen readers from falsely announcing "open_in_new" since they may not actually open new tabs/windows but simply send the current page to a domain outside angular.io
Fixes#43512
PR Close#43725
This commit updates angular.io to more closely align with new apps
created with the latest Angular CLI and remove redundant files/config
now that CLI has dropped support for differential loading.
PR Close#43686
Prefix error messages with the Angular version currently used in the
angular.io app. This applies to both errors logged to the console and
reported to Google Analytics and makes debugging certain errors easier.
PR Close#43686
some elements in the aio application are anchors or divs but behave
like buttons, it is semantically (and a11y) more correct to convert
them to actual button elements instead
PR Close#43601
when some auto code links fail to happen they can be added manually
with the md ``[`code text`](link)``, these generate anchor elements which
contain a code element, such code element does not get the correct text
color, this commit fixes such issue
PR Close#43586
Previously, anchor links that were supposed to point to fragments inside
the current page (e.g. `href="#something"`) would end up navigating to
the homepage (`/`). This was due to them being resolved relative to the
base URL, which is set to `/` (via `<base href="/">`). See also
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base#in-page_anchors.
This commit fixes this issue by handling such links specially in
`LocationService#handleAnchorClick()` and prepending the current path to
the URL.
This will also be useful for implementing a "skip to content" link as
described in #42936.
PR Close#43460
When using `ScrollService#scrollToElement()` to scroll to a specific
element, also focus the element if it is focusable (i.e. if it has a
`focus()` method).
This will be useful for implementing a "skip to content" link as
described in #42936.
PR Close#43460
Improve the accessibility of contributor cards (in `/about`) by making
them easier to navigate via keyboard:
- Show the (otherwise hidden) contributor info links on focus.
- Make the "View bio" link focusable via keyboard (to give a clearer
indication that users can click to view the bio - although technically
the click is handled by an ancestor).
- Make the flipped cards focusable via keyboard (so it is possible to
click them to unflip).
PR Close#43460
Improve the accessibility of button groups (such as those seen in
`/about` and `/resources` to choose between the different categories)
by making them easier to navigate via keyboard:
- Make the individual buttons focusable via keyboard.
(Previously, they were not focusable - despite being anchor elements,
because they were lacking an `href` attribute.)
- Give focused buttons a different style.
PR Close#43460
Improve the aio contributors page responsiveness regarding the browser's
font-size so that the page looks good regarding on font-size settings
(no cropped or cramped content)
PR Close#43355
Fix a Trusted Types violation in ServiceWorkerModule that occurs when
initializing the service worker from a string URL, by passing a
TrustedScriptURL instead.
PR Close#42800
Change SvgIconInfo.svgSource to be a TrustedHTML and update all its
users accordingly. Also introduce the svg template tag function for
building TrustedHTML from constant SVG sources.
PR Close#42800
Change the PrettyPrinter interface to accept a TrustedHTML and patch
prettify.js so that it makes use of that value without modification.
Update all users of the service to produce, and pass in a TrustedHTML.
PR Close#42800
Also introduce a dependency on the Trusted Types type definitions and a
Trusted Types polyfill, safevalues. Create a security module for common,
security-reviewed transformations into Trusted Types.
PR Close#42800
The Google Analytics snippet loads its runtime by dynamically creating a
script element and assigning a URL to its src attribute. This causes a
Trusted Types violation.
To fix this, create an inline Trusted Types policy called 'aio#analytics'
to bless the script URL, which is a trusted constant.
PR Close#42800
It seems that at some point (potentially with the switch to Webpack 5)
Webpack started using the full chunk name (instead of just a numeric
identifier) in `ChunkLoadError` messages. So the error messages changed
from:
```
ChunkLoadError: Loading chunk 2 failed.
```
...to:
```
ChunkLoadError: Loading chunk src_app_something_some_module_ts failed.
```
This commit updates the regex that is used to detect such errors (in
order to print ServiceWorker-related debug info) to correctly recognize
the new error message format.
PR Close#43088
With this commit, the `ErrorHandler` is notified of ServiceWorker
`UnrecoverableState` errors. The main purpose of this change is
gathering info about the occurrence (and frequency) of such errors in
Google analytics.
PR Close#42941
Previously, names of CLI commands that also happened to be keywords were
shown in black color in the code block demonstrating the command's
usage. This worked fine when in light mode (where the code block
background is white) but not in the recently introduced dark mode (where
the code block background is dark gray).
This commit fixes this by ensuring the `.kwd` token color is inherited
from its parent (which has an appropriate color for the current theme).
Previously, the `.kwd` token was reset to its initial value (which is
`black` regardless of the theme).
**Before:** ![CLI pages keyword before][1]
**After:** ![cli-pages-keyword after][2]
[1]: https://user-images.githubusercontent.com/8604205/126073803-af317f0c-d04f-4c3a-9a83-e92541d7dd5a.png
[2]: https://user-images.githubusercontent.com/8604205/126073806-1d57e3ed-90b1-4735-ae2a-d0a39862bb95.png
PR Close#42889
migrate aio to eslint as tslint has been deprecated, the migration is restricted to the aio app and
its e2e tests and does not include the other tools, for such reason both tslint and codelyzer have not
been removed (to be done in a next PR)
some minor tweaks needed to be applied to the code so that it would adhere to the new ESLinting behaviour
most TSLint rules have been substituted with their ESLint equivalent, with some exceptions:
* [whitespace] does not have an ESLint equivalent (suggested to be handled by prettier)
* [import-spacing] does not have an ESLint equivalent (suggested to be handled by prettier)
* [ban] replaced with [no-restricted-syntax] as there is no (official/included) ESLint equivalent
some rules have minor different behaviours compared to their TSLint counterparts:
* @typescript-eslint/naming-convention:
- typescript-eslint does not enforce uppercase for const only.
* @typescript-eslint/no-unused-expressions:
- The TSLint optional config "allow-new" is the default ESLint behavior and will no longer be ignored.
* arrow-body-style:
- ESLint will throw an error if the function body is multiline yet has a one-line return on it.
* eqeqeq:
- Option "smart" allows for comparing two literal values, evaluating the value of typeof and null comparisons.
* no-console:
- Custom console methods, if they exist, will no longer be allowed.
* no-invalid-this:
- Functions in methods will no longer be ignored.
* no-underscore-dangle:
- Leading and trailing underscores (_) on identifiers will now be ignored.
* prefer-arrow/prefer-arrow-functions:
- ESLint does not support allowing standalone function declarations.
- ESLint does not support allowing named functions defined with the function keyword.
* space-before-function-paren:
- Option "constructor" is not supported by ESLint.
- Option "method" is not supported by ESLint.
additional notes:
* the current typescript version used by the aio app is 4.3.5, which is not supported by typescript-eslint (the supported
versions are >=3.3.1 and <4.3.0). this causes a warning message to appear during linting, this issue should
likely/hopefully disappear in the future as typescript-eslint catches up
* The new "no-console" rule is not completely equivalent to what we had prior the migration, this is because TSLint's "no-console"
rule let you specify the methods you did not want to allow, whilst ESLint's "no-console" lets you specify the methods that you do
want to allow, so and in order not to have a very long list of methods in the ESLint rule it's been decided for the time being
to simply only allow the "log", "warn" and "error" methods
* 4 dependencies have been added as they have been considered necessary (see: https://github.com/angular/angular/pull/42820#discussion_r669978232)
extra:
* the migration has been performed by following: https://github.com/angular-eslint/angular-eslint#migrating-an-angular-cli-project-from-codelyzer-and-tslin
* more on typescript-eslint at: https://github.com/typescript-eslint/typescript-eslint
PR Close#42820
Previously, if there was more content than what would horizontally fit
in the main content area, it would overflow to the right and overlap
with the Table of Contents (ToC).
This was accidentally introduced in #42787.
This commit fixes it by ensuring that the main content area will not
overlap with ToC and the necessary space for the ToC will be reserved
using `margin` (instead of `padding`, which contributes to the element's
size).
Fixes#42867
PR Close#42884
Error-handling in AIO happens mainly in two places:
1. For errors happening inside the app we have a custom `ErrorHandler`
implementation, `ReportingErrorHandler`. `ReportingErrorHandler`
passes errors to the default `ErrorHandler` (for them to be logged to
the console) and also forwards them to `window.onerror()`.
2. Errors happening outside the app and errors forwarded by
`ReportingErrorHandler` are handled by `window.onerror()`, which in
turn reports them to Google analytics.
Previously, we were making some assumptions (which turned out to be
incorrect based on the info captured in Google analytics - see #28106):
- `ReportingErrorHandler` assumed that the errors passed to its
`handleError()` method would be either strings or `Error` instances.
_Apparently, other values (such as `null` or `undefined`) may also be
passed._
- `window.onerror()` assumed that if an `Error` instance was passed in,
it would always have a stacktrace (i.e. its `stack` property would be
defined).
_This is not necessarily true, although it is not clear (based on the
logs) whether reported errors of this type are caused by `Error`
instance with no stacktrace or by non-string error objects which are
incorrectly treated as `Error` instances.
This commit ensures that all types of error arguments can be handled
correctly, including `Error` instances with no stacktrace and other
types of objects or primitives.
NOTE:
PR #42881 is related as it fixes handling `null` and `undefined`
arguments in the default `ErrorHandler`.
Fixes#28106
PR Close#42883
Previously, on narrow pages where the sidenav was in `over` mode, the
sidenav's backdrop only covered the main docs content but not the
floating Table of Contents (ToC) on the right. This was inconsistent and
confusing to the user, because they could interact with the ToC and
scroll to different area of the main content while the sidenav and
backdrop were still covering the content.
This commit fixes it by ensuring the sidenav backdrop covers both the
main content and the floating ToC (when present).
Fixes#42778
PR Close#42787
This commit expands the info printed to the console to help diagnose
ServiceWorker issues to include the [internal debug info][1] retrieved
from `/ngsw/state`. This will provide more useful data, such as the
activated SW's version, state, clients, recent operations and any recent
errors.
NOTE:
This temporarily increases the payload size. Removing this code and
reclaiming the payload size is being tracked in #41117.
[1]: https://angular.io/guide/service-worker-devops#locating-and-analyzing-debugging-information
PR Close#42776
Fix a unit test warning due to Jasmine not realizing that
`httpMock.expectOne()` is an expectation.
[Example][1]:
> WARN: 'Spec 'DocumentService currentDocument should encode the request
> path to be case-insensitive' has no expectations.'
[1]: https://circleci.com/gh/angular/angular/1017640
PR Close#42776
make sure that the top-menu links don't get overlapped by
the search input, regardless on the browser's font-size and
the window's width
make also sure that the header's logo does not overlap the search
input on narrow windows, again regardless on the browser's font-size
PR Close#42753
Previously, the condition for showing the top-menu nav-menu in the
sidenav was the same as that for switching the sidenav mode from docked
(`mode: side`) to floating (`mode: over`). Therefore, the `isWide` input
of the corresponding `NavMenuComponent` could be hard-coded to `false`
(since the component would only be shown when the sidenav was in
floating mode).
In 61f6ed2fdf, these two desicions were
decoupled, which would result in the top-menu nav-item being shown in
the sidenav while the sidenav is in docked mode (and thus the `isWide`
input should be set to `true`).
This commit fixes it by setting the `isWide` input based on the value of
the `dockSideNav` property, as happens for the rest of the nav-menus.
PR Close#42747
Previously, the `AppComponent#showTopMenu` property was taken into
account when determining the `MatSidenav#mode` value. However, this was
redundant, because in the only case in which the use of `showTopMenu`
would make a difference (i.e. when `dockSideNav` was true and
`isSideNavDoc` was false) the sidenav would be closed and the hamburger
menu button would not be visible (thus there would be no way to open it
manually).
This commit simplifies the condition for determining the sidenav mode by
removing `showTopMenu` from the expression.
PR Close#42747
This commit applies the necessary changes to make angular.io and (most)
docs examples compatible with both RxJS v6 and v7. It also adds new
steps to relevant CI jobs to test angular.io and docs examples against
RxJS v7 as well (to catch potential regressions).
NOTE:
Some of the docs examples are not compatible with RxJS v7 and are
therefore excluded from the tests. The SystemJS-based ngUpgrade
examples in particular are excluded, since they require a different
SystemJS configs to run against RxJS v6 and v7 and the extra complexity
of managing that is not worth it for the 4 affected examples.
PR Close#42660
Previously, the color of `<summary>` elements was hard-coded to `black`.
This did not work well on the dark theme, where the background color of
the page is also very dark.
This commit fixes it by removing the explicit color style, thus letting
`<summary>` elements inherit the color of their container.
Closes#42616
PR Close#42620
PR #41129 reorganized the SCSS files of the angular.io app moving most
of them in sub-directories. Due to incorrectly resolved merge conflicts
for PRs targeting the SCSS files around that time, we ended up with
duplicate style files for `<code>` elements:
- `styles/2-modules/_code.scss`
- `styles/2-modules/code/_code.scss` +
`styles/2-modules/code/_code-theme.scss`
This commit gets rid of the extra file (`styles/2-modules/_code.scss`)
and ports any changes from it to the correct files inside the `code/`
sub-directory.
PR Close#42620
Previously, redirects had to be configured in both the Firebase config
(`firebase.json`) and the ServiceWorker config (`ngsw-config.json`).
This made it challenging to correctly configure redirects, since one had
to understand the different formats of the two configs, and was also
prone to getting out-of-sync configs.
This commit simplifies the process of adding redirects by removing the
need to update the ServiceWorker config (`ngsw-config.json`) and keep it
in sync with the Firebase config (`firebase.json`). Instead the
ServiceWorker `navigationUrls` are automatically generated from the list
of redirects in the Firebase config.
NOTE:
Currently, the automatic generation only supports the limited set of
patterns that are necessary to translate the existing redirects. It can
be made more sophisticated in the future, should the need arise.
PR Close#42452
dario-piotrowicz
