Previously, when switching angular versions through the
version selector in the sidenav, the query and hash is lost.
The user has to manually navigate to the original location again.
This commit fixes this issue and preserves the query and hash
when navigating between different versions.
Closes#24495
PR Close#35318
Light house was reporting that 'Ensure text remains visible during webfont load' solution to this problem was adding &swap to the end of web fonts this leads to our first text showing before web-font download and improves the performance of site link to article: https://web.dev/font-display/\?utm_source\=lighthouse\&utm_medium\=lr
PR Close#35352
On home page, image size set to 400px, which make the page not render
properly on devices below the size of 400px width.
Also, when search results were scrolled, they interfered with the top
nav items. Added border at the top of the search results container so
that the results are not visible under the nav items during scrolling.
PR Close#35098
Footer links did not have enough space between them, so lighthouse was
reporting that tap targets are not appropriately sized. Added the
required 8px space between links.
Also updated the margin of group headers accordingly.
Fixes#34901
PR Close#35098
https://angular.io/resources needs to be sturctured to be able to navigate to all resources with improved user experience. A lone scroll bar in this page will not help the reader a great deal in exploring the resources
Fixes#33526
PR Close#34756
On events page the header was not able to take full width when body exceeds viewport width of the screen So made the below body go overflow-x auto and resources page was taking 80% of the width which is okay on desktop but on mobile it should take 100% width put a media quer for it.
Fixes#34163
PR Close#34188
The search input has 50% width of the parent container in a focused
state for the big break point (> 1000px). In this case when window width
is between 1000px and 1115px the search input shrinks from 180 to
~123px. The width of the search input was increased to 80% so that when
focused its width expands from 180 to 196px when window size is 1000px.
Fixes#33305
PR Close#33804
By clearing `sessionStorage` and unsubscribing from `Location` events,
after each test, we reduce the possibility of potential
[spooky action at a distance][1]-type of failures in the future.
This does not have an impact on the actual app, since `ScrollService` is
currently expected to live throughout the lifetime of the app. Still,
unsubscribing from `Location` events keeps the code consistent with how
other `ScrollService` listeners are handled (e.g. for `window` events).
[1]: https://en.wikipedia.org/wiki/Action_at_a_distance_(computer_programming)
PR Close#33937
`ScrollService` subscribes to global `window` events and mutates global
state in the listener (e.g. read/write values from/to `sessionStorage`).
Therefore, we need to always call its `ngOnDestroy()` method to
unsubscribe from these events after each test.
In f69c6e204, a new testcase was introduced that was not destroyed. As a
result, random failures started to randomly happen in other, unrelated
tests ([example CI failure][1]).
This commit fixes this by ensuring all `ScrollService` instances are
destroyed after each tests (provided that they are created with the
`createScrollService()` helper).
[1]: https://circleci.com/gh/angular/angular/533298
PR Close#33937
Whenever cookies are disabled in the browser, `window.sessionStorage` is not avaialable to the app (i.e. even trying to access `window.sessionStorage` throws an error).
To avoid breaking the app, we use a no-op `Storage` implementation if `window.sessionStorage` is not available.
Fixes#33795
PR Close#33829
Reference #33259
Removes figures elements as AIO is not typically using captions or image groups where figures would be necessary or appropriate
PR Close#33748
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").
This PR implements those styles defined in PR#28396.
PR Close#33259
Previously, when navigating to a new page via a link, the scroll
position was correctly restored to 0, but navigating to a new page via
typing the URL in the browser address bar keeps the old scroll position.
This commit ensures that the scroll position is restored to 0 whenever
the `ScrollService` is instantiated anew (i.e. new page navigation). The
old behavior of retaining the scroll position on reload is kept by
storing the old URL when leaving a page and only applying the stored
scroll position if the new URL matches the stored one.
Fixes#33260
PR Close#33344
Prior to this fix, all style/class bindings (e.g. `[style]` and
`[class.foo]`) would quietly update a binding value if and when the
current binding value changes during checkNoChanges.
With this patch, all styling instructions will properly check to see
if the value has changed during the second pass of detectChanges()
if checkNoChanges is active.
PR Close#33103
Prior to this change, a static attribute that corresponds with a
directive's input would not be type-checked against the type of the
input. This is unfortunate, as a static value always has type `string`,
whereas the directive's input type might be something different. This
typically occurs when a developer forgets to enclose the attribute name
in brackets to make it a property binding.
This commit lets static attributes be considered as bindings with string
values, so that they will be properly type-checked.
PR Close#33066
In #33066 a limitation of Ivy's template type checker was fixed, where
all directive inputs would incorrectly allow `undefined` to be passed,
even when the input's type did not allow for it. Due to the fix, some
additional type errors were uncovered in AIO, where potential
`undefined` values would be passed to inputs that were not typed to
allow `undefined`.
PR Close#33066
Previously, some spies in `DovViewerComponent` tests would return the
same `of(undefined)` observable for all invocations of the spy in a
test. While there is usually only one invocation per spy in each test,
this is not always the case. In case of multiple invocations within the
same test, subsequent calls would return an already completed
observable, which deviates from the actual behavior of the spied
function.
This commit fixes it by ensuring a fresh `of(undefined)` observable is
returned on each invocation.
PR Close#32980
`System.import()` has been deprecated in webpack and produces the
following warning when building the app:
```
WARNING in ./src/app/custom-elements/code/pretty-printer.service.ts
System.import() is deprecated and will be removed soon. Use import()
instead.
```
Switching to `import()` to get rid of the warning.
Fixes#30365Closes#30419
PR Close#32923
In 1c3ee4190, the `getting-started` guide/tutorial was renamed to
`start`, but the corresponding CSS class that controls the display of
the top-left hamburger (and it automatically derived based on the URL)
was not updated.
This commit updates the class to ensure that the hamburger is not hidden
when navigating to the getting started guide.
PR Close#32941
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
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
- 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
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 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
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
In #31118, some vendor-specific selectors were combined in one rule-set.
As pointed out in [this comment][1], this would result in the whole
rule-set being ignored by all browsers, since one invalid/unrecognized
selector invalidates the declaration block.
This commit fixes it by defining a separate rule-set per selector. The
list of vendor-specific selectors is also adjusted to better target the
currently supported browsers.
[1]: https://github.com/angular/angular/pull/31118/files#r296923652
PR Close#31252
To avoid showing outdated info (such as events, resources, etc.) but
still allow people to see docs for older versions, we redirect
non-documentation URLs to `/docs`. Recently(-ish) we have added
documentation content under the `/cli/...` and `/start/...`
path-prefixes, but we haven't added them to the list of documentation
URLs that should not be redirected. As a result, on archive deployments
(e.g. https://v7.angular.io/cli), they are redirected to `/docs`, making
it impossible to see the documentation for these versions (unless you
know about the `?mode=stable` work-around).
This commit fixes it by adding `cli` and `start` to the list of
documentation URLs that are excluded from redirection.
PR Close#30894
In View Engine, NgModule factories are created for each NgModule and loaded when the module is requested. Ivy doesn't generate the
factories by design and only loads the module class, so it must be compiled after being loaded.
PR Close#30704
This commit makes the static flag on @ViewChild and @ContentChild required.
BREAKING CHANGE:
In Angular version 8, it's required that all @ViewChild and @ContentChild
queries have a 'static' flag specifying whether the query is 'static' or
'dynamic'. The compiler previously sorted queries automatically, but in
8.0 developers are required to explicitly specify which behavior is wanted.
This is a temporary requirement as part of a migration; see
https://angular.io/guide/static-query-migration for more details.
@ViewChildren and @ContentChildren queries are always dynamic, and so are
unaffected.
PR Close#30639
This commit also changes the config files and their layout to
(reasonably closely) match what the cli would generate for a new app.
Related Jira issue: [TOOL-815](https://angular-team.atlassian.net/browse/TOOL-815)
PR Close#29926
The supposedly visually hidden `mat-icon` creates unnecessary space at
the bottom of the page (below the footer) in recent Chrome versions.
This didn't happen before and it still doesn't happen in other browsers
(Firefox, Edge, IE).
This commit fixes it by wrapping the icon in a visually hidden `div`
container, which doesn't have other styles (such as `mat-icon` does)
that could affect the layout of the page.
Fixes#28858
PR Close#28864
There is no debouncing when we store the scroll Position.
Currently, we have a message in the console after a while:
>Throttling history state changes to prevent the browser from hanging
see: https://bugs.chromium.org/p/chromium/issues/detail?id=786211 for more informations
PR Close#28368
Currently, when we navigate in the `CLI COMMANDS` section, the "hamburger button" isn't present because the class css `folder-cli` is missing.
This PR add this class in order to show this button when we are in this section.
PR Close#28418
Show top menu at 992px screen width. The JS expression was checking just for screen widths
strictly greater than 992px to show the menu, while the CSS media query was showing the hamburger
icon just for screen widths strictly smaller than 992px, so there was a gap of 1px that the user
could't navigate through the top menu.
closes#24324
PR Close#26418
The `.properties-table` selector does not match any element and the
styles don't look relevant for the similarly named `.property-table`
class.
PR Close#28104
We need to do this because we don't yet have a released version of angular
with typescript 3.2 support and on CI we test both against the snapshot and
whatever is in aio/yarn.lock.
Once we have the next rc or a stable relase we should be able to remove
this flag.
PS: I also removed the preserveWhitespace:false because that's the default now.
PR Close#27536
It's unclear why `import as` results in the aliases to be undefined.
Plain tsc seems to do the right thing and emits the correct code, so it
might be some kind of interaction in @angular/cli or webpack that are
causing the failure.
This should be investigated separately from the tsc update in
angular/angular. See angular/angular-cli#13212
PR Close#27536
the clickable region of the top menu item is expanded beyond the focused area, so the clickable area is spans the entire height of the navigation
fixes#27618
PR Close#27633
the clickable region of the top menu item is reduced to the focused area, so no cursor pointer is shown outside the clickable area
fixes#27618
PR Close#27620
The `FETCH_ERROR` document is used when we are unable to retrieve a
document (except for 404 errors), which includes when there is no
internet connection. Using the `<current-location>` element in the
document's template to show the path of the page we failed to retrieve
assumes that the element's bundle is available (e.g. cached by the SW)
or can be fetched from the server.
When none of these conditions is met, the `DocViewer` is unable to
prepare the document and fails, never showing the `FETCH_ERROR` page to
the user.
Furthermore, the path we are looking to retrieve via
`<current-location>` is essentially the document ID, which we already
have. Thus, loading and instantiating a whole component just for that is
overkill.
This commit addresses both issues by getting rid of the
`<current-location>` component and directly embedding the document ID
into the `FETCH_ERROR` content.
PR Close#27250
When using relative paths for CSS resources (such as background images),
`@angular/cli` will move them to the root `dist/` directory (and update
the paths in CSS accordingly). This results in the SW being unable to
cache the resource, because it is not where it expects it to be.
This commit fixes this issue for the footer background image, by using
an absolute path for the URL. (It also removes an unused style that
would have been affected by the same issue.)
PR Close#27250
In order for 'Material Icons' to work offline, their `.woff2` file needs
to have been cached by the SW. This file is not requested by the
browser, until an element needs to use the icon font.
In order to speed up the initial page load and avoid FOUC, we use
inlined SVGs for all icons in the app shell. As a result, the `.woff2`
file may not be requested, when a user visits angular.io. If they go
offline before visiting a page that does actually use 'Material Icons',
then such icons will not work correctly (e.g. the `error_outline` icon
used in the error page for failed requests due to network
unanvailability).
This commit fixes this, by adding a non-visible element that needs the
'Material Icons' font on the main component. Thids ensures that the
`.woff2` file will always be loaded, even if the page does not use any
material icons.
(Note: The element is inserted lazily to avoid affecting the initial
rendering.)
PR Close#27250
These icons are part of the app shell and used on every load (on both
desktop and mobile). Inlining them ensures they are rendered asap.
PR Close#27250
Previously, we did not load the Roboto font, instead relying on the user
to have it available on their system and falling back to different fonts
otherwise. This resulted in the page being styled slightly differently
for those people that didn't have the font installed locally.
PR Close#27250
* Make individual overloads collapsible
* Show only the first overload expanded, rest collapsed
* Text changes to 'collapse all' once 'show all' is clicked
* Fix chevron/carrot rotation animation when overloads / overload item is expanded or collapsed
PR Close#24976
Previously CLI was being treated like the API page, where the top level item
had to be highlighted for any command page. But now the CLI commands all
have their own navigation item, which can be selected, so there is no need
to special case CLI paths any more.
Closes#26373
PR Close#26388
If the documentation contains a `@selectors` tag then the content of that
is used to describe the selectors of a directive.
Otherwise the selector string is split and each selector is listed as
a list item in an unordered list.
PR Close#25768
When we have navigated to the site via a URL that contains a search
query param, the site shows the search results.
We want to remove that query param from the URL when the search
results are closed, but the current implementation is also removing
other query params unnecessarily.
Now only the search param is removed when the search results are
closed.
See https://github.com/angular/angular/pull/25479/files#r219497804
for more context.
PR Close#26056
All directives and pipes must now be tagged with one ore more
public NgModule, from which they are exported.
If an item is exported transitively via a re-exported internal NgModule
then it may be that the item appears to be exported from more than
one public NgModule. For example, there are shared directives that
are exported in this way from `FormsModule` and `ReactiveFormsModule`.
The doc-gen will error and fail if a directive or pipe is not tagged correctly.
NgModule pages now list all the directives and pipes that are exported from it.
Directive and Pipe pages now list any NgModule from which they are exported.
Packages also now list any NgModules that are contained - previously they were
missed.
PR Close#25734
Enables Chrome users to search angular.io and its subdomains from the browsers navigation bar.
Not sure if compatible with Firefox yet.
The queried term in the URL is removed after closing the search-results.
PR Close#25479
AIO is currently using a beta version of @angular/service-worker.
Since that was implemented, the SW has been rewritten and released
as part of Angular 5.0.0. This commit updates AIO to use the latest
implementation, with an appropriate configuration file that caches
the various AIO assets in useful ways.
PR Close#19795
This change generalises the notification bar rendering to allow
more complex content to be displayed.
Now you must provide the full HTML of the notification message
when using `<aio-notification>`.
Also you can control whether clicking the content triggers the
notification to close or not.
This will support the new notification specified in "Other Items : 3" of
[#24140](https://github.com/angular/angular/issues/24140#issuecomment-397480410)
PR Close#25020
This change adds Github edit and view links to methods
and decorator options.
It is possible to add these to properties also but the
UI is rather tight as these are displayed in a table.
PR Close#24000
This commit includes two changes:
1. It changes the unreliable dynamic way of loading IE polyfills to use
`<script nomodule>` instead - for IE it's equivalent to a regular script tag
while modern browsers will ignore it.
2. It removes other polyfills for browsers not supporting `Object.assign` as
this API is supported by Chrome 45+, Firefox 34+ and Safari 9+ i.e. it's been
supported for some time.
Note that as of June 2018 Googlebot uses Chrome 41 to render sites to be
indexed. Chrome 41 doesn't support `Object.assign` but it also doesn't support
ES6 modules so it'll load polyfills meant for IE - which it should do anyway
as it doesn't support most of ES6.
Fixes#23647
PR Close#24317
On narrow screens (where there is not enough room on the right to show
the floating ToC), an embedded ToC is shown (via an `<aio-toc embedded>`
element in the document). Since ToC was not a custom element, the
component was not instantiated for the embedded element.
This commit fixes it by making `aio-toc` a custom element and loading it
manually for the floating ToC (if necessary).
PR Close#23944
With `plnkrs`, we used to choose a different plnkr mode (normal vs
embedded) based on the size of the screen. This affected the layout of
the plnkr page ("embedded" plnkr mode was usable on small screens, while
"normal" mode wasn't). This is not to be confused with the live-example
mode we use today to determine whether the live-example should be a link
(that open StackBlitz on a new page) or embedded into the document
(using an iframe).
Since we no longer need to change the live-example URL based on the
screen size, there is no need to listen for rezise events on Window. The
necessary properties can be computed once and certain variables are
obsolete.
PR Close#23960
Previously, it was possible to set the live-example title as content in
the `<live-example>` element. This relied on our custom loader
functionality that extracted the content from the DOM element before
passing it to the Angular compiler and stored it on a property for later
retrieval.
Since we switched to custom elements (and got rid of the custom loader),
the property is no longer populated with the contents. As a result, many
live examples show the default title ("live example") instead of the one
specified as content.
This commit fixes it by projecting the content into an invisible node
for later retrieval (similar to what we do in other components, such as
the `CodeExampleComponent`).
PR Close#23960
This commit also waits for the app to stabilize, before starting to
check for ServiceWorker updates. This avoids setting up a long timeout,
which would prevent the app from stabilizing and thus cause issues with
Protractor.
PR Close#22483
This change adds:
* an impure badge for Pipes that are marked as `pure: false`
* a pipe specific overview that shows the syntax for using a pipe in a template.
* an "input value" section describing the type of the value that the pipe expects.
* a "pipe params" section describing any additional params that a pipe expects.
PR Close#22702