Updates to TypeScript 4.3.4 which contains a fix for a printer
regression that caused unexpected JavaScript output with our
compiler transforms.
See: https://github.com/microsoft/TypeScript/pull/44070.
Updates to TypeScript 4.3.4 which contains a fix for a printer
PR Close#42600
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
The ServiceWorker `navigationUrls` globs defined in `ngsw-config.json`
are supposed to exclude any URLs that are redirected on the server (as
configured in `firebase.json`). However, the list of redirected
URLs/globs in `firebase.json` and `ngsw-config.json` have gotten out of
sync.
This commit updates the globs in `ngsw-config.json` to match the ones in
`firebase.json`.
This is in preparation of automatically generating the ServiceWorker
`navigationUrls` based on `firebase.json`.
PR Close#42452
This commit sorts all `navigationUrls` in `ngsw-config.json`
alphabetically.
This is in preparation of automatically generating the ServiceWorker
`navigationUrls` based on `firebase.json`.
PR Close#42452
Previously, we were not consistent in allowing a trailing `/` in
`navigationUrls` globs in `ngsw-config.json`. And when we did, we used
two globs: one with and one without the trailing `/`.
This commit updates all appropriate `navigationUrls` globs to allow a
trailing `/`. It also merges the two glob patterns (the one with and the
one without the `/`) into one.
This is in preparation of automatically generating the ServiceWorker
`navigationUrls` based on `firebase.json`.
PR Close#42452
This commit removes some `navigationUrls` globs from `ngsw-config.json`
that have no effect. More specifically:
- It removes globs of the form `!/**/xyz.html`, since these are already
covered by the more generic `!/**/*.*` glob.
- It removes `!/api/**/NgFor`, since it does not have a corresponding
redirect rule in `firebase.json`.
This is in preparation of automatically generating the ServiceWorker
`navigationUrls` based on `firebase.json`.
PR Close#42452
Previously, only sub-paths, such as `api/http/foo`, were redirected to
`guide/deprecations#http`.
This commit ensures that also `api/http` itself (which used to point to
the `http` module's API page) is redirected as well.
PR Close#42452
This commit adds a test assertion to verify that all redirect rules
defined in `firebase.json` are tested, i.e. that each rule is applied to
at least one testcase from `URLS_TO_REDIRECT.txt`.
This will ensure that any redirect rules added in the future will be
tested.
PR Close#42452
Previously, the `destinations` test suite in
`testFirebaseRedirection.spec.ts` was nested under the
`with legacy URLs` test suite. However, the two suites are unrelated and
there is no reason to have them nested.
This commit moves the `destinations` test suite to be beside (instead of
inside) the `with legacy URLs` one.
PR Close#42452
This commit adds testcases in `URLS_TO_REDIRECT.txt` for all redirect
rules defined in `firebase.json`. This ensures that all rules are tested
and work as expected.
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
Previously, we only tracked the sizes of the eagerly loaded JS bundles.
However, the CSS styles (which also have a non-negligible size) must
also be downloaded and parsed by the browser, thus affecting the initial
rendering time.
This commit starts tracking the CSS styles payload sizes.
(Originally discussed in
https://github.com/angular/angular/pull/42584#discussion_r653787961)
PR Close#42584
This reverts commit 61ad68a586135a4d7b2b920fda0cb4238c6422fe, since there
are no longer any disambiguated paths that need special handling.
PR Close#42414
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
Previously, due to a bug in Firebase hosting, requests to
`/index.html?<query>` would lead to an infinite redirect and eventually
a failure. This affected, for example, cache-busting requests from the
ServiceWorker, which look like: `/index.html?ngsw-cache-bust=...`
For more details see
https://github.com/angular/angular/issues/42518#issuecomment-858545483
This commit temporarily works around the bug by explicitly redirecting
`/index.html?<query>` to `/?<query>`.
Fixes#42518
PR Close#42547
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
The approach for tables is more of an ad-hoc determination based on the
complexity of what's in them. If/when we enable formatting of markdown
files, that will also make the markdown format of tables easier to read
and more consistent.
fixes#23978
PR Close#42330
With this change we remove polyfills that are listed in suggested/mandatory but are not needed by Angular CLI users, since the Angular CLI will include these polyfills by default.
Closes#39793
PR Close#42263
As previously discussed in pull/31070 and issues/30486, this would be useful because it is often desirable to apply styles to fields that are both `ng-invalid` and `ng-pristine` after the first attempt at form submission, but Angular does not provide any simple way to do this (although evidently Angularjs did). This will now be possible with a descendant selector such as `.ng-submitted .ng-invalid`.
In this implementation, the directive that sets control status classes on forms and formGroups has its set of statuses widened to include `ng-submitted`. Then, in the event that `is('submitted')` is invoked, the `submitted` property of the control container is returned iff it exists. This is preferred over checking whether the container is a `Form` or `FormGroup` directly to avoid reflecting on those classes.
Closes#30486.
PR Close#42132.
This reverts commit 00b1444d12, undoing the rollback of this change.
PR Close#42132
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
This commit adds information to the view encapsulation guide that
describes the styling interactions between components that use differing
view encapsulation modes.
Closes#40715
PR Close#42397
Existing trusted collaborators link is not working and now link is updated to one of angular.io page also it was missing angular dev's link so added it.
Closes#42513.
PR Close#42516
Previously, the code-examples headers used in the
"Creating custom route matches" tutorial contained the name of the
example directory (`routing-with-urlmatcher`). This was confusing,
because the user was previously instructed to create an app named
`angular-custom-route-match` and switch to that directory.
This commit fixes it by removing the root directory name from the
headers, thus leaving the path of the file relative to the current
working directory. This also aligns with code-examples in other guides.
PR Close#42507
Since #42453, type-only imports are not considered for cyclic imports.
This commit adds a note to the NG3003 error documentation to mention
using type-only imports to avoid the error.
PR Close#42491
The `NO_ERRORS_SCHEMA` schema can be used to ignore errors related to unknown elements or properties, but since it suppresses these errors it may also hide real problems in a template. This commit updates the `NO_ERRORS_SCHEMA` docs to mention that.
Closes#39454.
PR Close#42327
This is based on a discussion we had a few weeks ago. Currently if a component uses `ViewEncapsulation.ShadowDom` and its selector doesn't meet the requirements for a custom element tag name, a vague error will be thrown at runtime saying something like "Element does not support attachShadowRoot".
These changes add a new diagnostic to the compiler that validates the component selector and gives a better error message during compilation.
PR Close#42245
Previously we didn't document what versions were supported. Since universal requires node.js I'm adding version
information into the guide as a informative callout.
Fixes#39436
PR Close#42375
Switches the repository to TypeScript 4.3 and the latest
version of tslib. This involves updating the peer dependency
ranges on `typescript` for the compiler CLI and for the Bazel
package. Tests for new TypeScript features have been added to
ensure compatibility with Angular's ngtsc compiler.
PR Close#42022
Previously, the critical CSS inlining optimization (which is turned on
by default in CLI v12+) was causing a Flash Of Unstyled Content (FOUC).
This was caused by the combination of the following facts:
- The way CSS inlining is implemented in the CLI makes loading the full
styles asynchronous and non-render-blocking (so the app can bootstrap
before the styles are fully downloaded).
- Angular.io does not employ the [app shell][1] pattern in order to
render pages at build time, resulting in very minimal CSS rules being
recognized as critical (for the purpose of inlining).
This commit fixes the FOUC by disabling the critical CSS inlining, while
we consider a better way to approach this (in order to be able to rip
the benefits of inlining without the FOUC).
[1]: https://angular.io/guide/app-shellFixes#42365
PR Close#42435
As previously discussed in pull/31070 and issues/30486, this would be useful because it is often desirable to apply styles to fields that are both `ng-invalid` and `ng-pristine` after the first attempt at form submission, but Angular does not provide any simple way to do this (although evidently Angularjs did). This will now be possible with a descendant selector such as `.ng-submitted .ng-invalid`.
In this implementation, the directive that sets control status classes on forms and formGroups has its set of statuses widened to include `ng-submitted`. Then, in the event that `is('submitted')` is invoked, the `submitted` property of the control container is returned iff it exists. This is preferred over checking whether the container is a `Form` or `FormGroup` directly to avoid reflecting on those classes.
Closes#30486.
PR Close#42132
This commit fixes one of the URLs used for testing the accessibility of
angular.io from `start-routing` to `start/start-routing`. The old URL is
not correct and result in a "Page not found" error.
This commit also increases some of the a11y scores.
PR Close#42462
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
We should primarily point readers to the stackblitz that contains the spec files and runs them.
The application stackblitz is secondary (and doesn't actually contain the spec files, which is confusing).
Fixes#38535
PR Close#42406
In the "Interceptor order" section of the HTTP guide there is a typo which incorrectly lists the same service twice when referring to two different services. The order that these services are listed is important, and this commit fixes the typo by listing the services in the correct order.
PR Close#42437
The documentation suggested that `@types/*` scoped packages would
automatically be recognized, however the CLI configures a project such
that the package has to be explicitly added to the TypeScript
configuration files.
Closes#37572
PR Close#42417
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 changes the `engines` rules in the root `package.json` as
well as the `package.json` used when working on docs example to also
accept Node.js versions greater than v14. This aligns them with
`aio/package.json` and allows using Node.js v15 and v16 (current) for
local development in the `angular/angular` repo.
Related to #42367.
PR Close#42387
Previously, the docs didn't say anything about the fact that the `novalidate` attribute is added to the enclosing form, or how to override that behavior. I have added a couple lines in the appropriate spot clarifying this issue.
PR Close#42377
Fixes#35373.
This changes the example from "run an arbitrary process" to "copy a file". This should make it a bit easier to follow, require less background knowledge to understand, and not use any platform-specific commands that won't work for Windows users.
The most glaring issue with this change is that this doc does not explictly specify how to build and run a builder. I've updated some of the files to hint at this a bit more (such as the `"implementation": "./dist/my-builder.js"`), but another pass is required to figure out the best way to compile a builder and how we want to structure this example to best communicate that.
PR Close#42371