The server used for testing on localhost has less optimizations (e.g.
serves uncompressed files), so we need to wait longer the ServiceWorker
to be loaded and registered to allow Lighthouse to reliably detect it,
especially on slower environments (e.g. CI).
Related: https://github.com/GoogleChrome/lighthouse/issues/5527#issuecomment-483710849Fixes#29910
PR Close#29953
As of b9fead7f8, the image is referenced in `announcements.json`, but it
was already removed (as it wasn't used at the time) in 7f905da33.
PR Close#29902
We are using `chrome-launcher` and `lighthouse-logger` in
[test-pwa-score][1], but we do not explicitly list them as
`devDependencies`, so we are relying on the fact that they happen to be
hoisted in `node_modules/` by yarn. This may unexpectedly break in the
future.
This commit fixes this, by explicitly listing them as `devDependencies`.
[1]: https://github.com/angular/angular/blob/ea70d41ac/aio/scripts/test-pwa-score.js#L14-L18
PR Close#29904
The `Δ` caused issue with other infrastructure, and we are temporarily
changing it to `ɵɵ`.
This commit also patches ts_api_guardian_test and AIO to understand `ɵɵ`.
PR Close#29850
1) Path mappings are to be added in the workspace tsconfig files, hence the path needs to be `./` and not `../`
2) Fix export symbol as it cannot contain `-`
Fixes#29807
PR Close#29810
The `announcements.json` file should not be included in the sitemap and
including it causes an error in Google Search Console (because the
generated URL does not exist).
(This is a follow-up to fbef94a8e.)
PR Close#29754
Now, one can add an `@alias` tag to API docs, which tells dgeni that this
API element (usually a `const`) is really just an alias for some API element
defined elsewhere.
Dgeni will then look up this API element and copy over the properties from
the alias to the current doc.
For example, we would like to privately export an Enum from `@angular/core`
but then publicly export this from `@angular/common`:
**packages/core/private_exports.ts**
```ts
/**
* Description of this document.
*/
export enum ɵSomeEnum { ... }
```
**packages/common/public_api.ts**
```ts
import {ɵSomeEnum} from '@angular/core';
/**
* @alias core/ɵSomeEnum
*/
export const SomeEnum = ɵSomeEnum;
```
In the generated docs there will be a page for `common/SomeEnum`, which
will be rendered as an enum, rather than a const, showing the description
extracted from the `core/ɵSomeEnum`.
---
The implementation of this feature required some refactoring of the other
processing:
1. Previously `ɵ` prefixed exports were not even considered.
2. Due to 1. some processors needed to have guards added to ignore such
private exports (`addMetadataAliases` and `checkContentRules`).
3. The processing of package pages had to be reworked (and split) so that
it picked up the aliased export docs after their alias proeprties had
been copied.
See FW-1207, FW-632, #29249
PR Close#29673
Currently our plan is to skip the publish, docgen, and update steps for this package.
During RC, we'll determine if the breaking change is too difficult for users, in which case we might restore the package for another major.
PR Close#29550
Previously we had to share code between upgrade/dynamic and upgrade/static
by symlinking the `src` folder, which allowed both packages to access
the upgrade/common files.
These symlinks are always problematic on Windows, where we had to run
a script to re-link them, and restore them.
This change uses Bazel packages to share the `upgrade/common` code,
which avoids the need for symlinking the `src` folder.
Also, the Windows specific scripts that fixup the symlinks have also
been removed as there is no more need for them.
PR Close#29466
One of the tests introduced in #29601 is susceptible to a kind of
WebDriver flake related to trying to click elements hidden behind fixed
positioned elements.
This commit works around the issue by clicking the elements directly
using JavaScript (instead of `WebElement#click()`).
PR Close#29641
Previously, if the shape of data in `contributors.json` was incorrect,
there would be a runtime error (when trying to parse the data), which
would result in a blank page. The likelihood for this happening is
higher after #29553, where the shape of data changed.
This commit adds some basic e2e tests that verify the page works as
expected and there are contributors listed.
PR Close#29601
PhantomJS is [not being developed any more][1] and with modern
alternatives (such as Chrome headless) there is no reason to keep it as
a dependency.
[1]: https://github.com/ariya/phantomjs/issues/15344
PR Close#29611
Now that "Collaborators" is a separate group in the contributors page,
having "Angular Collaborators" as the heading of the page (which also
contains the "Angular" and "GDE" groups) is confusing.
Changing the title to "Angular Contributors" to avoid confusion.
PR Close#29553
The name of the group also serves as the group tab's title in the docs
app and having "Collaborator" (singular) as a title for a list of people
didn't read well.
Changing th group name (and thus tab title) to "Collaborators" (plural).
PR Close#29553
When I tried one of the examples provided in the documention, encountered the " Can't bind to 'ngModel' since it isn't a known property of 'select' ” error. So to resolve it I imported the FormsModule in ngModule. If it is mentioned in the documentation, it would be handy for the beginners to try and learn. Thanks for considering.
Duplicate of pull Request# 29206, As I encountered few issues after multiple authors corrected, So I am creating the new pull request
PR Close#29522
The API changes are due to enabling strict checks in TypeScript (via `strict: true`).
The payload size changes in `polyfills.js` are due to more browser APIs being patched in recent versions (e.g. `fetch`, `customElement v1`).
PR Close#28219
Sometimes, in ESM5 code, aliases to exported variables are used internally
to refer to the exported value. This prevented some analysis from being
able to match up a reference to an export to the actual export itself.
For example in the following code:
```
var HttpClientXsrfModule = /** @class */ (function () {
function HttpClientXsrfModule() {
}
HttpClientXsrfModule_1 = HttpClientXsrfModule;
HttpClientXsrfModule.withOptions = function (options) {
if (options === void 0) { options = {}; }
return {
ngModule: HttpClientXsrfModule_1,
providers: [],
};
};
var HttpClientXsrfModule_1;
HttpClientXsrfModule = HttpClientXsrfModule_1 = tslib_1.__decorate([
NgModule({
providers: [],
})
], HttpClientXsrfModule);
return HttpClientXsrfModule;
}());
```
We were not able to tell that the `ngModule: HttpClientXsrfModule_1` property
assignment was actually meant to refer to the `function HttpClientXrsfModule()`
declaration. This caused the `ModuleWithProviders` processing to fail.
This commit ensures that we can compile typings files using the ESM5
format, so we can now update the examples boilerplate tool so that it
does not need to compile the ESM2015 format at all.
PR Close#29092
Now that we are using package.json properties to indicate which
entry-point format to compile, it turns out that we don't really
need to distinguish between flat and non-flat formats, unless we
are compiling `@angular/core`.
PR Close#29092
You can now specify a list of properties in the package.json that
should be considered (in order) to find the path to the format to compile.
The build marker system has been updated to store the markers in
the package.json rather than an additional external file.
Also instead of tracking the underlying bundle format that was compiled,
it now tracks the package.json property.
BREAKING CHANGE:
The `proertiesToConsider` option replaces the previous `formats` option,
which specified the final bundle format, rather than the property in the
package.json.
If you were using this option to compile only specific bundle formats,
you must now modify your usage to pass in the properties in the package.json
that map to the format that you wish to compile.
In the CLI, the `--formats` is no longer available. Instead use the
`--properties` option.
FW-1120
PR Close#29092
This guide is to help third party administrators to collect usage analytics
gathering for their own users with their own Google Analytics dashboard. It
is not meant for a generic audience.
PR Close#29382
The instructions lead you to think you run this step before setting
up your locale. The command is mentioned further in the guide after
setup is complete.
Closes#26052
PR Close#29313
With 63fb6c08cf1d69f912a0a4e9a28846d6e6985d04, the bug that required
us to temporarily disable these two SystemJS JIT tests has been fixed.
Therefore we can re-enable these tests.
PR Close#29083
It is useful for manually checking that all guides/examples/images have
owners in `.github/CODEOWNERS`, but is not used for automatic
verification (e.g. on CI) for now.
PR Close#28597
- remove individuals from @angular/* package.json, we don't keep them up-to-date
- switch keys in contributors.json to GitHub handles, seems like a better identifier and lets us grab avatar images from GitHub account
- move emeritus ppl to a new Alumni group (won't yet appear on the site)
- add "lead/mentor" keys so we know who is coordinating work
- add a script that generates an "org chart" graphic
PR Close#28930
Currently when building AIO with Ivy, we run Ngcc and transform
all found formats. This potentially slows down the build (and
therefore the "test_aio_local_ivy" job). Since it's not necessary
to build all formats, and we only need "fesm5" and "fesm2015",
we can explicitly specify the required formats.
**Note**: Currently this does not have any big effect, because Angular
Material does not ship ES2015/ES5 files. The change primarily just
suppresses the Ngcc messages for Material not providing ES2015/ES5
entry-points.
Technically if new non-Ivy packages are added to AIO, this
speeds up the build as we don't build the unused formats.
PR Close#29117
As a side effect of 09b34bae8655d4251516655c317b150c46cd3653,
we fixed that the docs systemjs examples currently do not run
with Ivy in JIT mode. This now uncovered new failures with the JIT
resource loading. e.g.
```
zone.js:665 Unhandled Promise rejection: Component 'PhoneListComponent' is not resolved:
- templateUrl: ./phone-list.template.html
Did you run and wait for 'resolveComponentResources()'? ; Zone: <root> ; Task: Promise.then ; Value: Error: Component 'PhoneListComponent' is not resolved:
- templateUrl: ./phone-list.template.html
Did you run and wait for 'resolveComponentResources()'?
at Function.get (directive.ts:54)
at getComponentDef (definition.ts:648)
at verifyDeclarationsHaveDefinitions (module.ts:185)
at Array.forEach (<anonymous>)
at verifySemanticsOfNgModuleDef (module.ts:159)
at Function.get (module.ts:132)
at getInjectorDef (defs.ts:181)
at R3Injector.processInjectorType (r3_injector.ts:230)
at eval (r3_injector.ts:114)
at eval (r3_injector.ts:451) Error: Component 'PhoneListComponent' is not resolved:
```
We temporarily disable these two failing SystemJS examples by adding them to the
`fixmeIvyExamples` list.
PR Close#28984
Currently when adding the example boilerplate to all
examples with Ivy enabled, we run Ngcc and transform
all found formats. This potentially slows down the build and
is not necessary as we only need the "fesm5" and "fesm2015" bundles.
PR Close#28984
Angular supports using <style> and <link> tags inline in component
templates, but previously such tags were not implemented within the ngtsc
compiler. This commit introduces that support.
FW-1069 #resolve
PR Close#28997
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
This should be `ngsw.json` not `ngsw-config.json` as the latter is only the src file that gets then compiled into the `ngsw.json` and placed into the `dist` folder
PR Close#28832
Updating the doc to add the beginning label.
I'm not sure if this was the way it was intended, but it looked strange with just an ending </label> tag.
PR Close#28602
This guide is not being shown publicly, and its test is currently being ignored.
Instead of deleting this test and guide, it may be repurposed in the future for a local development guide.
PR Close#28592
Previously, `ng-packages-installer` would replace the version ranges for
all dependencies that were peer dependencies of an Angular package with
the version range used in the Angular package. This effectively meant
that the pinned version (from `yarn.lock`) for that dependency was
ignored (even if the pinned version satisfied the new version range).
This commit reduces non-determinism in CI jobs using the locally built
Angular packages by always using pinned versions of dependencies for
Angular package peer dependencies if possible.
For example, assuming the following versions for the RxJS dependency:
- **aio/package.json**: `rxjs: ^6.3.0`
- **aio/yarn.lock**: `rxjs@^6.3.0: 6.3.3`
- **@angular/core#peerDependencies**: `rxjs: ^6.0.0`
...the following versions would be used with `ng-packages-installer`:
- Before this commit:
- **aio/package.json**: `rxjs: ^6.0.0`
- **node_modules/rxjs/**: `6.4.0` (latest version satisfying `^6.0.0`)
- After this commit:
- **aio/package.json**: `rxjs: ^6.3.0`
- **node_modules/rxjs/**: `6.3.3` (because it satisfies `^6.0.0`)
PR Close#28510
`ng-packages-installer` can be used to replace Angular packages with
locally built ones (from `dist/packages-dist/`) along with their peer
dependencies.
Previously, in order to achieve this, `yarn install` was called with the
`--no-lockfile` option, which resulted in installing the latest versions
of all dependencies (including transitive ones) permitted by the
corresponding version ranges in `package.json` files. As a result, newly
released versions would be picked, resulting in unexpected,
non-deterministic breakages in CI.
This commit calls `yarn install` with the `--pure-lockfile` option
instead. As a result, only the Angular packages (for which the locally
built ones are used) and their peer dependencies are unpinned; the
pinned versions from `yarn.lock` are used for all other (direct and
transitive) dependencies.
While this does not eliminate non-determinism across builds, it
significantly reduces it.
PR Close#28510
Since b43f8bc7d, RxJS does not need to be patched any more in the
top-level `node_modules/`, so we don't need to special-case RxJS in
`ng-package-installer` and use `node_modules/rxjs/`.
PR Close#28510
The docs don't mention that the app will never be stable if a `setInterval` is running somewhere, and that it will prevent the servcie worker to be registered too.
PR Close#28102
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 our version of Yarn is installed through
the "circleci/node" docker image. This is problematic
because in order to be able to update Yarn, we always
need to update the docker image to a version that
comes with the desired Yarn version. Sometimes there
is no docker image with the desired latest Yarn version,
and therefore we cannot easily update the Yarn version.
Additionally updating the docker image also means that
we need to update our version of NodeJS, as well as the
version of `openssl` might have changed (meaning that
our encrypted credential files may not be decodable with
the new version of `openssl`)
PR Close#28546
By default, `webdriver-manager update` will download the latest
ChromeDriver version, which might not be compatible with the Chrome
version included in the [docker image used on CI], causing CI failures.
Previously, we used to pin the ChromeDriver version on CI in
[ngcontainer's Dockerfile][2]. This was accidentally broken in #26691,
while moving from ngcontainer to default CircleCI docker images.
This commit fixes the issue by pinning ChromeDriver to a known
compatible version.
[1]: bfd48d156d/.circleci/config.yml (L16)
[2]: bfd48d156d/tools/ngcontainer/Dockerfile (L63)
PR Close#28494
## PR Checklist
Please check if your PR fulfills the following requirements:
* [x] The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
* [ ] Tests for the changes have been added (for bug fixes / features)
* [x] Docs have been added / updated (for bug fixes / features)
## PR Type
What kind of change does this PR introduce?
* [ ] Bugfix
* [ ] Feature
* [ ] Code style update (formatting, local variables)
* [ ] Refactoring (no functional changes, no api changes)
* [ ] Build related changes
* [ ] CI related changes
* [x] Documentation content changes
* [ ] angular.io application / infrastructure changes
* [ ] Other... Please describe:
## What is the current behavior?
Issue Number: N/A
## What is the new behavior?
## Does this PR introduce a breaking change?
* [ ] Yes
* [x] No
## Other information
PR Close#28206
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
This ensures that the SW is cleaned up, even in cases where
synchronization is disabled (and thus the clean-up inside `goTo()`
happens without waiting for Angular).
PR Close#28290
For asynchronous callbacks, this can be done either by calling
`done.fail()` or by returning the promise directly (without requesting a
`done` callback). (Using the latter, because it is shorter.)
PR Close#28290
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
Right now, we post such comments whenever a file has been touched that
could potentially have affected the docs. Since the API docs are built
from comments in the source code, almost all non-docs changes are
generating such preview comments, even though most of the time they are
irrelevant to the author and create unnecessary noise on the PR
(especially for actively worked-on PRs).
This commit removes the `team` GitHub team from the list of teams whose
members will automatically get preview comments.
(Adding the `aio: preview` label would still work on any PR.)
Jira: FW-967
PR Close#28211
I think only should be after BrowserModule , because we can import more than BrowserModule and I think we need to import other modules to AppModule in most of cases and we should import BrowserModule only in AppModule,so that thing seems okay.
PR Close#27677
Link to the document "53 percent of mobile site visits" was changed, updated link. Old link led to a page that didn't have the statistics on it.
PR Close#26628
Occasionally, URLs take longer to load, which causes CI flakes.
In #27903, the timeout for external URLs was increased, but internal
URLs turned out to be affected as well.
PR Close#28103
Changes:
- Change the project type to `service-worker`, so that it gets
appropriate `package.json` (with `@angular/service-worker` dependency)
and `angular.json` (with `serviceWorker: true` in production config).
- Move `ngsw-config.json` to the correct directory.
- Specify custom test commands for aio's `yarn example-e2e` to also
verify that the ServiceWorker bits are set up correctly.
PR Close#28020
Previously, cli-based docs examples were tested using `yarn e2e ...`. In
some cases, it might make sense to run different or additional checks
for a docs example (when running `yarn example-e2e` in `aio/`).
Currently, the only option is to define a custom project type and
overwrite the `e2e` yarn script in `package.json`. Doing so (in addition
to being cumbersome and verbose) would also end up in the `.zip` archive
that users can download to run the example locally. This would be
confusing, if these custom tests are specific to our CI needs.
This commit adds support for defining a custom list of commands per
example. These commands (if specified) would be run instead of the
default `yarn e2e ...`, when testing the docs examples on CI (via
`yarn example-e2e`).
(This feature will be used to verify that the
`service-worker-getting-started` example is set up correctly in a
subsequent commit, but can be useful in other cases as well.)
PR Close#28020
File overwrites:
- **angular.json**: Add `serviceWorker: true` to production config.
- **package.json**: Add `@angular/service-worker` to dependencies.
This will make any `service-worker` examples work out-of-the-box, when
downloading and running locally from the `.zip` archives.
PR Close#28020
This change matches the routes found in the following code example
for auth.guard.ts as well as the login.component.1.ts in the "Add
the LoginComponent" section.
PR Close#27879
The existing example makes it seem like zip is a pipeable operator. It can be used this way, but I think that is for backwards compatibility. You can achieve the same functionality by using it as an Observable creator. I think this also makes the example clearer.
PR Close#26790
This new version of dgeni-packages gives the main (implemented)
overload of a method the correct id and aliases, which allow it to be
automatically linked.
See 398f35da30Fixes#27820Closes#27821
PR Close#27864
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
cli is not yet officially compatible with typescript 3.2, so we need to disable the version check via:
ng config cli.warnings.typescriptMismatch false
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