It is important to use the correct major version of the Angular CLI when
following the examples in the tutorials. This commit provides a custom
element that renders an appropriate dist-tag in the setup step of
the tutorial when the docs are not in "stable" mode.
Fixes#39821
PR Close#41991
After the changes to the `lang-none` styling in #41335, code snippets marked with
```
language="none" class="code-shell"
```
were being styled with the same foreground and background colours.
It turns out that most of these ought to be marked `language="sh"`
in which case the `code-shell` style became redundant and has been
removed.
Fixes#41984
PR Close#41986
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
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
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
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
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
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
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
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 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 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
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
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
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 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
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
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
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
This commit replaces some outdated URLs in "Contribute" links (on the
"Contribute" page):
- `github.com/angular/material2` --> `github.com/angular/components`
- `github.com/angular/angularfire2` --> `github.com/angular/angularfire`
It also replaces the deprecated `md-button` attribute with `mat-button`.
PR Close#40944
This change fixes an incompatibility between the old `@angular/http` package
and its successor (`@angular/common/http`) by re-introducing the types that were supported before.
It now allows to use number and boolean directly as HTTP params, instead of having to convert it to string first.
Before:
this.http.get('/api/config', { params: { page: `${page}` } });
After:
this.http.get('/api/config', { params: { page }});
`HttpParams` has also been updated to have most of its methods accept number or boolean values.
Fixes#23856
BREAKING CHANGE:
The methods of the `HttpParams` class now accept `string | number | boolean`
instead of `string` for the value of a parameter.
If you extended this class in your application,
you'll have to update the signatures of your methods to reflect these changes.
PR Close#40663
The "Press kit" page has a "Terminology" section that lists a couple of
terms (currently AOT and JIT compilation).
This commit adds links to the corresponding entries in "Glossary" to
make it easier for people to find out what the terms mean.
PR Close#40945
Fixes error: `TS2564: Property 'heroes' has no initializer and is not definitely assigned in the constructor`
and makes `hero` property consistent with ch 3 (ref: #40942)
PR Close#40970
Increases contrast of example copy.
Explicitly references inputs from labels.
Updates screenshot of styles that aren't accessible.
Removes the term master.
Provides more detailed alternate text for the image.
Adds padding to input so it is an easier target for touch or pointer.
PR Close#40575
Previously, some of the links on the error pages had URLs prefixed with
`https://angular.io/`. This caused them to be treated as external URLs,
which had the following downsides:
- Links would always point to `angular.io` instead of the same version
as the error page (e.g. `next.angular.io` or `v11.angular.io`).
- Dgeni would not be able to check that the URLs are valid (i.e. point
to existing pages).
- An external link icon would incorrectly be shown next to the links on
`angular.io`.
This commit fixes the links to use relative URLs.
PR Close#40881
Our approach for handling cyclic imports results in code that is
not easy to tree-shake, so it is not suitable for publishing in a
library.
When compiling in partial compilation mode, we are targeting
such library publication, so we now create a fatal diagnostic
error instead of trying to handle the cyclic import situation.
Closes#40678
PR Close#40782
In #40419 we move the code that creates the `heroes` object
above the code that updates the message service. But this moved
that line of code outside of the docregion that is displayed in
the tutorial ealier on, making it non-sensical.
This commit ensures that this line of code is now rendered in the
tutorial be moving it within the correct docregion.
Closes#40788
PR Close#40789
Update the HTTP guide and associated example to demonstrate
how an interceptor can be used to provide a custom JSON parser.
Resolves#21079
PR Close#40645
After the docs UI redesign `h2` tags got a border top.
`border-top: 1px solid #dbdbdb;`;
In the sections of Getting Started guide in order to separate
`What's next` from above content an `<hr />` tag was used,
that now becomes unnecessary.
This commit removes unnecessary `<hr />` tags.
PR Close#40693
Initially raised due to #39509, this change updates our
"Support policy and schedule" with the same disclaimer
from the "Release frequency" section above.
PR Close#40770