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 61f6ed2fdfe58679cfada861624c759f1572a430, 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
Previously, the `NotificationComponent` would be hidden by reducing its
height to `0`. This allowed for a smoother hide animation when closing
the notification, but left the component's interactive elements
focusable via keyboard navigation. This was confusing for users, because
the focused elements would not be visible on the page.
This commit fixes the issue be also setting the `display` CSS property
to `none` when the `NotificationComponent` is hidden, thus ensuring that
its contents are not focusable via keyboard navigation.
(This does not affect the hide animation, since the `display` style is
not animatable and is only applied at the end of the animation.)
PR Close#42584
Previously, we included a dummy `MatIcon` element in `AppComponent` in
order to ensure that the `Material Icons` font would be requested (and
thus cached by the ServiceWorker) on every navigation. However, #41129
introduced the `ThemeToggleComponent`, which will be present on all
pages (since it is located in the top-menu) and relies on the
`Material Icons` font. Therefore, the work-around for loading the
`Material Icons` font is no longer necessary.
This commit removes the now redundant `MatIcon` from `AppComponent`.
PR Close#42584
This commit changes the anchor elements used for external links to
`MatIconButton`s. While the appearance remains the same (with the
exception of hover/focus styles), this better aligns the styling of
external link icons with other nearby icon buttons (i.e. the theme
toggle) and alows as to simplify the CSS for external links (since much
of their styling is handled by Angular Material).
PR Close#42584
Since we now use SVG for external link icons, there are no `<img>`
elements inside the anchor elements. So, the CSS rule does not match any
element and can be removed.
PR Close#42584
To avoid having content files that have the same file path on case-insensitive
file-systems, we now encode the paths to remove uppercase characters.
PR Close#42414
in order to have a consistent line-height between list items containing
text and list items containing links the anchors should inherit the list
item's line-height
PR Close#42572
make sure that the width of the sidenav chervon icon is 2.4rem
(this needs to be done using the flex property and not the
width one as that can change in flex containers)
also center chevron icon inside mat-icon container in order to maintain
the correct icon positioning at any font-size
PR Close#42561
Remove the fixed height set on the card elements present in angular.io,
allowing the cards to have a dynamic height derived from their content
and thus removing overflow issues related to the browser's font-size,
make other minor css related adjustments to allow the card to look good
on the different browser's font-size settings
PR Close#42533
This commit adds support for generating pages that document
special Angular elements, such as `ng-content` and `ng-template`,
which have special behavior in Angular but are not directives nor
components.
Resolves#41273
PR Close#41299
This commit adds a popup to angular.io to inform the user about the use
of cookies. Once the user confirms having read the info, the popup will
not be shown on subsequent visits.
This commit is partly based on angular/material.angular.io#988.
Fixes#42209
PR Close#42259
Previously, we had the same logic in a couple of places to safely access
the `Window`'s `local-/sessionStorage` and provide a no-op fallback if
necessary. Soon, we will need the same logic for the cookies popup
(see #42209).
This commit reduces code duplication by providing
`local-/sessionStorage` as injectables and sharing the logic for
accessing them safely. This also makes it easier to mock the storage in
tests without having to mess with the actual `Window` object.
NOTE:
This commit actually decreases the payload size in the `main` bundle by
40B.
PR Close#42259
due to unknown `<mat-icon>` element
This commit fixes some warnings in the unit tests of the
`ThemeToggleComponent`, which were caused by the following:
- The `<mat-icon>` element used in `ToggleThemeComponent`'s template was
not declared in tests.
- The `dark-theme.css` and `light-theme.css` files requested by
`ToggleThemeComponent` were not available.
PR Close#42259
This commit aligns the angular.io config files more closely to how a
newly generated CLI v12 app would look like. This helps validate the
setup and makes it easier to apply new chages in the future (by
preventing the angular.io layout from deviating too much from the
default new app layout).
PR Close#42259
A subsequent commit is going to change disambiguated URLs.
This commit prepares the AIO application to attempt the new URLs
if the old URLs fail. This will help to mitigate problems that may occur
during the period between deployment of the new version and the
service-worker not being updated.
PR Close#42509
Cleans up AIO's Sass files by:
* Switching them all over to the `@use`-based API from Angular Material.
* Removing the import of the Material theming API in a bunch of places that weren't using it.
* Migrating the new usages of Sass utility functions to the new syntax (e.g. `map.get` vs `map-get`).
* Fixing a few files that were using 4 spaces for indentation instead of 2.
PR Close#42442
This commit removes the `_typography-theme.scss` file that is currently
not used. The file contains a single Sass mixin
(`docs-site-typography-theme()`), which is never called.
PR Close#42396
This commit includes some minor refactorings and style changes as a
follow-up to PR #41129. (The changes were minor enough that didn't
warrant blocking the PR.)
PR Close#42396
This commit fixes some linting warning that were printed when running
`ng lint`. The warnings can be seen in the `lint` step of
[this CI job][1].
Most of the warnings were related to the deprecation of passing context
to Jasmine matchers in favor of using the [withContext()][2] matcher
(introduced in Jasmine v3.3.0).
[1]: https://circleci.com/gh/angular/angular/995543
[2]: https://jasmine.github.io/api/3.3/matchers.html#withContext
PR Close#42359
George Kalpakas
dario-piotrowicz
mgechev
codebriefcase
Pete Bacon Darwin
Alex Inkin
Kristiyan Kostadinov
AleksanderBodurri
