while reading the documentation, I noticed that there were
references in the material's documentation. Since the
links were absent, I had to google the terms and
continue my study. I find it easier for the reader not
to be distracted by googling, but just clicking
and following the suggested links
PR Close#41982
This commit adds support for skipping formatting in `<aio-code>`
elements (which are used by `<code-example>` and `<code-pane>` elements
under the hood) by specifying the `language` option as `'root'`.
This is useful for code-snippets that include plain text.
PR Close#41335
As of v12, strict mode is the default, so you don't have
to opt in anymore. This commit removes the instructions
to add --strict to the ng new.
PR Close#41542
Content projection is an important part of Angular. However, it has
never been documented in the Angular documentation set. This topic
attempts to provide the basics of content projection for developers. It
is not a comprehensive guide; rather, it is a starting point that we
can hopefully expand upon in the future.
PR Close#41143
Update the statement expressing Angular's supported versions of Node.js. Previously, we stated
that the `current` version of Node.js was supported, however Node.js's `current` version maps
more closely to what we would term a `next` branch and is not expected meant for usage with
production applications. This intention is stated on Node.js Releases page:
> Production applications should only use Active LTS or Maintenance LTS releases.
PR Close#41820
Since angular 11 extra package.json isn't generated and with version 12 strict mode is opt out bases.
Updated document to reflect the state
Closes#40841.
PR Close#41923
[`watchr` v4.0.0][1] changes the way watched directories are
scanned/watched, thus causing a great increase in the consumed CPU and
RAM. This affects the performance of the `docs-watch` and transitively
`serve-and-sync` npm scripts.
(For reference, on my local machine it goes from 0% CPU and 275MB RAM
with v3.0.1 to 50% CPU and 10GB RAM with v4+.)
This commit pins `watchr` to version 3.0.1 (which is the latest version
that does not cause performance issues) and disabled automatic updates
via Renovate.
[1]: https://github.com/bevry/watchr/releases/tag/v4.0.0
PR Close#41903
Previously example for handling client-side errors in networking didn't work when there was no Internet connection.
Caught error is ProgressEvent in such case, not ErrorEvent and error.error.message is undefined.
PR Close#36608
Follow-up to #41826
The CLI now no longer installs `ts-node` since Protractor has been removed.
See https://github.com/angular/angular-cli/pull/20601 for the relevant PR in angular-cli.
This change has been released in the CLI v12.0.0-rc.1
PR Close#41873
* `SelectivePreloadingStrategyService` is already provided in the root
module, so it should not be added to `AppRoutingModule` providers
array
PR Close#41859
With this change we add the `assert` polyfill which is required because `timezone-mock` is a Node.JS library which is being used in Browser.
PR Close#41764
In #41788, logic was added to disambiguate case-insensitively equal docs
paths/URLs. This process includes appending a `-\d+` suffix to some
paths/URLs (for example, `/.../inject-1`). Unfortunately, some of the
Firebase redirects configured in `firebase.json` would match these URLs
and redirect them to non-existing paths.
Example failures: [stable][1], [next][2]
NOTE:
This was not picked up in the regular CI tests run for PRs, because the
local devserver and the preview server used to test PRs do not support
Firebase-like redirects.
This commit fixes this by ensuring these disambiguated paths/URLs are
not matched by the redirect rules by checking whether the part of the
suffix after the `-` contains any numeric digits. While this check is
not ideal, it should be good enough for our purpose, since the legacy
URLs that we do want to redirect contain suffixes such as `-class`,
`-function` and thus no numeric digits.
[1]: https://circleci.com/gh/angular/angular/974345
[2]: https://circleci.com/gh/angular/angular/974346
PR Close#41842
In ##41788, the `disambiguateDocsPathsProcessor` was introduced to fix
an issue with case-insensitively equal paths. This processor may alter
the paths of some docs and thus their final URL in the app.
Previously, both the `disambiguateDocPathsProcessor` and the
`createSitemap` processor (which relies on the docs' computed paths to
generate the sitemap file) were configured to run before the
"rendering-docs" phase. However, this resulted in the
`disambiguateDocPathsProcessor`'s running after `createSitemap`, which
meant that the sitemap did not include the updated doc paths.
This commit fixes it by ensuring that the
`disambiguateDocPathsProcessor` is explicitly run before the
`createSitemap` processor, so that the latter will be able to take into
account any changes made by the former.
PR Close#41842
This commit includes the URL under test in the test description in
`testFirebaseRedirection.spec.ts` to make it easier to identify the
affected URL when a test fails.
It also avoids unnecessarily creating multiple `FirebaseRedirector`
instances by sharing instances between tests.
PR Close#41842
This commit updates the utilities in `firebase-test-utils/` to also
support testing Firebase redirects that are configured using regular
expressions (via the `regex` property).
See the [Firebase docs][1] for more details.
[1]: https://firebase.google.com/docs/hosting/full-config#redirects
PR Close#41842
Currently, the utilities for testing Firebase redirects assume that the
redirects are configured using the glob-based `source` property.
However, Firebase also supports configuring redirects using regular
expressions (via the `regex` property).
See the [Firebase docs][1] for more details.
This commit refactors the utilities in `firebase-test-utils/` to make it
easy to add support for such regex-based redirect configurations.
[1]: https://firebase.google.com/docs/hosting/full-config#redirects
PR Close#41842
Previously, the tests in `create-example.spec.ts` made assertions using
some hard-coded absolute paths (something like `/foo/bar`). This caused
the tests to fail on Windows, where the absolute paths are prefixed with
the drive letter (something like `C:/foo/bar`).
This commit uses `path.resolve()` to ensure paths are converted to the
format used on the current OS.
PR Close#41842
This section states that "Importing a module with services means that you will have a new instance of that service". This is only true for lazy-loaded `NgModules`. For non-lazy-loaded modules, my understanding is that the providers arrays are flattened into the root injector meaning that importing a module with a service doesn't create a new instance of that service.
PR Close#41835
These docs were linking directly to docs that have ambiguous paths.
These changes ensure that these links are not affected by the
disambiguation processing of those docs.
PR Close#41788
When two documents have the same `outputPath`, only differing by
letter casing, there can be problems on case-insensitive file-systems:
Only one of each of the docs would end up being written.
Moreover, the Webpack 5 bundler will error if it comes across files
that have this kind of ambiguous paths.
This commit adds a new docType: `disambiguator`, which will display
a list of the docs that match an ambiguous path. Each of the ambiguous
docs is then given a unique path and outputPath to ensure there are no
collisions.
PR Close#41788
Previously, the `autoLinkCode` Dgeni post-processor would not apply the
custom filters when matching the whole contents of a `<code>` element.
This meant that custom filters would not be applied to single-word
`<code>` elements.
You can see occurrences of this issue in the following sections of the
"Reactive forms" guide:
- [Creating nested form groups][1]
(look for `street, city, state, and zip controls`)
- [Using the FormBuilder service to generate controls][2]
(look for `group method`)
This commit fixes this by also applying the custom filters when
processing the whole contents of a `<code>` element.
This commit also updates the `filterPipes` custom filter to allow
matching a pipe's name in a single-word `<code>` element (where there is
no preceeding `|` character).
[1]: https://v10.angular.io/guide/reactive-forms#creating-nested-form-groups
[2]: https://v10.angular.io/guide/reactive-forms#using-the-formbuilder-service-to-generate-controls
PR Close#41709
While generating the docs, when a `<code>` element is inspected for
auto-linking, the `autoLinkCode` Dgeni post-processor will break its
contents up into words and generate text nodes for those words that
should not be auto-linked.
Previously, our text node visitor would visit these generated text nodes
and try to auto-link them too. As a result, it would unnecessarily
process nodes that had already been checked (and could potentially
generate links that would otherwise be ignored).
You can see an occurrence of this issue in the
[Create the product list][1] section of the
"Getting started with Angular" tutorial (look for `<a>`).
This commit fixes this by ensuring the visitor will skip the current
node and any nodes generated by `autoLinkCode`.
[1]: https://v11.angular.io/start#create-the-product-list
PR Close#41709
This commits makes the SystemJS-based docs examples more self-contained
by ensuring the necessary WebDrivers are fetched before running the e2e
tests.
This is a follow-up to #41689. (See there for more discussion.)
PR Close#41796
In commit c617f1f768, `jsdom` was updated
from v9 to v16. This includes a breaking change that caused
`StackblitzBuilder` to fail to generate the StackBlitz examples.
However, this failure went unnoticed, because `StackblitzBuilder` still
completed successfully after failing to generate the examples. (This has
been fixed in the previous commit.)
This commit updates `StackblitzBuilder` to use the new `jsdom` API.
PR Close#41725
Previously, failing to generate one or more StackBlitz examples would
log the errors but exit the command successfully. This made it easy to
miss such failures.
This commit fixes this by exiting the process with an error code if
generating one or more StackBlitz examples fails.
(In order to be able to see all potential errors, all examples are
attempted to be generated before exiting the process.)
PR Close#41725
This commit updates the docs examples to Angular v11.2.10. See the [diff between 11.0.1 and 11.2.10 (FW) and 11.2.9 (CLI)][1].
The changes are fairly trivial including:
- Removal of `emitDecoratorMetadata` from tsconfig.json files, where no JIT compilation is required.
- Setting `enableI18nLegacyMessageIdFormat` to `false` for CLI based applications - the i18n example was already migrated away from legacy message IDs.
[1]: https://github.com/cexbrayat/angular-cli-diff/compare/11.2.9..11.0.1
PR Close#41689
The ngUpgrade examples mostly rely upon SystemJS configuration.
This commit tidies up how these examples are built and tested so that
it will be easier to migrate them to work with Angular 11.2.x
PR Close#41689
From 11.x, new projects are set up to use the latest message ID format.
This commit updates the i18n example project to stop using legacy IDs.
PR Close#41689
This commit simplifies a regex used in angular.io's search WebWorker. It
also updates some comments to add more context on what the code does.
PR Close#41693
Previously, the `URLS_TO_REDIRECT.txt` file was expected to separate
URLs by a `\t` character. This could easily been mistaken for a regular
space and would often result in test errors when updating the file.
This commit updates the `URLS_TO_REDIRECT.txt` file and the
corresponding test helpers to use `-->` (potentially surrounded by
whitespace) as a separator for the URLs. This also gives a hint about
the "from" --> "to" relationship of the redirect URL pair.
PR Close#41680
Previously, the `URLS_TO_REDIRECT.txt` file was expected to not contain
any empty lines. This could easily result in test errors when updating
the file, since it is common for IDEs/editors to automatically ensure
there is an empty line at the end of a saved file
([example failure][1]).
This commit updates the test helpers to be able to cope with empty or
whitespace-only lines in `URLS_TO_REDIRECT.txt` by ignoring such lines.
[1]: https://circleci.com/gh/angular/angular/965534
PR Close#41680
AppHighlight directive from the example doesn't have myHighlight attribute.
It only has appHighlight property. So we should use appHighlight instead of myHighlight.
PR Close#41410
We have several tests which use system.js, this means that we cannot use NGCC with `--create-ivy-entry-points`, also we need to process UMD bundles since our system.js configurations use UMDs.
PR Close#41638
```
$ lite-server -c bs-config.aot.json
$ ngc -p tsconfig-aot.json && rollup -c rollup-config.js
/Users/xxxx/git/angular/aio/tools/examples/shared/node_modules/browser-sync/node_modules/chokidar/lib/fsevents-handler.js:26
return (new fsevents(path)).on('fsevent', callback).start();
^
TypeError: fsevents is not a constructor
at createFSEventsInstance (/Users/xxxx/git/angular/aio/tools/examples/shared/node_modules/browser-sync/node_modules/chokidar/lib/fsevents-handler.js:26:11)
at setFSEventsListener (/Users/xxxx/git/angular/aio/tools/examples/shared/node_modules/browser-sync/node_modules/chokidar/lib/fsevents-handler.js:80:16)
at FSWatcher.FsEventsHandler._watchWithFsEvents (/Users/xxxx/git/angular/aio/tools/examples/shared/node_modules/browser-sync/node_modules/chokidar/lib/fsevents-handler.js:244:16)
at FSWatcher.<anonymous> (/Users/xxxx/git/angular/aio/tools/examples/shared/node_modules/browser-sync/node_modules/chokidar/lib/fsevents-handler.js:378:25)
at LOOP (fs.js:1752:14)
at processTicksAndRejections (internal/process/task_queues.js:79:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
completed: yarn serve:aot
```
PR Close#41638
Upgrade local development environment for the angular repo to use node 14
dropping node 10 from supported for development within the angular repo.
PR Close#41544
Replace Codelyzer recommendation with Angular-ESLint in accessibility guide since that tool is deprecated and was removed from the Angular CLI.
Closes#41573
PR Close#41294
Previously if there was a problem when building the tests, the error would
be swallowed as an unhandled promise rejection. Now these are caught and
the process is exited with a non-zero value to prevent any CI jobs from
passing incorrectly.
PR Close#41596
This is to fix the below error:
```
tools/firebase-test-utils/FirebaseRedirect.ts:17:50 - error TS2345: Argument of type '(string | RegExp)[][]' is not assignable to parameter of type 'ReplacementDetail[]'.
Type '(string | RegExp)[]' is missing the following properties from type 'ReplacementDetail': 0, 1
17 return XRegExp.replaceEach(this.destination, [...paramReplacers, ...restReplacers]);
```
https://app.circleci.com/pipelines/github/angular/angular/31076/workflows/5fd3851e-ae9e-4d77-b0ef-366ba38a9088/jobs/961795
PR Close#41596
Fix unexpected error when following the tutorial (when going through it with stricter type checking enforced). While (+) converts a string to an integer, it does not account for the possibility that `this.route.snapshot.paramMap.get('id')` could return null (type: string | null). Since this null case is not a practical outcome, it is a matter of types; switching from (+) to the `Number` function eliminates this issue, making the tutorial more robust.
PR Close#41570
This is a temporary workaround until the CLI version containing a fix for the regression caused by deacc74 is available on NPM.
Without this change CLI builds will fail with;
```
angularCompiler.getNextProgram is not a function
```
PR Close#41434
With this change we update several dependencies to avoid Renovate creating a lot of PRs during onboarding. We also remove yarn workspaces as after further analysis these are not needed.
Certain dependencies such as `@octokit/rest`, `remark` and `@babel/*` have not been updated as they require a decent amount of work to update, and it's best to leave them for a seperate PR.
PR Close#41434
This commit marks the `compilationMode` compiler option as stable, such
that libraries can be compiled in partial compilation mode.
In partial compilation mode, the compiler's output changes from fully
compiled AOT definitions to an intermediate form using partial
declarations. This form is suitable to be published to NPM, which now
allows libraries to be compiled and published using the Ivy compiler.
Please be aware that libraries that have been compiled using this mode
can only be used in Angular 12 applications and up; they cannot be used
when Ivy is disabled (i.e. when using View Engine) or in versions of
Angular prior to 12. The `compilationMode` option has no effect if
`enableIvy: false` is used.
Closes#41496
PR Close#41518
Previously, the search index info file contained an array of strings that is
the dictionary of terms in the corpus.
Storing this as a space separated string reduces the size of the file.
PR Close#41447
Rather than relying on a preinstall script, set `engine-strict` to `true` in a
project `.npmrc` file, relying on the `engines` having `npm` set to note that
yarn should be used instead.
---
Output from `npm install` changes from:
```
$ npm install
> angular-srcs@12.0.0-next.7 preinstall /usr/local/account/js/angular
> node tools/yarn/check-yarn.js
/usr/local/account/js/angular/tools/yarn/check-yarn.js:12
throw new Error(
^
Error: Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/
at Object.<anonymous> (/usr/local/account/js/angular/tools/yarn/check-yarn.js:12:9)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-srcs@12.0.0-next.7 preinstall: `node tools/yarn/check-yarn.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-srcs@12.0.0-next.7 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /usr/local/account/.npm/_logs/2021-04-06T22_54_02_292Z-debug.log
```
to
```
$ npm install
npm ERR! code ENOTSUP
npm ERR! notsup Unsupported engine for angular-srcs@12.0.0-next.7: wanted: {"node":">=10.19.0 <13.0.0","yarn":">=1.22.4 <2","npm":"Plesae use yarn instead of NPM to install dependencies"} (current: {"node":"10.20.1","npm":"6.14.4"})
npm ERR! notsup Not compatible with your version of node/npm: angular-srcs@12.0.0-next.7
npm ERR! notsup Not compatible with your version of node/npm: angular-srcs@12.0.0-next.7
npm ERR! notsup Required: {"node":">=10.19.0 <13.0.0","yarn":">=1.22.4 <2","npm":"Plesae use yarn instead of NPM to install dependencies"}
npm ERR! notsup Actual: {"npm":"6.14.4","node":"10.20.1"}
npm ERR! A complete log of this run can be found in:
npm ERR! /usr/local/account/.npm/_logs/2021-04-06T22_53_23_912Z-debug.log
```
PR Close#41477
Previously, the `angular-in-memory-web-api` package was built in
`dist/packages-dist/misc/angular-in-memory-web-api/`. This was different
from other Angular packages, which were placed directly in
`dist/packages-dist/`. This caused the `create-package-archives.sh`
script to create an invalid `misc.tgz` archive (i.e. treating the
`misc/` subdirectory as a package).
See, for example, the artifacts [here][1].
This commit changes the build scripts to have the
`angular-in-memory-web-api` package built in
`dist/angular-in-memory-web-api-dist/`, similar to how the `zone.js`
package is handled. It also updates the CircleCI config to correctly
publish the `angular-in-memory-web-api` package to CI build artifacts.
[1]: https://circleci.com/gh/angular/angular/951491
PR Close#41429
This commit enables linting for the scripts in
`aio/tools/ng-packages-installer/`. It also makes the necessary changes
to the files to make linting pass.
PR Close#41429
This commit updates the `eslint` and `eslint-plugin-jasmine` packages to
latest versions to take advantage of latest fixes and improvements.
PR Close#41429
The AIO search index is built in a WebWorker on the browser from a set
of page information that is downloaded as a JSON file (`search-data.json`).
We want to keep this file as small as possible while providing enough
data to generate a useful index to query against.
Previously, we only included one copy of each (non-ignored) term from each
doc but this prevents more subtle ranking of query results, since the number
of occurences of a term in a doc is lost.
This commit changes the generated file in the following ways:
- All non-ignored terms are now included in the order in which they appear
in the doc.
- The terms are indexed into a dictonary to avoid the text of the term being
repeated in every doc that contains the term.
- Each term is pre-"stemmed" using the same Porter Stemming algorith that the
Lunr search engine uses.
The web-worker has been updated to decode the new format of the file.
Now that all terms are included, it may enable some level of phrase based
matching in the future.
The size of the generated file is considerably larger than previously, but
on production HTTP servers the data is sent compressed, which reduces the
size dramatically.
PR Close#41368
This commit tries to improve the search results by processing
the query and attempting progressively less restrictive searches
until a non-zero set of pages is matched.
The new procesing includes:
* stripping off quote marks, which were causing searches to fail
* first attempting to match pages where ALL the query terms exist
* second attempting to match pages where ANY of the query terms exist
* third attempting to match pages where the title contains partial word matches
The first query attempt approximates, quite well, the idea of searching
for multi-word phrases. This is given the technical nature of the terms
and the fairly small size of the corpus.
PR Close#41368
Previously, the max width of the `file-not-found` page was limited to
50rem (800px by default). This allowed little space for showing
potentially helpful search results, which are shown in columns).
This commit increases the max width of the `file-not-found` page to
84rem (1344px by default) to allow search results to be visible without
requiring scrolling. This will not negatively affect UX, because the
page uses a multi-column layout and therefore there will rarely be long
lines of text to scan.
PR Close#41275
The moved `XhrFactory` still needs to be available from `@angular/common/http`
for some libraries that were built prior to 12.0.0, otherwise they cannot be
used in applications built post-12.0.0.
This commit adds back the re-export of `XhrFactory` and deprecates it.
PR Close#41393
This commit updates the tooltip and footer description of the
"What is Angular" card in the `docs` guide to better match the card's
content. (It seems that the old content was copied/pasted from a
different card.)
It also updates the tooltip of the "Hello World" card to better describe
the card's purpose.
PR Close#41250
This commit replaces the unknown `is-warning` CSS class from an alert in
the `updating-content-github-ui` guide with the `is-important` CSS class
(that causes the alert to be given an orange-ish background).
PR Close#41250
This commit formats the `docs-card` elements used in
`contributors-guide-overview` and `docs` guides to have consistent
indentation and line-wrapping.
PR Close#41250
Previously, some links to specific sections of `CONTRIBUTING.md` were
using hashes automatically generated by GitHub based on the section
headings. This resulted in less readable hashes which were directly tied
to the heading text and thus less robust (i.e. more likely to break if
the heading was re-worded in the future).
This commit switches such links to use the dedicated anchors, which are
more succinct/readable and more stable.
PR Close#41250
It seems that the `updating-content-github-ui` guide was accidentally
omitted from the sidenav in #41061.
This commit adds the guide to the sidenav.
PR Close#41250
The documentation has a very useful configuration for Travis and CircleCI but not for GitLab CI.
So, I thought that might be useful to have that as well.
PR Close#40411
Remove sudo since it no longer has use in Travis CI build configurations.
Change chrome addons to use the latest required method.
Remove dist to make the Travis CI builds run in the latest Ubuntu release: Xenial.
This because Trusty uses an older version of Chrome which is not supported
by the current the latest Chrome Driver, used in ng e2e tests.
Fixes#36451
PR Close#37473
* add links to navigate to the create workspace and application and install Angular CLI how-to steps for easy navigation
* add reviewed tag with date guide was reviewed
PR Close#41263
In some cases, we want to test the AIO app or docs examples against the locally built `angular-in-memory-web-api` for example to ensure that the changes in a commit do not introduce a breaking changes.
PR Close#41313
When a contributor was removed from `contributors.json`, the
corresponding image should also be removed from
`aio/content/images/bios/`. However, this was often overlooked,
resulting in unused images remaining in `aio/content/images/bios/`.
This commit adds a check to ensure that all images in
`aio/content/images/bios/` are referenced in `contributors.json`.
PR Close#41290
This commit removes some contributor images that are no longer
referenced in `contributors.json` (i.e. they belong to contributors that
have since been removed).
BTW, removing these unused images saves ~720KB off the total size of the
assets that are deployed along with the app.
PR Close#41290
In #41253 the size of contributor images was limited, but
some images were already too large. So an exclusion list
was added. These images have now been reduced, so
the exclusion list is no longer needed.
The files were reduced by a combination of running them through the
https://tinyjpg.com/ online service and manually setting their size to
168px wide or tall using the MacOS Image Preview app.
PR Close#41292
This commit updates the logic that validates contributors.json data and introduces a new check that verifies that profile images don't exceed specified limit.
PR Close#41253
This commit aligns the code of `HeroService` `getHeroes()` and
`getHero()` methods in `toh-pt5` with that of `toh-pt4`. I.e. it applies
the changes from #40419 to `toh-pt5`.
PR Close#41234
In CLI version 12, we introduced the concept of production builds by default.
With this change we update the documentation to reflect the changes.
More information about the change can be found https://github.com/angular/angular-cli/pull/20128
PR Close#41173
Before #41162, angular.io was broken on IE 11 due to missing a polyfill
for an API (`Reflect.construct()`) needed by the Custom Elements ES5
shim. #41162 tried to fix this by loading the necessary polyfill
(`es.reflect.construct.js`) on browsers that do not support ES2015
modules (including IE 11).
It turns out that the fix in #41162 was itself broken, because the
`es.reflect.consruct.js` script (included directly in the page via a
`<script>` tag) was in CommonJS format (which cannot run in the browser
as is). By chance, this still allowed browsers that supported neither
Custom Elements nor ES2015 modules (such as IE 11) to work correctly as
a side-effect of loading the `@webcomponents/custom-elements` polyfill
after the Custom Elements ES5 shim (`native-shim.js`). However, on the
few browsers that natively support Custom Elements but not ES2015
modules, angular.io would still be broken.
This commit correctly fixes angular.io on all browsers by properly
bundling the polyfills and transpiling to ES5.
Implementation-wise, we use [esbuild][1] for bundling the polyfills (and
converting from CommonJS to a browser-compatible, IIFE-based format) and
[swc][2] for downleveling the code to ES5 (since `esbuild` only supports
ES2015+).
[1]: https://esbuild.github.io/
[2]: https://swc.rs/
PR Close#41183
BREAKING CHANGE:
Switching default of `emitDistinctChangesOnlyDefaultValue`
which changes the default behavior and may cause some applications which
rely on the incorrect behavior to fail.
`emitDistinctChangesOnly` flag has also been deprecated and will be
removed in a future major release.
The previous implementation would fire changes `QueryList.changes.subscribe`
whenever the `QueryList` was recomputed. This resulted in an artificially
high number of change notifications, as it is possible that recomputing
`QueryList` results in the same list. When the `QueryList` gets recomputed
is an implementation detail, and it should not be the thing that determines
how often change event should fire.
Unfortunately, fixing the behavior outright caused too many existing
applications to fail. For this reason, Angular considers this fix a
breaking fix and has introduced a flag in `@ContentChildren` and
`@ViewChildren`, that controls the behavior.
```
export class QueryCompWithStrictChangeEmitParent {
@ContentChildren('foo', {
// This option is the new default with this change.
emitDistinctChangesOnly: true,
})
foos!: QueryList<any>;
}
```
For backward compatibility before v12
`emitDistinctChangesOnlyDefaultValue` was set to `false. This change
changes the default to `true`.
PR Close#41121
Previously, the generated `404.html` page did not include a `<body>`
tag. In some browsers (such as IE 11), this was causing warnings in the
console.
This commit ensures the generated page contains a `<body>` tag. It also
fixes the indentation in the generated page.
PR Close#41163
Previously, the angular.io app was broken on IE 11. In particular, pages
that included Custom Elements would fail to load, because the
`Reflect.construct()` method (which the Custom Elements ES5 shim relies
on) was not available.
This commit fixes this by loading the polyfill for `Reflect.construct()`
on browsers that do not support ES2015 (including IE 11).
PR Close#41162
The custom elements spec is not compatible with ES5 style classes. This
means ES2015 code compiled to ES5 will not work with a native
implementation of Custom Elements. To support browsers that natively
support Custom Elements but not ES2015 modules, we load
`@webcomponents/custom-elements/src/native-shim.js`, which minimally
augments the native implementation to be compatible with ES5 code.
(See [here][1] for more details.)
Previously, the shim was included in `polyfills.ts`, which meant it was
loaded in all browsers (even those supporting ES2015 modules and thus
not needing the shim).
This commit moves the shim from `polyfills.ts` to a `nomodule` script
tag in `index.html`. This will ensure that it is only loaded in browsers
that do not support ES2015 modules and thus do not needed the shim.
NOTE:
This commit also reduces size of the polyfills bundle by ~400B
(52609B --> 52215B).
[1]: https://www.npmjs.com/package/@webcomponents/custom-elements#es5-vs-es2015
PR Close#41162
Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using `<br>` elements (for line breaks) and ` ` HTML
entities (for space). This was laborious and put the onus on the author
to remember to use these symbols (instead of regular whitespace
characters).
(Discussed in
https://github.com/angular/angular/pull/41051#discussion_r585651621.)
This commit changes the way `<code>` elements are styles inside the
"Cheat sheet" guide to allow using regular whitespace characters in code
snippets. It also changes all `<br>`/` ` occurrences to `\n`/` `
respectively to make code snippets more readable in the source code.
PR Close#41051
The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens (between 768px and 1057px), the layout
changes to stack the paragraphs vertically. On medium screens, however,
there is not enough space to show more than two paragraphs next to each
other.
Previously, the 3rd paragraph was wrapped over to the next line.
This commit improves the layout on medium screens by switching to
immediately stacking the paragraphs vertically as soon as there is not
enough space for them to be displayed in one row. Since the total width
is still too much for one paragraph, the paragraphs are limited to 80%
of the total width.
Before (on 1000px width): [features page (on 1000px) before][1]
After (on 1000px width): [features page (on 1000px) after][2]
[1]: https://user-images.githubusercontent.com/8604205/109825316-62128a00-7c42-11eb-8391-650201257274.png
[2]: https://user-images.githubusercontent.com/8604205/109825323-6343b700-7c42-11eb-86c1-e8307c5a727a.png
PR Close#41051
Previously, with the min width of 220px per item, several API list items
were truncated.
This commit increases the min width per item to 330px, which allows
almost all items to have their full text shown. It also increases the
API list page's max content width from 50em (800px) to 62.5em (1000px)
to allow items to be shown on three columns despite their increased
width. This increase in the content width shouldn't negatively affect
UX, since the API list page uses a multi-column layout (i.e. it does not
contain 1000px-lines of text.)
Before: ![api-list before][1]
After: ![api-list after][2]
[1]: https://user-images.githubusercontent.com/8604205/109396457-5f5e1f00-793a-11eb-80cf-1418f409325a.png
[2]: https://user-images.githubusercontent.com/8604205/109396659-499d2980-793b-11eb-95d3-f54250f7fab5.png
PR Close#41051
Previously, each marketing page used a different limit for its content's
width (if it had a limit at all) and implemented the width limiting in a
different way. Besides resulting in an inconsistent UX, this also made
it difficult to apply site-wide layout changes.
This commit makes the limit for most marketing pages consistent and uses
the same CSS class to make it easier to apply site-wide changes in the
future. The chosen limit is slightly larger than that of docs pages
(62.5em/1000px vs 50em/800px), because marketing pages have a different
type of content and layout (i.e. images, multi-column layout, etc.).
Finally, this commit also removes obsolete wrapper elements, CSS classes
and CSS styles, that are no longer necessary after the changes.
Notably, the homepage (`/`) and the "Contributors" page (`/about`) have
remained unchanged, because the former has its own layout that is
different from other marketing pages and the latter would offer a worse
UX with a small content width limit (as the one used on other marketing
pages).
The content widths of the rest of the marketing pages change slightly as
a result of the changes in this commit, but not in a way that would have
a negative impact on UX. More specifically:
| Page (URL) | Size before | Size after |
|:--------------|------------:|-----------:|
| `/contribute` | 880px | 1000px |
| `/events` | unlimited | 1000px |
| `/features` | 996px | 1000px |
| `/presskit` | 800px | 1000px |
| `/resources` | 800px | 1000px |
PR Close#41051
This commit removes an unnecessary wrapper `<div>` from the
"Cheat sheet" guide. The CSS styles that referenced the element's ID
(`#cheatsheet`) have been updated to use `.page-guide-cheatsheet`
instead.
PR Close#41051
Previously, styling of `<code>` elements utilized the `:not()` CSS
pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out
that older browsers (such as IE11) do not support multiple selectors in
a single `:not()` instance.
(See [MDN][1] and [CanIUse][2] for more info.)
This commit fixes `<code>` styling to use multiple separate `:not()`
instances instead (`:not(h1):not(h2)...`), so that they are styled
correctly on older browsers as well.
NOTE:
This change seems to trigger some kind of bug in LightHouse that causes
the a11y score of `/start` to be calculated as 0 (which is clearly
wrong). This happens on Linux (tested on CI and locally using the
Windows Subsystem for Linux (WSL)) - on Windows the score is computed
correctly as 98/100.
([Example failure][3])
The bug seems to be related to the layout of the content and goes away
if we change the viewport size (for example, switching to LightHouse's
`desktop` config) or make another change that affects the content's
layout (for example, reducing the padding of `<code>` elements).
To work around the issue, this commit updates the `test-aio-a11y.js`
script to test `/start-routing` instead of `/start`.
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors
[2]: https://caniuse.com/css-not-sel-list
[3]: https://circleci.com/gh/angular/angular/931038
PR Close#41051
The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens, the layout changes to stack the
paragraphs vertically. On medium screens, however, the 3rd paragragh is
wrapped over to the next line.
Previously, the wrapped content was left-aligned, which left a lot of
empty space on the right.
This commit improves the layout on medium screens by ensuring the
paragraphs are horizontally centered (with space distributed evenly
around them).
Before: ![features page before][1]
After: ![features page after][2]
[1]: https://user-images.githubusercontent.com/8604205/109344670-b64ef000-7877-11eb-9013-890562ff2f3d.png
[2]: https://user-images.githubusercontent.com/8604205/109344678-b7801d00-7877-11eb-9224-d7715f7d7235.png
PR Close#41051
Previously, in contrast to docs pages, marketing pages had a non-fixed
top-menu, which meant that the top-menu would scroll out of the viewport
along with the rest of the content. This had a couple of downsides:
- The UI was different between pages (i.e. different top-menu behavior
on docs vs marketing pages).
- Since some of the marketing pages are long, it was not easy for people
to navigate to a different page (i.e. they had to scroll all the way
back up).
This commit improves the UX by using the same, fixed top-menu on all
pages, which restores consistency and allows the user to navigate around
more easily.
NOTE:
The old behavior (non-fixed top-menu) is kept on the homepage, since its
top-menu design in a little different than other pages (e.g. it uses a
transparent top-menu) and would not play well with a fixed top-menu.
PR Close#41051
In 6cff877 we broke the decorator docs because the
doc-gen no longer knew how to identify them.
This commit updates the dgeni processor responsible
for identifying the decorators in the code and ensures
that the docs are now generated correctly.
Fixes#40851
PR Close#41091
This commit adds `/tutorial` to the list of angular.io pages that we run
a11y tests against and updates the required scores to match the current
ones (to avoid a future regression going unnoticed).
PR Close#41103
This commit updates the `audit-web-app.js` script (used to run PWA and
a11y tests on angular.io) to also print the version of the browser used
to run the tests. This can help when debugging a CI failure.
PR Close#41103
setting the `hero` property as an optional property fixes the compilation
error: `Property 'hero' has no initializer and is not definitely assigned
in the constructor` when having the ts transpiler set to "strict" mode.
PR Close#40942
After my speaker meeting with the Geekle team, they communicated that
they moved the date to avoid colliding with ng-conf. Originally added
in#40697, per @mgechev.
PR Close#41050
This commit updates the Angular framework, Angular CDK/Material and
Angular CLI to latest stable versions (11.2.3, 11.2.2 and 11.2.2
respectively).
This update also fixes a Lighthouse audit fail due to
`@angular/core@11.0.0` being identified as vulnerable to XSS:
https://snyk.io/vuln/SNYK-JS-ANGULARCORE-1070902
Regarding the payload size increases, they are mostly attributed to
Angular Material:
- Before this commit: 448461 B
- After framework update: 448554 B ( +93 B)
- After Material update: 449292 B (+738 B)
- After CLI update: 449310 B ( +18 B)
PR Close#40994
In this version, we no longer need our custom logic to skip certain
HTTPS related audits on localhost, since Lighthouse will treat it as a
secure context (similar to how browsers do).
See also GoogleChrome/lighthouse#11766.
PR Close#40994
Previously, the event dates displayed on the angular.io "Events" page
(`/events`) was off by one day on timezones with a negative offset from
UTC. See
https://github.com/angular/angular/pull/41050#issuecomment-788958888.
This commit fixes it by using the `getUTC*` methods of the `Date` object
to extract the date info, which are not affected by the user's timezone.
PR Close#41053
Shifts colors to pass WebAIM contrast checker and adds media
query so that body padding is smaller at smaller widths.
Body padding responsiveness will help on StackBlitz and small
screens.
PR Close#40890
We need to explicitly set the `enableIvy` option in a tsconfig file
to tell StackBlitz not to use ViewEngine.
This commit will generate an appropriate tsconfig.json file in the
example data that is sent to StackBlitz, which matches the Ivy
setting of the AIO project itself.
PR Close#40930
This commit cleans up the styles and the elements/classes used for
styling the content of the `<aio-resource-list>` component.
This change has been extracted from #36045.
Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>
PR Close#40944
profanis
Renovate Bot
iRealNirmal
Kapunahele Wong
George Kalpakas
Alan Agius
David Shevitz
cexbrayat
Dylan Hunn
Hugo Mejia
Joey Perrott
Talha Azhar
Mikhail
Mathias Schäfer
Igor Minar
Wojciech Okoński
Sam Severance
Teri Glover
Keen Yee Liau
Pete Bacon Darwin
Amadou Sall
Chau Tran
Aristeidis Bampakos
Daniel Díaz
unknown
Oluwole Majiyagbe
Bendik Skarpnes
Pierre Portejoie
Kirk Larkin
va-stefanek
Eduard Bondarenko
Gérôme Grignon
sovtara
Dharmen Shah
Dharmen Shah
Julien Marcou
Michael Hladky
pavlenko
aschaap
Nishu Goel
Alan Cohen
JoostK
Sagar Pandita
Zack DeRose
Paul Muriel Biya-Bi
Philipp_Lypniakov
Gabrielle Crevecoeur
GChuf
Obumuneme Nwabude
Yvonne Allen
Zach Arend
Marios Radis
Leandro Diniz
waterplea
Alisa Duncan
cindygk
Andrew Kushnir
Samuel R
Manuele Dones
Preston Lamb
Kristiyan Kostadinov
stefanos-
Misko Hevery
Stepan Suvorov
pniedermeyer
LordMsz
Sivamuthu Kumar
Quentin Monmert
Carl Fredrik Samson
Chris
MG
David Pine
twerske
