Compare commits

...

151 Commits

Author SHA1 Message Date
Andrew Scott e726a63cdd release: cut the v12.2.5 release (#43392) 2021-09-08 09:28:03 -07:00
dario-piotrowicz c02e5e15b6 refactor(common): removed TODO no longer considered necessary (#43378)
The TODO comment suggesting to verify that the target element to
scroll to needs to be an anchor does not longer seems under consideration
so it can be removed

resolves #43348

PR Close #43378
2021-09-07 23:05:32 +00:00
Paul Gschwendtner 01d2f03d3d ci: avoid failures when yarn unlinks bazelisk in windows jobs (#43365)
Windows disallows removal of files which are currently being used.
i.e. have active handles. This currently can result in permission denied
failures on the Windows CI jobs where `yarn bazel` resolves to the local
bazelisk installation that can be unlinked by `yarn_install` repository
fetching as part of the Bazel invocation, resulting in errors like:

```
ERROR: An error occurred during the fetch of repository 'npm':
   yarn_install failed: $ node tools/yarn/check-yarn.js
...
[4/5] Linking dependencies...
info If you think this is a bug, please open a bug report with the information provided in "C:\\users\\circleci\\ng\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
 (warning " > tsickle@0.34.3" has incorrect peer dependency "typescript@~3.3.1".
error An unexpected error occurred: "EPERM: operation not permitted, unlink 'C:\\users\\circleci\\ng\\node_modules\\@bazel\\bazel-win32_x64\\bazel-0.27.0-windows-x86_64.exe'".
Process stalled
Active handles:
  - Socket
  - Socket
  - Socket
)
```

We workarund this in order to improve CI stability in case the node modules are
being invalidated by Bazel, or through Yarns integrity checking.

PR Close #43365
2021-09-07 21:29:58 +00:00
Paul Gschwendtner e5f9d2d046 build: check .ng-dev tool configuration in CI (#43365)
Checks the `.ng-dev` tool configuration in CI, compared
to doing it locally when the caretaker intends to perform
a merge and then realizes the config is broken.

PR Close #43365
2021-09-07 21:29:58 +00:00
Paul Gschwendtner 68a7cc12e4 build: update bazel setup to latest versions (#43365)
Updates the overall Bazel setup to their latest versions:

* rules_nodejs is updated to stable 4.0.0
* rules_sass is updated to the latest version containing a fix
  for the `@bazel/worker` bug we had a workaround for.
* dev-infra-private is updated to avoid duplicated dependencies.
  We should use a version that also relies on stable rules_nodejs v4.

Note: We are not set on how dependencies for the `bazel/` folder
of the dev-infra package are managed, but we removed `@types/`
packages from the transitive dependencies, so we now need to
manually include `@types/uuid` for building the benchmark driver
utilties. We need to revisit this in the future.

PR Close #43365
2021-09-07 21:29:58 +00:00
Charles Barnes 0bfb5b1f00 docs: remove Angular 9 from support table (#43350)
PR Close #43350
2021-09-07 21:29:32 +00:00
dario-piotrowicz 1bc1971d15 docs: fix app-hero-detaill typo (#43349)
PR Close #43349
2021-09-07 21:25:03 +00:00
George Kalpakas 4e11347a25 build: update feature request template to include core package (#43323)
Update the dropdown list to include core in the list of packages.
PR Close #43323
2021-09-07 21:24:15 +00:00
William Sedlacek 3b4f121caf docs(common): correct typos in jsdoc of http client (#43352)
This corrects four typos in the HttpClient JSDoc
capabilites => capabilities
reuested => requested
wuth => with
responmse => response
PR Close #43352
2021-09-07 18:45:16 +00:00
Ikko Ashimine d8f9e6131f refactor: fix typo in postinstall-patches.js (#43362)
refering -> referring
PR Close #43362
2021-09-07 18:44:47 +00:00
Enea Jahollari aa1782cee6 docs: enhance spacings in dynamic component loader section examples (#43241)
PR Close #43241
2021-09-02 16:45:10 +00:00
Enea Jahollari 4e4a198b3f docs: enhance spacings in content projection section examples (#43241)
PR Close #43241
2021-09-02 16:45:10 +00:00
Enea Jahollari 5af952491a docs: enhance spacings in inputs outputs section examples (#43241)
PR Close #43241
2021-09-02 16:45:10 +00:00
Enea Jahollari d7711d0510 docs: enhance spacings in component interaction section examples (#43241)
PR Close #43241
2021-09-02 16:45:10 +00:00
Enea Jahollari f5d0c889ab docs: enhance spacings in component lifecycle section examples (#43241)
PR Close #43241
2021-09-02 16:45:09 +00:00
Enea Jahollari dc46cc4b37 docs: enhance spacings in component overview section examples (#43241)
PR Close #43241
2021-09-02 16:45:09 +00:00
Enea Jahollari 39c50b577e docs: enhance spacings in try it section examples (#43241)
PR Close #43241
2021-09-02 16:45:09 +00:00
Enea Jahollari 8e1c309e52 docs: enhance what is angular section spacing (#43241)
PR Close #43241
2021-09-02 16:45:09 +00:00
Pete Bacon Darwin a6e22c4b8e build(docs-infra): update dgeni-packages to improve checkLinks messages (#43317)
This update should make the list of files with broken links more readable.

Fixes #43214

PR Close #43317
2021-09-02 16:44:47 +00:00
Alan Agius a0bd6e90f9 fix(router): add more context to Unhandled Navigation Error (#43291)
Previously, the error message was not added to `Unhandled Navigation Error`

Before
```
main.js:1 Unhandled Navigation Errors:
```

After
```
main.js:1 Unhandled Navigation Errors: SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://localhost:4200/' cannot be created in a document with origin 'http://127.0.0.1:8080' and URL 'http://127.0.0.1:8080/'.
```

PR Close #43291
2021-09-01 21:15:00 +00:00
Jessica Janiuk caecd1889b release: cut the v12.2.4 release (#43308) 2021-09-01 13:30:13 -05:00
George Kalpakas d8f637ab43 docs: add step to declare ProductAlertsComponent in tutorial (#43229)
The getting-started tutorial at angular.io/start instructs users to
generate a `ProductAlertsComponent` using the "Angular generator"
feature in [StackBlitz](https://stackblitz.com/). However, unlike the
Angular CLI, generating a component in StackBlitz does not automatically
declare it in `AppModule`, which is a requirement for the component to
be used in the application. This resulted in a compile error when
following the tutorial instructions.

This commit fixes this by adding a step to manually import and declare
the newly generated component in `app.module.ts`.

Fixes #43020
Closes #43212

PR Close #43229
2021-08-30 13:37:46 -07:00
Joey Perrott 46bd8f2495 ci: update pullapprove config to reflect kyliau's departure (#43230)
Update pullapprove configuration to remove kyliau from groups.

PR Close #43230
2021-08-30 08:23:41 -07:00
Joey Perrott d84a4eb90f docs: remove recent departures from contributors page (#43230)
PR Close #43230
2021-08-30 08:23:40 -07:00
Daniel Trevino 692e8ab21e test(compiler-cli): add tests for NullishCoalescingNotNullableCheck (#43232)
Add tests to make sure the nullish coalescing check is generating the
correct diagnostics.

Refs #42966

PR Close #43232
2021-08-26 16:36:33 -07:00
Daniel Trevino 5d64d17a52 refactor(compiler-cli): add NullishCoalescingNotNullableCheck (#43232)
Add a template check that returns diagnostics if the left side of a
nullish coalescing operation is not nullable.

Refs #42966

PR Close #43232
2021-08-26 16:36:33 -07:00
Daniel Trevino 9c6399926a refactor(compiler-cli): use TemplateCheckWithVisitor in InvalidBananaInBoxCheck (#43232)
Modify the existing template check to use the new abstract class. This
makes template checks easier to read and understand.

Refs #42966

PR Close #43232
2021-08-26 16:36:32 -07:00
Daniel Trevino 75fc846745 refactor(compiler-cli): add abstract TemplateCheckWithVisitor class (#43232)
Add an abstract class that has a default implementation of the run
function and visits all nodes. Authors of template checks can extend
this class and override the `visitNode` method to return diagnostics.

Refs #42966

PR Close #43232
2021-08-26 16:36:32 -07:00
Daniel Trevino debe517d4f refactor(compiler-cli): move component out of TemplateContext (#43232)
Move `component` out of the `TemplateContext` so the context can be
reused for multiple components.

Refs #42966

PR Close #43232
2021-08-26 16:36:32 -07:00
Daniel Trevino e29f1d9cf8 refactor(compiler-cli): change checks folder structure (#43232)
Change template checks into `extended/checks` instead of
`extended/src/template_checks`.

Refs #42966

PR Close #43232
2021-08-26 16:36:32 -07:00
Daniel Trevino 553eb2cc9f refactor(compiler-cli): remove whitespace (#43232)
Remove extra whitespace introduced in a previous PR.

PR Close #43232
2021-08-26 16:36:32 -07:00
Joey Perrott 30d959a48a build: update issue template to include core package (#43272)
Update the dropdown list to include core in the list of packages.

PR Close #43272
2021-08-26 19:43:14 +00:00
Andrew Scott fdcb420bd7 docs(router): Fix incorrect name for url match options (#43268)
fixes #43123

PR Close #43268
2021-08-26 10:07:24 -07:00
Kristiyan Kostadinov 524b4d5a1f refactor(forms): make error messages easier to tree shake (#43223)
Currently the error message functions are defined as static methods on a class which means that as soon as one of them is used somewhere, all of them have to be retained. This isn't a problem at the moment, because all of them are behind `ngDevMode` checks, but it's error prone and it's easy to fix.

These changes move them out into functions so that they can be imported individually. It also has the advantage of allowing Webpack to minify the function names.

PR Close #43223
2021-08-26 10:05:36 -07:00
segunb fb64f711f8 docs: Close #View tag to avoid confusion (#43256)
PR Close #43256
2021-08-26 09:44:08 -07:00
nickreid e7e78e6709 refactor(zone.js): Rename class ZoneDelegate to _ZoneDelegate to differentiate it from the ZoneDelgate interface (#43019)
The current naming causes tsickle to emit `/** @implements {ZoneDelegate} */ class ZoneDelegate ...`, which is a cyclic definition error in Closure Compiler. Additionally, the name shadowing is also confusing to humans.

PR Close angular#43019

PR Close #43019
2021-08-25 15:12:01 -07:00
nickreid 8233906be2 fix(compiler-cli): Emit type annotations for synthesized decorator fields (#43021)
Previously, the decorator transformer was annotating the synthesized properties with TS type annotations. However, because it ran after the JSDoc transformer, the TS types were just dropped from the emitted JS. Attempting to move the decorator transformer before the JSDoc transformer causes tsickle crashes because synthetic AST fragments are not attached to a SourceFile node.

PR Close #43021
2021-08-25 15:05:29 -07:00
Alex Rickabaugh b8183614f5 release: cut the v12.2.3 release (#43257)
PR Close #43257
2021-08-25 14:20:31 -07:00
George Kalpakas b46ce7d42f build(docs-infra): upgrade cli command docs sources to 56c5962df (#43239)
Updating [angular#12.2.x](https://github.com/angular/angular/tree/12.2.x) from
[cli-builds#12.2.x](https://github.com/angular/cli-builds/tree/12.2.x).

##
Relevant changes in
[commit range](https://github.com/angular/cli-builds/compare/7c2d76d9e...56c5962df):

**Modified**
- help/lint.json

PR Close #43239
2021-08-25 10:48:04 -07:00
Daniel Trevino 36bf0ae985 test(language-service): add test for extended diagnostics (#43134)
Add a test to make sure extended template diagnostics are being correctly
generated in the language service for non-ts files.

Refs #42966

PR Close #43134
2021-08-25 10:43:02 -07:00
Daniel Trevino 3b317dcf87 refactor(compiler-cli): integrate extended diagnostics with the language service (#43134)
Add the call to get the extended template diagnostics in
the compiler's `getDiagnosticsForComponent`. This makes showing
extended diagnostics in non-ts files posible.

Refs #42966

PR Close #43134
2021-08-25 10:43:02 -07:00
Daniel Trevino 3ad527d86e refactor(compiler-cli): rename ExtendedTemplateChecker get diagnostics fucntion (#43134)
Rename `getExtendedTemplateDiagnosticsForComponent` to
`getDiagnosticsForComponent` since it's implied they are extended
diagnostics.

Refs #42966

PR Close #43134
2021-08-25 10:43:02 -07:00
Daniel Trevino b6ff762e36 refactor(compiler-cli): move getDiagnosticsForComponent to compiler (#43134)
Change the language service to call `getDiagnosticsForComponent` from
the compiler instead of the `TemplateTypeChecker`.

Refs #42966

PR Close #43134
2021-08-25 10:43:02 -07:00
Daniel Trevino e196311e5c refactor(compiler-cli): move ExtendedTemplateChecker to LazyCompilationState (#43134)
Create the `ExtendedTemplateChecker` during `makeCompilation`, that way
it's avaiblable in the whole compiler.

Refs #42966

PR Close #43134
2021-08-25 10:43:01 -07:00
Daniel Trevino 3cf8f66f3a refactor(compiler-cli): use TemplateDiagnostic in extended package (#43134)
Return `TemplateDiagnostic` instead of `ts.Diagnostic` when getting the
extended template diagnostics. This makes the integration with the
language service easier. This also fixes the error code and now uses the
`ngErrorCode` for extended template diagnostics.

Refs #42966

PR Close #43134
2021-08-25 10:43:01 -07:00
dario-piotrowicz d7b6416fcf refactor(common): fix emiting typos (#43221)
fix some of the aio examples which log strings containing "emiting" instead of "emitting"

PR Close #43221
2021-08-23 13:30:29 -07:00
shlasouski fc7f92159d fix(service-worker): NPE if onActionClick is undefined (#43210)
Previously, it leads to fail if notification.data.onActionClick is undefined

PR Close #43210
2021-08-23 13:29:59 -07:00
Daniel Trevino cb8e51f8cf test(language-service): add extended diagnostics test (#43107)
Add a test in the langauge-service to make sure the extended template
diagnostics are being correctly generated.

Refs #42966

PR Close #43107
2021-08-19 11:55:28 -07:00
Daniel Trevino e6b2bedd70 test(compiler-cli): add extended template diagnostics end-to-end tests (#43107)
This commit adds extended template diagnostics end-to-end tests, to make
sure the diagnostics are generated correctly. Template checks are
already tested with unit tests.

Refs #42966

PR Close #43107
2021-08-19 11:55:28 -07:00
Daniel Trevino 58a19a3021 refactor(compiler-cli): add extendedTemplateCheck phase to compiler (#43107)
This commit integrates extended template checks with the compiler, by
adding another phase of diagnostics generation. This integration is
under the `_extendedTemplateDiagnostics` flag.

Refs #42966

PR Close #43107
2021-08-19 11:55:28 -07:00
Daniel Trevino f70d2a2981 refactor(compiler-cli): export ExtendedTemplateCheckerImpl and template checks (#43107)
This commit exports the implementation of `ExtendedTemplateChecker` to
generate extended template diagnostics and all the template checks.

Refs #42966

PR Close #43107
2021-08-19 11:55:28 -07:00
Daniel Trevino 3bbf00fdd4 refactor(compiler-cli): add ExtendedTemplateChecker (#43107)
Change the current way to run template checks to the
`ExtendedTemplateChecker` instead of just the
`getExtendedTemplateDiagnosticsForComponent` function. Refactored the
tests that used the previous function to use the new class.

Refs #42966

PR Close #43107
2021-08-19 11:55:28 -07:00
dario-piotrowicz 19fa033f79 refactor(docs-infra): use tslint in aio's tools-lint script (#43010)
Instead of the deprecated tslint use eslint in the aio's tools-lint
script

PR Close #43010
2021-08-19 11:20:06 -07:00
Erik Slack 513b17043e docs: fix typo (#43190)
Fix typo in description of ngxp and link for angular community meetup

PR Close #43190
2021-08-18 10:52:19 -07:00
Dylan Hunn c501e86fd2 release: cut the v12.2.2 release (#43195) 2021-08-18 10:15:31 -07:00
Kirk Larkin e849e57059 docs: tidy up description of NgComponentOutlet (#43159)
PR Close #43159
2021-08-18 09:17:44 -07:00
Joe Martin (Crowdstaffing) e31ed3d0dc docs: update links and formatting (#43066)
Update links and formatting prior to creating sub-topics.

Update links to reference links for consistency.  Update formatting for code sections.  Updated list alignment for consistent formatting.

PR Close #43066
2021-08-17 20:00:58 -07:00
Pete Bacon Darwin 545972e5e9 docs(upgrade): add @extensible to the UpgradeComponent class (#42807)
This class is designed to be used as a base class. Therefore it should not be
marked as `final` in the API docs.

PR Close #42807
2021-08-17 09:23:09 -07:00
Pete Bacon Darwin 38d51e4926 build(docs-infra): add sealed markers to classes in API pages (#42807)
This change will mark classes as `sealed` unless they have been annotated
with an `@extensible` jsdoc tag.

Fixes #42802

PR Close #42807
2021-08-17 09:23:09 -07:00
Kristiyan Kostadinov 535837e617 perf(platform-browser): avoid intermediate arrays in server transition (#43145)
The server transition initializer looks for some `style` tags and clears them based on their `ng-transition` ID. The way we currently have the logic creates a couple of intermediate arrays just so we can call `forEach` at the end.

These changes use a regular `for` loop with an `if` statement instead. This isn't a _massive_ performance improvement, but the logic does run during app initialization which is performance-sensitive and it's an easy change to make on our end.

PR Close #43145
2021-08-17 09:22:05 -07:00
Charles Lyding bb6555979d fix(animations): add pure annotations to static property initializers (#43064)
Class static properties with initializers that cause code execution (for example, call expressions or new expressions) have the potential to cause side effects at module evaluation. This is similar in effect to module level code. As a result, optimizers can not safely remove a class with such a static property as the potential side effects may have meaningful effects on the state of the application execution. To allow classes with these type of static properties to be optimized and removed if unused, the initializer expressions for the static properties can be annotated as pure. This annotation provides a signal to an optimizer that the expression does not have any potential side effects and is useful in cases where static analysis can not currently prove that there are, in fact, no side effects caused by the initializer.

PR Close #43064
2021-08-16 17:20:21 -07:00
Charles Lyding 738b23347e fix(core): add pure annotations to static property initializers (#43064)
Class static properties with initializers that cause code execution (for example, call expressions or new expressions) have the potential to cause side effects at module evaluation. This is similar in effect to module level code. As a result, optimizers can not safely remove a class with such a static property as the potential side effects may have meaningful effects on the state of the application execution. To allow classes with these type of static properties to be optimized and removed if unused, the initializer expressions for the static properties can be annotated as pure. This annotation provides a signal to an optimizer that the expression does not have any potential side effects and is useful in cases where static analysis can not currently prove that there are, in fact, no side effects caused by the initializer.

PR Close #43064
2021-08-16 17:20:21 -07:00
dario-piotrowicz cd8b1a5087 refactor(compiler-cli): remove unused closureCompilerEnabled from NgtscProgram (#43148)
remove the NgtscProgram's private field closureCompilerEnabled as that
is not being used in the class itself

PR Close #43148
2021-08-16 17:19:54 -07:00
Joey Perrott c9def401f8 ci: update circle cache key (#43175)
Update the prefix used for the circle cache key to use new cache base.

PR Close #43175
2021-08-16 17:19:08 -07:00
Joey Perrott dfd6337bc9 build: add mainBranchName to github configuration (#43175)
Update the ng-dev config for Github to include the main branch name.

PR Close #43175
2021-08-16 17:19:08 -07:00
Joey Perrott fe6a5acd17 build: remove dev-infra directory and migrate to relying on @angular/dev-infra-private-builds (#43175)
Remove the dev-infra directory and complete the migration to using the code generated by the
angular/dev-infra repository.

PR Close #43175
2021-08-16 17:19:08 -07:00
George Kalpakas 768a6698a0 docs(router): use the correct live-example name in routing-overview.md (#43180)
The previously used code (`<live-example stackblitz="router">`) would
try to target the `router.stackblitz.json` file inside the
(non-existent) `routing-overview` example (same as the guide's name).

This commit fixes the code to correctly express the original intention
of targeting the default `stackblitz.json` file of the `router` example
with `<live-example name="router">`.

Fixes #43167

PR Close #43180
2021-08-16 17:18:29 -07:00
Pete Bacon Darwin cd10a4cc13 test(compiler): add a test for parsing multiline expressions in attributes (#43129)
This tests a scenario that was failing in an internal project.

PR Close #43129
2021-08-16 13:07:25 -07:00
Pete Bacon Darwin 1e811df79f test(compiler): check that the parser supports prematurely terminated interpolations (#43129)
Such interpolations turned up during internal testing at Google, so this
commit adds a test to prevent regressions.

PR Close #43129
2021-08-16 13:07:24 -07:00
Pete Bacon Darwin a701c10b77 refactor(compiler): use === rather than == in the ml_parser (#43129)
This is a simple tidy up commit to move to the more specific `===`
comparison operator in the HTML lexer/parser.

PR Close #43129
2021-08-16 13:07:24 -07:00
Pete Bacon Darwin 510931a7ab refactor(compiler): share isQuote() via chars.ts (#43129)
This function is general purpose and by moving it into the
`chars.ts` file along with similar helpers, it can be reused
in the lexer, for instance.

PR Close #43129
2021-08-16 13:07:24 -07:00
Pete Bacon Darwin 92fa1a6cc0 refactor(compiler): remove cyclic dependencies (#43129)
This commit removes 9 cycles in the dependency graph of the compiler code.

PR Close #43129
2021-08-16 13:07:24 -07:00
Pete Bacon Darwin 616133c704 test(compiler-cli): clarify source-map expectations in compliance tests (#43129)
The compliance tests can check source-map segments against expectations
encoded into the expectation files. Previously, the encoding of the expected
segment was only delimited by whitespace, but this made it difficult to identify
segments that started or ended with whitespace.

Now these segment expectations are wrapped in double-quotes which makes
it easier to read and understand the expectation files.

PR Close #43129
2021-08-16 13:07:24 -07:00
Pete Bacon Darwin c792dd739a refactor(ngcc): remove unused import (#43129)
This import is not used in the file, so can be removed.

PR Close #43129
2021-08-16 13:07:24 -07:00
TIffany Davis 83fa3ee581 docs: add tmdavis to contributors (#43135)
PR Close #43135
2021-08-16 10:47:09 -07:00
Renovate Bot 304c85edd0 build: update dependency entities to v3 (#43095)
PR Close #43095
2021-08-16 10:46:28 -07:00
Edoardo Dusi 1e39e11ba0 refactor(common): change encoding function in httpparams for better performances and coding standards (#42998)
HttpParams uses custom encoding function "standardEncoding" to encode query string preserving specific charachters. This refactoring aims to improve performances and code quality of that function by using a RegExp and a Map object instead of a chain of replace functions.

PR Close #42998
2021-08-16 10:44:53 -07:00
Aristeidis Bampakos e0a8ca7eee docs: update Aristeidis bio in GDE list (#43164)
PR Close #43164
2021-08-16 09:39:06 -07:00
Andrew Scott 6449590ec8 fix(router): eagerly update internal state on browser-triggered navigations (#43102)
The management of `browserUrlTree` currently has several problems with
correctly tracking the actual state of the browser.

This change makes the Router eagerly update the `browserUrlTree` when
handling navigations triggered by browser events (i.e., not 'imperative'). This
is because with those types of navigations, the browser URL bar is
_already_ updated. If we do not update the internal tracking of the
`browserUrlTree`, we will be out of sync with the real URL if the
navigation is rejected.

It would be best if we could remove `browserUrlTree` completely, but doing that
would require a lot more investigation and is blocked by #27059 because
the SpyLocation used in tests does not emulate real browser behavior.

fixes #43101

PR Close #43102
2021-08-16 09:33:24 -07:00
ali 1939613f71 docs: add example for template local variable (#43137)
PR Close #43137
2021-08-16 09:24:12 -07:00
dario-piotrowicz 6d6638c1e9 refactor(compiler-cli): remove extra 'diagnostic' from readResource comment (#43147)
remove the extra 'diagnostic' present in the comment for the
ResourceHost's readResource method

PR Close #43147
2021-08-16 09:23:40 -07:00
dario-piotrowicz cda9d16838 refactor(compiler): fix lateron typo in i18n ExtractorHost (#43160)
fix typo put in the ExtractorHosts's resourceNameToFileName comment
in which "later on" is spelled "lateron"

PR Close #43160
2021-08-16 09:23:14 -07:00
Joey Perrott 19fd2f4125 ci: add breaking changes auto labeling action (#43141)
Automatically add/remove `breaking changes` label to PRs as needed based on whether
the PR contains a commit with a breaking change.

PR Close #43141
2021-08-13 14:58:46 -07:00
pichuser 7a67597d01 docs: fix description: "property decorator" (not parameter) (#43068) (#43128)
PR Close #43068

PR Close #43128
2021-08-12 15:36:59 -07:00
Andrew Scott ec0a3007c6 refactor(compiler): Remove compileUndecoratedClasses config file (#43043)
This config file was added to support g3 patches. Now that the patch is removed internally,
we can remove the file completely

PR Close #43043
2021-08-12 15:35:08 -07:00
Theoklitos Bampouris 67ae442edc docs: adjust description to code example (#43127)
Remove promise's then(...) callback from description to match the code example's async/await syntax.
PR Close #43127
2021-08-12 15:32:47 -07:00
Andrew Kushnir 9136dbd65c release: cut the v12.2.1 release (#43117) 2021-08-11 10:13:33 -07:00
Daniel Trevino 4a1d9a78fa refactor(compiler-cli): add test for BananaInBoxCheck (#42984)
Create the test package for extended_template_diagnostics and add a unit
test for the `BananaInBoxCheck`.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino 0f8ae8bf7f refactor(compiler-cli): add BananaInBoxCheck to the template checks (#42984)
Add the implementation of a Template Check that ensures the correct
use of two-way binding syntax. Generates a warning when
'([foo])="bar"' is found instead of '[(foo)]="bar"'.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino c42b50cfbe refactor(compiler-cli): visit inputs and outputs for elements and templates (#42984)
This commit adds to the exisiting `RecursiveVisitor` and visits inputs
and outputs for elements and templates.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino a3bc29bbb2 refactor(compiler-cli): move getSourceCodeForDiagnostic to utils (#42984)
Export `getSourceCodeForDiagnostic` from `ngtsc/testing` to make it
available for other packages. This will help confirm that the source
code is correct in other tests.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino 387dcc6621 refactor(compiler-cli): move typecheck test utils into its own package (#42984)
This commit moves the test utils used in the typechecking tests into its
own package. This makes them available to be used in the tests of a
different package.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino 029060f2d6 refactor(compiler-cli): introduce getExtendedTemplateDiagnosticsForComponent function (#42984)
Add function to get extended template diagnostics generated by all the template checks.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino a53d26847c refactor(compiler-cli): make makeTemplateDiagnostic wrapper error (#42984)
specific

This commit makes the wrapper function `makeTemplateDiagnostic` take an
ErrorCode as a type for the `ts.Diagnostic`s to be generated.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Daniel Trevino 21e2b93046 refactor(compiler-cli): introduce extended package to typecheck with it's API (#42984)
This commit introduces //packages/compiler-cli/src/ngtsc/typecheck/extended
as a container for a new phase of diagnostics generation. The API provides an
interface for new template checks to implement and generate template diagnostics.

Refs #42966

PR Close #42984
2021-08-10 15:55:50 -07:00
Tim Gates 92012ec4fd docs: Fix a few typos (#43051)
There are small typos in:
- aio/content/guide/universal.md
- aio/content/guide/upgrade.md
- aio/content/guide/workspace-config.md
- dev-infra/ng-dev.js
- integration/check-dependencies.js

Fixes:
- Should read `mergeable` rather than `mergable`.
- Should read `upgradeable` rather than `upgradable`.
- Should read `thresholds` rather than `threshholds`.
- Should read `lease` rather than `leage`.
- Should read `ignore` rather than `ingore`.
- Should read `bootstrapping` rather than `bootstraping`.

PR Close #43051
2021-08-10 11:59:29 -07:00
Erik Slack 6ca81a706c docs: add angular community meetup and ngxp to community resources (#43103)
Invite people to get more involved with Angular's community via these

PR Close #43103
2021-08-10 11:56:22 -07:00
Amadou Sall 0baabcb7da docs: remove the mention of Stylus (#43013)
Stylus is not supported anymore by Angular, so it should be removed from the Angular docs

PR Close #43013
2021-08-10 11:55:35 -07:00
Andrew Kushnir dc6cb5a3d4 Revert "build(dev-infra): exlude commit message filter from formatting (#43091)" (#43105)
This reverts commit 7da3570be8.

The reason for the revert is the breakage of the merge tooling (`dev-infra/commit-message-filter.js: No such file or directory`).

PR Close #43105
2021-08-10 11:49:42 -07:00
Vugar_Abdullayev 7da3570be8 build(dev-infra): exlude commit message filter from formatting (#43091)
exlude commit-message-filter.js from clang format and tslint

PR Close #43091
2021-08-10 10:44:35 -07:00
Andrew Kushnir ec192b2b71 refactor(core): replace references to goog.LOCALE with goog.getLocale() (#43089)
It is necessary in order to distinguish 2 different reasons for referencing the compiled-in locale.

1. Some code just needs to pass the locale value on to logic that actually uses it.
2. Other code uses the locale value to select locale-specific user-visible data and behavior.

Code modified by this change is of the first kind and should use `goog.getLocale()` in the future.

Note: there are still references to the `goog.LOCALE` in Angular codebase, but they are of second type.

PR Close #43089
2021-08-10 10:35:26 -07:00
George Kalpakas 55fe2c667d build(docs-infra): upgrade cli command docs sources to 7c2d76d9e (#43094)
Updating [angular#12.2.x](https://github.com/angular/angular/tree/12.2.x) from
[cli-builds#12.2.x](https://github.com/angular/cli-builds/tree/12.2.x).

##
Relevant changes in
[commit range](https://github.com/angular/cli-builds/compare/18b20d67b...7c2d76d9e):

**Modified**
- help/generate.json

PR Close #43094
2021-08-10 10:34:17 -07:00
George Kalpakas 8a3d2aad30 fix(docs-infra): correctly detect chunk load errors (#43088)
It seems that at some point (potentially with the switch to Webpack 5)
Webpack started using the full chunk name (instead of just a numeric
identifier) in `ChunkLoadError` messages. So the error messages changed
from:
```
ChunkLoadError: Loading chunk 2 failed.
```

...to:
```
ChunkLoadError: Loading chunk src_app_something_some_module_ts failed.
```

This commit updates the regex that is used to detect such errors (in
order to print ServiceWorker-related debug info) to correctly recognize
the new error message format.

PR Close #43088
2021-08-09 12:25:42 -07:00
Andrew Scott dd3abdb9d9 fix(router): ensure check for match options is compatible with property renaming (#43086)
After renaming, 'paths' is not in routerLinkOptions since it's been renamed.

PR Close #43086
2021-08-09 10:26:07 -07:00
Jeroen van Warmerdam d93427b806 docs: fix cli link (#43085)
PR Close #43085
2021-08-09 09:41:41 -07:00
George Kalpakas 032e65c895 build(docs-infra): update docs examples to Angular v12.1.3 (#42949)
This commit updates the docs examples to Angular v12.1.3. In addition to
updating the dependencies versions, it also updates the projects'
structure and configs to more closely match what a new v12 CLI app would
look like. See, also, the [diff][1] between a basic v11.2.11 CLI app and
a v12.1.3 one.

[1]: https://github.com/cexbrayat/angular-cli-diff/compare/11.2.11..12.1.3

PR Close #42949
2021-08-09 09:41:01 -07:00
George Kalpakas ee05a285f9 docs: fix typo in Compiler Options guide (#42949)
PR Close #42949
2021-08-09 09:41:01 -07:00
Joey Perrott 4371ff9092 fix(dev-infra): search since HEAD on the local branch for version tags when creating stamps (#43065)
Using `HEAD~100` was errantly left in the snapshot stamping logic.

PR Close #43065
2021-08-06 08:54:22 -07:00
Joey Perrott a26b0dcc72 ci: stop publishing snapshots to angular/dev-infra-private-builds (#43059)
We no longer publish to angular/dev-infra-private-builds as the dev-infra
content has been moved to angular/dev-infra.

PR Close #43059
2021-08-05 16:05:03 -07:00
Fabien BERNARD 30c5b9c144 docs: fix interval type in the example (#43042)
`window.setInterval` returns a `number`, let's fix this example.

PR Close #43042
2021-08-05 15:33:14 -07:00
George Kalpakas 673f7a7954 build(docs-infra): upgrade cli command docs sources to 18b20d67b (#43026)
Updating [angular#12.2.x](https://github.com/angular/angular/tree/12.2.x) from
[cli-builds#12.2.x](https://github.com/angular/cli-builds/tree/12.2.x).

##
Relevant changes in
[commit range](https://github.com/angular/cli-builds/compare/a57976b98...18b20d67b):

**Modified**
- help/e2e.json

PR Close #43026
2021-08-04 12:10:46 -07:00
Andrew Scott cdc8c7cad0 release: cut the v12.2.0 release (#43047) 2021-08-04 10:24:49 -07:00
Kristiyan Kostadinov bd7f0d8b70 fix(core): incorrect error reported when trying to re-create view which had an error during creation (#43005)
Currently if a view throws an error during creation mode, we mark it as `incompleteFirstPass` so that we can try to recover later. The recovery is only possible inside component views.

The problem is that when this was introduced, I forgot to flip the `firstCreatePass` when an error is thrown which meant that calling `renderView` on the same component again is allowed. It will eventually hit an assertion which can be confusing for the end user. This issue only manifests itself when rendering views "manually" through `ViewContainerRef` (e.g. using `NgIf`).

These changes flip the `firstCreatePass` back to false on errors so that trying to re-render the same view will throw an error which is consistent to the one that broke the view during creation.

Fixes #41383.

PR Close #43005
2021-08-04 08:58:29 -07:00
atscott 3a9ce61ea4 Revert "refactor(ngcc): remove unused import (#42062)" (#43033)
This reverts commit 42265cca1c.

PR Close #43033
2021-08-03 15:39:00 -07:00
atscott ae98b24eb7 Revert "test(compiler-cli): clarify source-map expectations in compliance tests (#42062)" (#43033)
This reverts commit 29f9888a98.

PR Close #43033
2021-08-03 15:39:00 -07:00
atscott 4997a3f692 Revert "refactor(compiler): remove cyclic dependencies (#42062)" (#43033)
This reverts commit 75855196e3.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott 6a59e6b009 Revert "refactor(compiler): support interpolation tokens when lexing markup (#42062)" (#43033)
This reverts commit c8a46bfdcd.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott 6f80c55dbd Revert "refactor(compiler): share isQuote() via chars.ts (#42062)" (#43033)
This reverts commit 3d3b69ff81.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott 07846e550c Revert "refactor(compiler): support interpolation tokens when lexing attribute values (#42062)" (#43033)
This reverts commit c516e252fc.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott f18131f372 Revert "refactor(compiler): support encoded entity tokens when lexing markup (#42062)" (#43033)
This reverts commit 942b24d5ea.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott f24b94f5d9 Revert "refactor(compiler): expose token parts in Text nodes (#42062)" (#43033)
This reverts commit 8a54896a91.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott 6caafc2062 Revert "test(compiler): check fullStart source-span (#42062)" (#43033)
This reverts commit 973f9b8d19.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott f883aaeb89 Revert "fix(compiler): include leading whitespace in source-spans of i18n messages (#42062)" (#43033)
This reverts commit f08516db09.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott 2215af252c Revert "refactor(compiler): define interfaces for each lexer token (#42062)" (#43033)
This reverts commit 9b3d4f5575.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott db4147b4d2 Revert "test(compiler): check that the parser supports prematurely terminated interpolations (#42062)" (#43033)
This reverts commit 11ebe21d0d.

PR Close #43033
2021-08-03 15:38:59 -07:00
atscott 2dc6efed4e Revert "refactor(compiler): use === rather than == in the ml_parser (#42062)" (#43033)
This reverts commit 28b0c45fde.

PR Close #43033
2021-08-03 15:38:58 -07:00
atscott 1d307bc5bf Revert "test(compiler): add a test for parsing multiline expressions in attributes (#42062)" (#43033)
This reverts commit fe12651580.

PR Close #43033
2021-08-03 15:38:58 -07:00
ivanwonder aace1e71d8 fix(language-service): global autocomplete doesn't work when the user tries to modify the symbol (#42923)
When the user tries to trigger suggestions from an interruption,
the LS should provide the global completions. For example,
`[input]="t¦"`, the `t` can be the `true` or the symbol from
the component context.

PR Close #42923
2021-08-02 17:08:30 -07:00
dario-piotrowicz fbfec946a7 docs: amend links in content-projection guide (#43009)
PR Close #43009
2021-08-02 15:36:52 -07:00
Kristiyan Kostadinov 0e47334db8 refactor(core): update peerDependencies to allow rxjs7 (#42991)
We can't update the framework to rxjs7 until version 13, because it contains breaking changes, but we can allow users to opt into it since all of our code should be compatible.

These changes expand the allowed version range of rxjs and add an integration test to verify that we don't get compilation errors. Note that we also have a test that runs the AIO examples against rxjs 7 already (#42660).

Fixes #41897.

PR Close #42991
2021-08-02 13:55:01 -07:00
Pete Bacon Darwin e4f62c12f5 test(compiler): add a test for parsing multiline expressions in attributes (#42062)
This tests a scenario that was failing in an internal project.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin ea3a14805e refactor(compiler): use === rather than == in the ml_parser (#42062)
This is a simple tidy up commit to move to the more specific `===`
comparison operator in the HTML lexer/parser.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin a96f9c91a2 test(compiler): check that the parser supports prematurely terminated interpolations (#42062)
Such interpolations turned up during internal testing at Google, so this
commit adds a test to prevent regressions.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin a8c0f4f1ba refactor(compiler): define interfaces for each lexer token (#42062)
These token interfaces will make it easier to reason about tokens in the
parser and in specs.

Previously, it was never clear what items could appear in the `parts`
array of a token given a particular `TokenType`. Now, each token interface
declares a labelled tuple for the parts, which helps to document the token
better.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 11ef03b36f fix(compiler): include leading whitespace in source-spans of i18n messages (#42062)
Previously, the way templates were tokenized meant that we lost information
about the location of interpolations if the template contained encoded HTML
entities. This meant that the mapping back to the source interpolated strings
could be offset incorrectly.

Also, the source-span assigned to an i18n message did not include leading
whitespace. This confused the output source-mappings so that the first text
nodes of the message stopped at the first non-whitespace character.

This commit makes use of the previous refactorings, where more fine grain
information was provided in text tokens, to enable the parser to identify
the location of the interpolations in the original source more accurately.

Fixes #41034

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 8e798effe4 test(compiler): check fullStart source-span (#42062)
The tests were checking that the source-span of parsed HTML nodes were
accurate, but they were not checking the span when it includes the
"leading trivia", which are given by the `fullStart` rather than `start`
location.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 54f73530a8 refactor(compiler): expose token parts in Text nodes (#42062)
When it was tokenized, text content is split into parts that can include
interpolations and encoded entities tokens.

To make this information available to downstream processing, this commit
adds these tokens to the `Text` AST nodes, with suitable processing.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 61080ea4bc refactor(compiler): support encoded entity tokens when lexing markup (#42062)
The lexer now splits encoded entity tokens out from text and attribute value tokens.

Previously encoded entities would be decoded and the decoded value would be
included as part of the text token of the surrounding text. Now the entities
have their own tokens. There are two scenarios: text and attribute values.

Previously the contents of `<div>Hello &amp; goodbye</div>` would be a single
TEXT token. Now it will be three tokens:

```
TEXT: "Hello "
ENCODED_ENTITY: "&", "&amp;"
TEXT: " goodbye"
```

Previously the attribute value in `<div title="Hello &amp; goodbye">` would be
a single text token. Now it will be three tokens:

```
ATTR_VALUE_TEXT: "Hello "
ENCODED_ENTITY: "&", "&amp;"
ATTR_VALUE_TEXT: " goodbye"
```

- ENCODED_ENTITY tokens have two parts: "decoded" and "encoded".
- ENCODED_ENTITY tokens are always preceded and followed by either TEXT tokens
  or ATTR_VALUE_TEXT tokens, depending upon the context, even if they represent
  an empty string.

The HTML parser has been modified to recombine these tokens to allow this
refactoring to have limited effect in this commit. Further refactorings
to use these new tokens will follow in subsequent commits.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 4116d5d18f refactor(compiler): support interpolation tokens when lexing attribute values (#42062)
The lexer now splits interpolation tokens out from attribute value tokens.
Previously the attribute value of `<div attr="Hello, {{ name}}">` would be a single
token. Now it will be three tokens:

```
ATTR_VALUE_TEXT: "Hello, "
ATTR_VALUE_INTERPOLATION: "{{", " name", "}}"
ATTR_VALUE_TEXT: ""
```

- ATTR_VALUE_INTERPOLATION tokens have three parts, "start marker",
  "expression" and "end marker".
- ATTR_VALUE_INTERPOLATION tokens are always preceded and followed
  by TEXT tokens, even if they represent an empty string.

The HTML parser has been modified to recombine these tokens to allow this
refactoring to have limited effect in this commit. Further refactorings
to use these new tokens will follow in subsequent commits.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 5572278826 refactor(compiler): share isQuote() via chars.ts (#42062)
This function is general purpose and by moving it into the
`chars.ts` file along with similar helpers, it can be reused
in the lexer, for instance.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin b442c4991d refactor(compiler): support interpolation tokens when lexing markup (#42062)
The lexer now splits interpolation tokens out from text tokens.

Previously the contents of `<div>Hello, {{ name}}<div>` would be a single
text token. Now it will be three tokens:

```
TEXT: "Hello, "
INTERPOLATION: "{{", " name", "}}"
TEXT: ""
```

- INTERPOLATION tokens have three parts, "start marker", "expression"
  and "end marker".
- INTERPOLATION tokens are always preceded and followed by TEXT tokens,
  even if they represent an empty string.

The HTML parser has been modified to recombine these tokens to allow this
refactoring to have limited effect in this commit. Further refactorings
to use these new tokens will follow in subsequent commits.

PR Close #42062
2021-08-02 09:53:18 -07:00
Pete Bacon Darwin 014763e42c refactor(compiler): remove cyclic dependencies (#42062)
This commit removes 9 cycles in the dependency graph of the compiler code.

PR Close #42062
2021-08-02 09:53:17 -07:00
Pete Bacon Darwin 86cfbf8c8a test(compiler-cli): clarify source-map expectations in compliance tests (#42062)
The compliance tests can check source-map segments against expectations
encoded into the expectation files. Previously, the encoding of the expected
segment was only delimited by whitespace, but this made it difficult to identify
segments that started or ended with whitespace.

Now these segment expectations are wrapped in double-quotes which makes
it easier to read and understand the expectation files.

PR Close #42062
2021-08-02 09:53:17 -07:00
Pete Bacon Darwin 3b92b4abd3 refactor(ngcc): remove unused import (#42062)
This import is not used in the file, so can be removed.

PR Close #42062
2021-08-02 09:53:17 -07:00
Alex Rickabaugh dd6e80aac5 refactor(bazel): extract function to patch fileNameToModuleName on host (#42974)
This commit extracts the patching operation that adds `fileNameToModuleName`
to the Angular compiler's `ts.CompilerHost` into a separate function, so
that it can be invoked in other compilation flows besides the one outlined
in `ngc-wrapped`. This is primarily needed for the xi18n operation in g3.

PR Close #42974
2021-07-30 09:29:45 -07:00
Alex Rickabaugh da50b9b5e7 refactor(compiler): remove unnecessary escapes (#42990)
This commit is part of a larger scale change to eliminate unnecessary
escapes in string literals, in advance of enabling stricter checks in
`ts_library` rules in g3.

PR Close #42990
2021-07-30 09:28:46 -07:00
Paul Gschwendtner 86e4b3cdf9 fix(dev-infra): browser archive rule should handle .dmg files (#42992)
We recently reworked our browser archive extraction to happen
at analysis time for better caching. This resulted in us breaking
the extraction of macOS dmg files so that Firefox is currently
not usable for local testing on macOS. We implement a similar special
logic for `.dmg` files to what has been done within the Bazel
webtesting rules.

PR Close #42992
2021-07-30 09:28:08 -07:00
Nichola Alkhouri 3fddcb5364 docs: Fix wrongly provided/Injected AnimalService (#42988)
In the logical tree example which demonstrate the use of `@SkipSelf` and  `@Host`, the provided and injected `AnimalService` are reversed.
PR Close #42988
2021-07-29 15:05:53 -07:00
Joe Martin d5cc87dc88 docs: Add josmar-crwdstffng to contributors list. (#42972)
Add josmar-crwdstffng to list in contributors.json.  Add josephmmartin
image file.

PR Close #42972
2021-07-28 15:56:02 -07:00
Joey Perrott b075721a49 fix(dev-infra): ensure that building environment stamp fails silently (#42985)
Previously when a failure occurred in part of building the environment stamp, the entire
process errored.  This should instead fail silently providing no value for the stamp.

PR Close #42985
2021-07-28 13:00:09 -07:00
Joey Perrott 3346cb6e4e release: cut the v12.2.0-rc.0 release (#42983) 2021-07-28 11:51:31 -07:00
660 changed files with 5764 additions and 30013 deletions
+5 -5
View File
@@ -114,11 +114,11 @@ build:remote --cpu=k8
build:remote --host_cpu=k8
# Toolchain and platform related flags
build:remote --crosstool_top=//dev-infra/bazel/remote-execution/cpp:cc_toolchain_suite
build:remote --extra_toolchains=//dev-infra/bazel/remote-execution/cpp:cc_toolchain
build:remote --extra_execution_platforms=//dev-infra/bazel/remote-execution:platform
build:remote --host_platform=//dev-infra/bazel/remote-execution:platform
build:remote --platforms=//dev-infra/bazel/remote-execution:platform
build:remote --crosstool_top=@npm//@angular/dev-infra-private/bazel/remote-execution/cpp:cc_toolchain_suite
build:remote --extra_toolchains=@npm//@angular/dev-infra-private/bazel/remote-execution/cpp:cc_toolchain
build:remote --extra_execution_platforms=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
build:remote --host_platform=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
build:remote --platforms=@npm//@angular/dev-infra-private/bazel/remote-execution:platform
# Remote instance and caching
build:remote --remote_instance_name=projects/internal-200822/instances/primary_instance
+13 -8
View File
@@ -24,15 +24,15 @@ version: 2.1
# **NOTE 2 **: If you change the cache key prefix, also sync the cache_key_fallback to match.
# **NOTE 3 **: Keep the static part of the cache key as prefix to enable correct fallbacks.
# See https://circleci.com/docs/2.0/caching/#restoring-cache for how prefixes work in CircleCI.
var_3: &cache_key v4-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
var_3: &cache_key v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
# We invalidate the cache if the Bazel version changes because otherwise the `bazelisk` cache
# folder will contain all previously used versions and ultimately cause the cache restoring to
# be slower due to its growing size.
var_4: &cache_key_fallback v4-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
var_4: &cache_key_fallback v1-angular-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
# Windows needs its own cache key because binaries in node_modules are different.
var_3_win: &cache_key_win v4-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
var_4_win: &cache_key_win_fallback v4-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
var_3_win: &cache_key_win v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}-{{ checksum "yarn.lock" }}-{{ checksum "WORKSPACE" }}-{{ checksum "aio/yarn.lock" }}
var_4_win: &cache_key_win_fallback v1-angular-win-node-14-{{ checksum "month.txt" }}-{{ checksum ".bazelversion" }}
# Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
# cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
@@ -213,6 +213,10 @@ commands:
keys:
- *cache_key_win
- *cache_key_win_fallback
# Install @bazel/bazelisk globally and use that for the first run.
# Workaround for https://github.com/bazelbuild/rules_nodejs/issues/894
# NB: the issue was for @bazel/bazel but the same problem applies to @bazel/bazelisk
- run: yarn global add @bazel/bazelisk@$env:BAZELISK_VERSION
# On Windows `~/` is not resolved when using as a CLI value. `../` results in the same path.
- run: yarn install --frozen-lockfile --non-interactive --cache-folder ../.cache/yarn
@@ -291,6 +295,7 @@ jobs:
- run: yarn -s ng-dev pullapprove verify
- run: yarn -s ng-dev ngbot verify
- run: yarn -s ng-dev commit-message validate-range $CI_GIT_BASE_REVISION $CI_GIT_REVISION
- run: yarn -s check-tooling-setup
test:
executor:
@@ -798,11 +803,11 @@ jobs:
- setup_win
- run:
name: Build all windows CI targets
command: yarn bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/...
command: bazel build --build_tag_filters=-ivy-only //packages/compiler-cli/...
no_output_timeout: 15m
- run:
name: Test all windows CI targets
command: yarn bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/...
command: bazel test --test_tag_filters="-ivy-only,-browser:chromium-local" //packages/compiler-cli/...
no_output_timeout: 15m
test_ivy_aot_win:
@@ -811,11 +816,11 @@ jobs:
- setup_win
- run:
name: Build all windows CI targets
command: yarn bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/...
command: bazel build --config=ivy --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot //packages/compiler-cli/...
no_output_timeout: 15m
- run:
name: Test all windows CI targets
command: yarn bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //packages/localize/...
command: bazel test --config=ivy --test_tag_filters="-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local" //packages/compiler-cli/... //packages/localize/...
no_output_timeout: 15m
# Save dependencies to use on subsequent runs.
- save_cache:
+1
View File
@@ -12,6 +12,7 @@ body:
- common
- compiler-cli
- compiler
- core
- elements
- forms
- language-service
@@ -12,6 +12,7 @@ body:
- common
- compiler-cli
- compiler
- core
- elements
- forms
- language-service
-1
View File
@@ -38,7 +38,6 @@ merge:
- 'modules/benchmarks/**'
- 'modules/system.d.ts'
- 'packages/**'
- 'dev-infra/benchmark/driver-utilities/**'
# list of patterns to ignore for the files changed by the PR
exclude:
- 'packages/*'
+14
View File
@@ -0,0 +1,14 @@
name: DevInfra
on:
pull_request_target:
types: [opened, synchronize, reopened]
jobs:
breaking-changes-label:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: angular/dev-infra/github-actions/breaking-changes-label@861dc90572784e714aeaa9dfb20ceebeb57cdb07
with:
angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}
+1 -2
View File
@@ -106,8 +106,7 @@ Fixes #<issue number>
# │ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
# │ elements|forms|http|language-service|localize|platform-browser|
# │ platform-browser-dynamic|platform-server|router|service-worker|
# │ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
# │ ngcc|ve
# │ upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve
# │ https://github.com/angular/angular/blob/master/CONTRIBUTING.md#scope
# │
# └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test
+1 -1
View File
@@ -1,4 +1,4 @@
import {CaretakerConfig} from '../dev-infra/caretaker/config';
import {CaretakerConfig} from '@angular/dev-infra-private/ng-dev/caretaker/config';
/** The configuration for `ng-dev caretaker` commands. */
export const caretaker: CaretakerConfig = {
+1 -1
View File
@@ -1,4 +1,4 @@
import {CommitMessageConfig} from '../dev-infra/commit-message/config';
import {CommitMessageConfig} from '@angular/dev-infra-private/ng-dev/commit-message/config';
/**
* The configuration for `ng-dev commit-message` commands.
+1 -1
View File
@@ -1,4 +1,4 @@
import {FormatConfig} from '../dev-infra/format/config';
import {FormatConfig} from '@angular/dev-infra-private/ng-dev/format/config';
/**
* Configuration for the `ng-dev format` command.
+3 -3
View File
@@ -1,11 +1,11 @@
import {GithubConfig} from '../dev-infra/utils/config';
import {GithubConfig} from '@angular/dev-infra-private/ng-dev/utils/config';
/**
* Github configuration for the `ng-dev` command. This repository is used as
* remote for the merge script and other utilities like `ng-dev pr rebase`.
*/
export const github: GithubConfig = {
owner: 'angular',
name: 'angular'
name: 'angular',
mainBranchName: 'master',
};
+18 -27
View File
@@ -1,33 +1,24 @@
import {DevInfraMergeConfig} from '../dev-infra/pr/merge/config';
import {getDefaultTargetLabelConfiguration} from '../dev-infra/pr/merge/defaults';
import {github} from './github';
import {release} from './release';
import {MergeConfig} from '@angular/dev-infra-private/ng-dev/pr/merge/config';
/**
* Configuration for the merge tool in `ng-dev`. This sets up the labels which
* are respected by the merge script (e.g. the target labels).
*/
export const merge: DevInfraMergeConfig['merge'] = async api => {
return {
githubApiMerge: false,
claSignedLabel: 'cla: yes',
mergeReadyLabel: /^action: merge(-assistance)?/,
caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
commitMessageFixupLabel: 'commit message fixup',
breakingChangeLabel: 'flag: breaking change',
// We can pick any of the NPM packages as we are in a monorepo where all packages are
// published together with the same version and branching.
labels: await getDefaultTargetLabelConfiguration(api, github, release),
requiredBaseCommits: {
// PRs that target either `master` or the patch branch, need to be rebased
// on top of the latest commit message validation fix.
// These SHAs are the commits that update the required license text in the header.
'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
'10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
},
// `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
// the `bazel` package is not considered part of the public API so that features
// can land in patch branches.
targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
};
export const merge: MergeConfig = {
githubApiMerge: false,
claSignedLabel: 'cla: yes',
mergeReadyLabel: /^action: merge(-assistance)?/,
caretakerNoteLabel: /^(action: merge-assistance)|(PullApprove: disable)/,
commitMessageFixupLabel: 'commit message fixup',
requiredBaseCommits: {
// PRs that target either `master` or the patch branch, need to be rebased
// on top of the latest commit message validation fix.
// These SHAs are the commits that update the required license text in the header.
'master': '5aeb9a4124922d8ac08eb73b8f322905a32b0b3a',
'10.0.x': '27b95ba64a5d99757f4042073fd1860e20e3ed24',
},
// `dev-infra` and `docs-infra` are not affecting the public NPM packages. Similarly,
// the `bazel` package is not considered part of the public API so that features
// can land in patch branches.
targetLabelExemptScopes: ['dev-infra', 'docs-infra', 'bazel']
};
+2 -2
View File
@@ -1,5 +1,5 @@
import {ReleaseConfig} from '@angular/dev-infra-private/ng-dev/release/config';
import {join} from 'path';
import {ReleaseConfig} from '../dev-infra/release/config';
/** Configuration for the `ng-dev release` command. */
export const release: ReleaseConfig = {
@@ -22,7 +22,7 @@ export const release: ReleaseConfig = {
'@angular/service-worker',
'@angular/upgrade',
],
buildPackages: async (stampForRelease: boolean) => {
buildPackages: async (stampForRelease: boolean|undefined) => {
// The buildTargetPackages function is loaded at runtime as the loading the script causes an
// invocation of bazel.
const {buildTargetPackages} = require(join(__dirname, '../scripts/build/package-builder'));
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"strict": true,
"target": "es2015",
"module": "commonjs",
"noEmit": true,
"skipLibCheck": true,
"types": []
},
}
+1 -6
View File
@@ -190,7 +190,6 @@ groups:
- JiaLiPassion # Jia Li
- JoostK # Joost Koehoorn
- josephperrott # Joey Perrott
- kyliau # Keen Yee Liau
- manughub # Manu Murthy
- mgechev # Minko Gechev
- mmalerba # Miles Malerba
@@ -570,7 +569,6 @@ groups:
users:
- alan-agius4
- alxhub
- kyliau
# =========================================================
# Framework: Router
@@ -763,7 +761,6 @@ groups:
users:
- IgorMinar
- josephperrott
- kyliau
# =========================================================
# Language Service
@@ -781,7 +778,6 @@ groups:
])
reviewers:
users:
- kyliau
- atscott
- zarend
@@ -1021,7 +1017,7 @@ groups:
users:
- alan-agius4
- clydin
- kyliau
- dgp1130
- IgorMinar
reviews:
request: -1 # request reviews from everyone
@@ -1155,7 +1151,6 @@ groups:
'.ng-dev/**',
'.vscode/**',
'.yarn/**',
'dev-infra/**',
'docs/*.md',
'docs/images/**',
'goldens/*',
+105
View File
@@ -1,3 +1,108 @@
<a name="12.2.5"></a>
# 12.2.5 (2021-09-08)
### router
| Commit | Description |
| -- | -- |
| [a0bd6e90f9](https://github.com/angular/angular/commit/a0bd6e90f987377320b3b337d8c3a33235658e9a) | fix: add more context to `Unhandled Navigation Error` ([#43291](https://github.com/angular/angular/pull/43291)) |
## Special Thanks:
Alan Agius, Charles Barnes, Enea Jahollari, George Kalpakas, Ikko Ashimine, Paul Gschwendtner, Pete Bacon Darwin, William Sedlacek and dario-piotrowicz
<a name="12.2.4"></a>
# 12.2.4 (2021-09-01)
### compiler-cli
| Commit | Description |
| -- | -- |
| [8233906be2](https://github.com/angular/angular/commit/8233906be25e19da6d8115094616d3e4b5e36fea) | fix: Emit type annotations for synthesized decorator fields ([#43021](https://github.com/angular/angular/pull/43021)) |
## Special Thanks:
Andrew Scott, Daniel Trevino, George Kalpakas, Joey Perrott, Kristiyan Kostadinov, nickreid and segunb
<a name="12.2.3"></a>
# 12.2.3 (2021-08-25)
### service-worker
| Commit | Description |
| -- | -- |
| [fc7f92159d](https://github.com/angular/angular/commit/fc7f92159df16e894d9909cfc8969ed4b7d9924a) | fix: NPE if onActionClick is undefined ([#43210](https://github.com/angular/angular/pull/43210)) |
## Special Thanks:
Daniel Trevino, Erik Slack, George Kalpakas, dario-piotrowicz and shlasouski
<a name="12.2.2"></a>
# 12.2.2 (2021-08-18)
### animations
| Commit | Description |
| -- | -- |
| [bb6555979d](https://github.com/angular/angular/commit/bb6555979dd02e706f7e98022b9c37a4f54db1ba) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
### core
| Commit | Description |
| -- | -- |
| [738b23347e](https://github.com/angular/angular/commit/738b23347e5eeadfa0321d1429537837dba5e4c1) | fix: add pure annotations to static property initializers ([#43064](https://github.com/angular/angular/pull/43064)) |
### platform-browser
| Commit | Description |
| -- | -- |
| [535837e617](https://github.com/angular/angular/commit/535837e617a0434f8e7bd9071cc4d8c27fd9f373) | perf: avoid intermediate arrays in server transition ([#43145](https://github.com/angular/angular/pull/43145)) |
### router
| Commit | Description |
| -- | -- |
| [6449590ec8](https://github.com/angular/angular/commit/6449590ec81eff0873af911fb65679b5a77db27b) | fix: eagerly update internal state on browser-triggered navigations ([#43102](https://github.com/angular/angular/pull/43102)) |
## Special Thanks:
Andrew Scott, Aristeidis Bampakos, Charles Lyding, Edoardo Dusi, George Kalpakas, Joe Martin (Crowdstaffing), Joey Perrott, Kirk Larkin, Kristiyan Kostadinov, Pete Bacon Darwin, TIffany Davis, Theoklitos Bampouris, ali, dario-piotrowicz and pichuser
<a name="12.2.1"></a>
# 12.2.1 (2021-08-11)
### router
| Commit | Description |
| -- | -- |
| [dd3abdb9d9](https://github.com/angular/angular/commit/dd3abdb9d9b2c4363fb1f468a05bf449b55f55a5) | fix(router): ensure check for match options is compatible with property renaming ([#43086](https://github.com/angular/angular/pull/43086)) |
## Special Thanks:
Amadou Sall, Andrew Kushnir, Andrew Scott, Daniel Trevino, Erik Slack, Fabien BERNARD, George Kalpakas, Jeroen van Warmerdam, Joey Perrott, Tim Gates and Vugar_Abdullayev
<a name="12.2.0"></a>
# 12.2.0 (2021-08-04)
### core
| Commit | Description |
| -- | -- |
| [bd7f0d8b70](https://github.com/angular/angular/commit/bd7f0d8b70150a7e4e7550f4380a2e731cf2b942) | fix(core): incorrect error reported when trying to re-create view which had an error during creation ([#43005](https://github.com/angular/angular/pull/43005)) |
### language-service
| Commit | Description |
| -- | -- |
| [aace1e71d8](https://github.com/angular/angular/commit/aace1e71d8fb5e1e52fcd86e2a26892d1016c43e) | fix(language-service): global autocomplete doesn't work when the user tries to modify the symbol ([#42923](https://github.com/angular/angular/pull/42923)) |
## Special Thanks:
Alex Rickabaugh, Joe Martin, Joey Perrott, Kristiyan Kostadinov, Nichola Alkhouri, Paul Gschwendtner, Pete Bacon Darwin, atscott, dario-piotrowicz and ivanwonder
<a name="12.2.0-rc.0"></a>
# 12.2.0-rc.0 (2021-07-28)
### compiler-cli
| Commit | Description |
| -- | -- |
| [ed9cfb674f](https://github.com/angular/angular/commit/ed9cfb674f8e52b416ccdaf9aa9c46955b8448f5) | fix(compiler-cli): use correct module resolution context for absolute imports in .d.ts files ([#42879](https://github.com/angular/angular/pull/42879)) |
| [5fb23eccea](https://github.com/angular/angular/commit/5fb23ecceaccf0629308dd50210b65f67d51f024) | perf(compiler-cli): skip analysis in incremental builds for files without Angular behavior ([#42562](https://github.com/angular/angular/pull/42562)) |
### core
| Commit | Description |
| -- | -- |
| [eefe1682e8](https://github.com/angular/angular/commit/eefe1682e8099b73b6e50bb227b5a7f63105c63d) | fix(core): correctly handle `null` or `undefined` in `ErrorHandler#handleError()` ([#42881](https://github.com/angular/angular/pull/42881)) |
### forms
| Commit | Description |
| -- | -- |
| [1d9d02696e](https://github.com/angular/angular/commit/1d9d02696eadbee2c2f719e432efca22f1e494e9) | feat(forms): add hasValidators, addValidators, and removeValidators methods (for both sync and async) ([#42838](https://github.com/angular/angular/pull/42838)) |
| [a502279592](https://github.com/angular/angular/commit/a50227959222f39884aac284544d1626aee5ca64) | feat(forms): allow minLength/maxLength validator to be bound to `null` ([#42565](https://github.com/angular/angular/pull/42565)) |
### language-service
| Commit | Description |
| -- | -- |
| [7c35ca0e00](https://github.com/angular/angular/commit/7c35ca0e0030f2ded12ddca9092e31f510cebeb1) | feat(language-service): support autocomplete string literal union types in templates ([#42729](https://github.com/angular/angular/pull/42729)) |
### router
| Commit | Description |
| -- | -- |
| [0d81b007e4](https://github.com/angular/angular/commit/0d81b007e48a0ac801d2614601fb8180a3517865) | fix(router): add missing outlet events to RouterOutletContract ([#42431](https://github.com/angular/angular/pull/42431)) |
| [dbae00195e](https://github.com/angular/angular/commit/dbae00195e114ac8b967201283962a7e2c0581b4) | feat(router): ability to provide custom route reuse strategy via DI for `RouterTestingModule` ([#42434](https://github.com/angular/angular/pull/42434)) |
## Special Thanks:
Andrew Scott, Daniel Trevino, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Joey Perrott, JoostK, Paul Gschwendtner, Pete Bacon Darwin, Steven Masala, Teri Glover, Vladyslav, Yuvaraj, codebriefcase, iRealNirmal and ivanwonder
<a name="12.1.4"></a>
# 12.1.4 (2021-07-28)
### compiler-cli
+2 -3
View File
@@ -248,8 +248,7 @@ Any line of the commit message cannot be longer than 100 characters.
│ └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
│ elements|forms|http|language-service|localize|platform-browser|
│ platform-browser-dynamic|platform-server|router|service-worker|
│ upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
│ ngcc|ve
│ upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve
│
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
```
@@ -302,7 +301,7 @@ There are currently a few exceptions to the "use package name" rule:
* `changelog`: used for updating the release notes in CHANGELOG.md
* `dev-infra`: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
* `dev-infra`: used for dev-infra related changes within the directories /scripts and /tools
* `docs-infra`: used for docs-app (angular.io) related changes within the /aio directory of the repo
+3 -3
View File
@@ -8,8 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
# Fetch rules_nodejs so we can install our npm dependencies
http_archive(
name = "build_bazel_rules_nodejs",
sha256 = "4681ca88d512d57196d064d1441549080d8d17d119174a1229d1717a16a4a489",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0-beta.1/rules_nodejs-4.0.0-beta.1.tar.gz"],
sha256 = "8a7c981217239085f78acc9898a1f7ba99af887c1996ceb3b4504655383a2c3c",
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0/rules_nodejs-4.0.0.tar.gz"],
)
# Check the rules_nodejs version and download npm dependencies
@@ -44,7 +44,7 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
web_test_repositories()
load("//dev-infra/bazel/browsers:browser_repositories.bzl", "browser_repositories")
load("@npm//@angular/dev-infra-private/bazel/browsers:browser_repositories.bzl", "browser_repositories")
browser_repositories()
@@ -13,11 +13,11 @@ import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'app-countdown-parent-lv',
template: `
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<app-countdown-timer #timer></app-countdown-timer>
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<app-countdown-timer #timer></app-countdown-timer>
`,
styleUrls: ['../assets/demo.css']
})
@@ -29,11 +29,11 @@ export class CountdownLocalVarParentComponent { }
@Component({
selector: 'app-countdown-parent-vc',
template: `
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<app-countdown-timer></app-countdown-timer>
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<app-countdown-timer></app-countdown-timer>
`,
styleUrls: ['../assets/demo.css']
})
@@ -7,7 +7,9 @@ import { HEROES } from './hero';
selector: 'app-hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<app-hero-child *ngFor="let hero of heroes"
<app-hero-child
*ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</app-hero-child>
@@ -8,9 +8,12 @@ import { MissionService } from './mission.service';
template: `
<h2>Mission Control</h2>
<button (click)="announce()">Announce mission</button>
<app-astronaut *ngFor="let astronaut of astronauts"
<app-astronaut
*ngFor="let astronaut of astronauts"
[astronaut]="astronaut">
</app-astronaut>
<h3>History</h3>
<ul>
<li *ngFor="let event of history">{{event}}</li>
@@ -4,8 +4,9 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-name-parent',
template: `
<h2>Master controls {{names.length}} names</h2>
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
<h2>Master controls {{names.length}} names</h2>
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
`
})
export class NameParentComponent {
@@ -6,7 +6,9 @@ import { Component } from '@angular/core';
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<app-voter *ngFor="let voter of voters"
<app-voter
*ngFor="let voter of voters"
[name]="voter"
(voted)="onVoted($event)">
</app-voter>
@@ -25,7 +25,7 @@ describe('AppComponent', () => {
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('component-overview app is running!');
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('component-overview app is running!');
});
});
@@ -4,12 +4,12 @@ import { Component } from '@angular/core';
// #docregion templatebacktick
@Component({
selector: 'app-component-overview',
template: `<h1>Hello World!</h1>
<p>This template definition spans
multiple lines.</p>`
template: `
<h1>Hello World!</h1>
<p>This template definition spans multiple lines.</p>
`
})
// #enddocregion templatebacktick
export class ComponentOverviewComponent {
}
@@ -2,7 +2,7 @@
<!-- #docregion ngif -->
<div *ngIf="expanded" [id]="contentId">
<!-- #docregion ng-container -->
<ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>
<ng-container [ngTemplateOutlet]="content.templateRef"></ng-container>
<!-- #enddocregion ng-container-->
</div>
<!-- #enddocregion ngif -->
<!-- #enddocregion ngif -->
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-zippy-basic',
template: `
<h2>Single-slot content projection</h2>
<ng-content></ng-content>
`
<h2>Single-slot content projection</h2>
<ng-content></ng-content>
`
})
export class ZippyBasicComponent {}
@@ -3,11 +3,13 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-zippy-multislot',
template: `
<h2>Multi-slot content projection</h2>
Default:
<ng-content></ng-content>
Question:
<ng-content select="[question]"></ng-content>
`
<h2>Multi-slot content projection</h2>
Default:
<ng-content></ng-content>
Question:
<ng-content select="[question]"></ng-content>
`
})
export class ZippyMultislotComponent {}
@@ -3,11 +3,13 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-zippy-ngprojectas',
template: `
<h2>Content projection with ngProjectAs</h2>
Default:
<ng-content></ng-content>
Question:
<ng-content select="[question]"></ng-content>
`
<h2>Content projection with ngProjectAs</h2>
Default:
<ng-content></ng-content>
Question:
<ng-content select="[question]"></ng-content>
`
})
export class ZippyNgprojectasComponent {}
@@ -9,19 +9,22 @@ import { AdComponent } from './ad.component';
selector: 'app-ad-banner',
// #docregion ad-host
template: `
<div class="ad-banner-example">
<h3>Advertisements</h3>
<ng-template adHost></ng-template>
</div>
`
<div class="ad-banner-example">
<h3>Advertisements</h3>
<ng-template adHost></ng-template>
</div>
`
// #enddocregion ad-host
})
// #docregion class
export class AdBannerComponent implements OnInit, OnDestroy {
@Input() ads: AdItem[] = [];
currentAdIndex = -1;
@ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
interval: any;
interval: number | undefined;
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
@@ -9,15 +9,22 @@ import { AdItem } from './ad-item';
export class AdService {
getAds() {
return [
new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
new AdItem(HeroJobAdComponent, {headline: 'Hiring for several positions',
body: 'Submit your resume today!'}),
new AdItem(HeroJobAdComponent, {headline: 'Openings in all departments',
body: 'Apply today'}),
new AdItem(
HeroProfileComponent,
{ name: 'Bombasto', bio: 'Brave as they come' }
),
new AdItem(
HeroProfileComponent,
{ name: 'Dr IQ', bio: 'Smart as they come' }
),
new AdItem(
HeroJobAdComponent,
{ headline: 'Hiring for several positions', body: 'Submit your resume today!' }
),
new AdItem(
HeroJobAdComponent,
{ headline: 'Openings in all departments', body: 'Apply today' }
)
];
}
}
@@ -9,16 +9,19 @@ import { AdService } from './ad.service';
@NgModule({
imports: [ BrowserModule ],
providers: [AdService],
declarations: [ AppComponent,
AdBannerComponent,
HeroJobAdComponent,
HeroProfileComponent,
AdDirective ],
entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
providers: [ AdService ],
declarations: [
AppComponent,
AdBannerComponent,
HeroJobAdComponent,
HeroProfileComponent,
AdDirective
],
entryComponents: [
HeroJobAdComponent,
HeroProfileComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor() {}
}
export class AppModule { }
@@ -7,13 +7,11 @@ import { AdComponent } from './ad.component';
template: `
<div class="job-ad">
<h4>{{data.headline}}</h4>
{{data.body}}
</div>
`
})
export class HeroJobAdComponent implements AdComponent {
@Input() data: any;
}
@@ -1,6 +1,6 @@
{
"tests": [
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
]
}
@@ -25,7 +25,7 @@ describe('AppComponent', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Forms Overview');
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Forms Overview');
}));
});
@@ -5,5 +5,4 @@ import { Component } from '@angular/core';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
export class AppComponent { }
@@ -10,14 +10,17 @@ import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
// #docregion declare-product-alerts
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
// #enddocregion declare-product-alerts
import { ProductDetailsComponent } from './product-details/product-details.component';
import { CartComponent } from './cart/cart.component';
import { ShippingComponent } from './shipping/shipping.component';
// #docregion product-details-route, http-client-module, shipping-route, cart-route
// #docregion product-details-route, http-client-module, shipping-route, cart-route, declare-product-alerts
@NgModule({
// #enddocregion declare-product-alerts
imports: [
BrowserModule,
// #enddocregion product-details-route, cart-route
@@ -36,17 +39,20 @@ import { ShippingComponent } from './shipping/shipping.component';
])
],
// #enddocregion product-details-route, cart-route
// #docregion declare-product-alerts
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent,
// #enddocregion declare-product-alerts
ProductDetailsComponent,
CartComponent,
// #enddocregion http-client-module
ShippingComponent
// #docregion http-client-module
// #docregion declare-product-alerts, http-client-module
],
// #enddocregion declare-product-alerts
bootstrap: [
AppComponent
]
@@ -11,6 +11,7 @@ import { CartService } from '../cart.service';
})
// #docregion inject-cart, items
export class CartComponent {
// #enddocregion inject-cart
items = this.cartService.getItems();
// #docregion inject-cart
@@ -7,6 +7,7 @@ import { CartService } from '../cart.service';
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
items;
constructor(
@@ -16,4 +17,5 @@ export class CartComponent implements OnInit {
ngOnInit(): void {
this.items = this.cartService.getItems();
}
}
@@ -13,17 +13,20 @@ import { CartService } from '../cart.service';
})
// #docregion inject-form-builder, checkout-form-group
export class CartComponent {
// #enddocregion inject-form-builder
items = this.cartService.getItems();
checkoutForm = this.formBuilder.group({
name: '',
address: ''
});
// #docregion inject-form-builder
constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) {}
) {}
// #enddocregion inject-form-builder, checkout-form-group
onSubmit(): void {
@@ -14,6 +14,7 @@ import { Product } from '../products';
})
// #docregion input-decorator
export class ProductAlertsComponent implements OnInit {
// #enddocregion as-generated
@Input() product!: Product;
// #docregion as-generated
@@ -13,6 +13,6 @@ import { Product } from '../products';
})
// #docregion input-output
export class ProductAlertsComponent {
@Input() product: Product|undefined;
@Input() product: Product | undefined;
@Output() notify = new EventEmitter();
}
@@ -13,12 +13,11 @@ import { Product, products } from '../products';
})
// #docregion props-methods, product-prop
export class ProductDetailsComponent implements OnInit {
product: Product|undefined;
product: Product | undefined;
// #enddocregion product-prop
constructor(
private route: ActivatedRoute,
) { }
constructor(private route: ActivatedRoute) { }
// #enddocregion props-methods
// #docregion get-product
@@ -6,8 +6,7 @@
<h3>{{ product.name }}</h3>
<h4>{{ product.price | currency }}</h4>
<p>{{ product.description }}</p>
<!-- #enddocregion details -->
<button (click)="addToCart(product)">Buy</button>
<!-- #docregion details -->
<!-- #docregion details -->
</div>
@@ -14,8 +14,9 @@ import { CartService } from '../cart.service';
})
// #docregion inject-cart-service, add-to-cart
export class ProductDetailsComponent implements OnInit {
// #enddocregion add-to-cart, inject-cart-service
product: Product|undefined;
product: Product | undefined;
// #docregion inject-cart-service
constructor(
@@ -7,6 +7,7 @@ import { products } from '../products';
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
products = products;
share() {
@@ -4,7 +4,9 @@
<div *ngFor="let product of products">
<h3>
<a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
<a
[title]="product.name + ' details'"
[routerLink]="['/products', product.id]">
{{ product.name }}
</a>
</h3>
@@ -9,6 +9,7 @@ import { products } from '../products';
})
// #docregion on-notify
export class ProductListComponent {
products = products;
share() {
@@ -12,14 +12,12 @@ import { CartService } from '../cart.service';
})
// #docregion props
export class ShippingComponent {
shippingCosts = this.cartService.getShippingPrices();
// #enddocregion props
// #docregion inject-cart-service
constructor(private cartService: CartService) {
}
constructor(private cartService: CartService) { }
// #enddocregion inject-cart-service
@@ -1,4 +1,4 @@
<a [routerLink]="['/']">
<a routerLink="/">
<h1>My Store</h1>
</a>
@@ -5,6 +5,4 @@ import { Component } from '@angular/core';
templateUrl: './top-bar.component.html',
styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent {
}
export class TopBarComponent { }
@@ -2,6 +2,6 @@
"projectType": "testing",
"tests": [
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
]
}
@@ -1,7 +1,6 @@
<p>Save for later item: {{input1}}</p>
<button (click)="saveIt()"> Save for later</button>
<p>Item for wishlist: {{input2}}</p>
<button (click)="wishForIt()"> Add to wishlist</button>
<p>Item for wishlist: {{input2}}</p>
<button (click)="wishForIt()"> Add to wishlist</button>
@@ -21,12 +21,12 @@ export class AliasingComponent {
saveIt() {
console.warn('Child says: emiting outputEvent1 with', this.input1);
console.warn('Child says: emitting outputEvent1 with', this.input1);
this.outputEvent1.emit(this.input1);
}
wishForIt() {
console.warn('Child says: emiting outputEvent2', this.input2);
console.warn('Child says: emitting outputEvent2', this.input2);
this.outputEvent2.emit(this.input2);
}
@@ -20,7 +20,10 @@
<p>Open the console to see the EventEmitter at work when you click Delete.</p>
<!-- #docregion together -->
<app-input-output [item]="currentItem" (deleteRequest)="crossOffItem($event)"></app-input-output>
<app-input-output
[item]="currentItem"
(deleteRequest)="crossOffItem($event)">
</app-input-output>
<!-- #enddocregion together -->
<hr>
@@ -28,7 +31,10 @@
<h2>Input and Output in the component class metadata</h2>
<p>Open the console to see the EventEmitter at work when you click Buy.</p>
<app-in-the-metadata [clearanceItem]="lastChanceItem" (buyEvent)="buyClearanceItem($event)"></app-in-the-metadata>
<app-in-the-metadata
[clearanceItem]="lastChanceItem"
(buyEvent)="buyClearanceItem($event)">
</app-in-the-metadata>
<hr>
@@ -36,7 +42,12 @@
<h2>Aliasing Inputs and Outputs</h2>
<p>See aliasing.component.ts for aliases and the console for the EventEmitter console logs.</p>
<app-aliasing [saveForLaterItem]="currentItem" (saveForLaterEvent)="saveForLater($event)" [wishListItem]="currentItem" (wishEvent)="addToWishList($event)"></app-aliasing>
<app-aliasing
[saveForLaterItem]="currentItem"
[wishListItem]="currentItem"
(saveForLaterEvent)="saveForLater($event)"
(wishEvent)="addToWishList($event)">
</app-aliasing>
<h2>Wishlist:</h2>
<ul>
@@ -20,7 +20,7 @@ export class InTheMetadataComponent {
clearanceItem = '';
buyIt() {
console.warn('Child says: emiting buyEvent with', this.clearanceItem);
console.warn('Child says: emitting buyEvent with', this.clearanceItem);
this.buyEvent.emit(this.clearanceItem);
}
@@ -6,13 +6,14 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
styleUrls: ['./input-output.component.css']
})
export class InputOutputComponent {
@Input() item = '';
@Output() deleteRequest = new EventEmitter<string>();
lineThrough = '';
delete() {
console.warn('Child says: emiting item deleteRequest with', this.item);
console.warn('Child says: emitting item deleteRequest with', this.item);
this.deleteRequest.emit(this.item);
this.lineThrough = this.lineThrough ? '' : 'line-through';
}
@@ -5,7 +5,6 @@ import { Component, Output, EventEmitter } from '@angular/core';
templateUrl: './item-output.component.html',
styleUrls: ['./item-output.component.css']
})
// #docregion item-output-class
export class ItemOutputComponent {
// #docregion item-output
@@ -11,7 +11,8 @@ import { LoggerService } from './logger.service';
template: `
<div>projected content begins</div>
<ng-content></ng-content>
<div>projected content ends</div>`
<div>projected content ends</div>
`
// #enddocregion template
+ `
<p *ngIf="comment" class="comment">
@@ -11,7 +11,8 @@ import { LoggerService } from './logger.service';
template: `
<div>child view begins</div>
<app-child-view></app-child-view>
<div>child view ends</div>`
<div>child view ends</div>
`
// #enddocregion template
+ `
<p *ngIf="comment" class="comment">
@@ -3,8 +3,10 @@ import { Component } from '@angular/core';
// #docregion child-view
@Component({
selector: 'app-child-view',
template: `<label for="hero-name">Hero name: </label>
<input type="text" id="hero-name" [(ngModel)]="hero">`
template: `
<label for="hero-name">Hero name: </label>
<input type="text" id="hero-name" [(ngModel)]="hero">
`
})
export class ChildViewComponent {
hero = 'Magneta';
@@ -8,7 +8,7 @@ import { HeroService } from '../hero.service';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detaill',
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
@@ -2,7 +2,7 @@
"projectType": "service-worker",
"tests": [
{"cmd": "yarn", "args": ["e2e", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
{"cmd": "yarn", "args": ["build", "--prod"]},
{"cmd": "yarn", "args": ["build"]},
{"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw.json'), 'ngsw.json is missing')"]},
{"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw-worker.js'), 'ngsw-worker.js is missing')"]},
{"cmd": "node", "args": ["--eval", "assert(require('./package.json').dependencies['@angular/service-worker'], '@angular/service-worker is missing')"]}
@@ -1,6 +1,6 @@
{
"tests": [
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
]
}
@@ -2,6 +2,6 @@
"projectType": "testing",
"tests": [
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
]
}
@@ -32,8 +32,8 @@ describe('AppComponent (initial CLI version)', () => {
it('should render title', waitForAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!');
}));
});
// #enddocregion
@@ -1,6 +1,6 @@
{
"tests": [
{"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
]
}
@@ -1,7 +1,7 @@
{
"projectType": "universal",
"e2e": [
{"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
{"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
{"cmd": "yarn", "args": ["run", "build:ssr"]}
]
}
@@ -1,7 +1,15 @@
<!-- #docregion event-binding -->
<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
<button
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>
<!-- #enddocregion -->
<!-- #docregion bindings -->
<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>
<!-- #enddocregion -->
<p>My color is {{ fontColor }}</p>
<p>My color is {{ fontColor }}</p>
@@ -5,13 +5,15 @@ import { Component } from '@angular/core';
templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
// #docregion method
sayMessage() {
alert(this.message);
}
sayMessage() {
alert(this.message);
}
// #enddocregion
}
@@ -1,3 +1,5 @@
<h2>Hello World: Dependency Injection</h2>
<button (click)="onLogMe()">Log me!</button>
<p>Be sure to open the console to view the output!</p>
<p>Be sure to open the console to view the output!</p>
@@ -8,8 +8,7 @@ import { Logger } from '../logger.service';
export class HelloWorldDependencyInjectionComponent {
count = 0;
constructor(private logger: Logger) {
}
constructor(private logger: Logger) { }
onLogMe() {
this.logger.writeCount(this.count);
@@ -1,9 +1,13 @@
<h2>Hello World: ngIf!</h2>
<button (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
<p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
<p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{{ message }}</p>
@@ -2,9 +2,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
message = 'I\'m read only!';
canEdit = false;
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
template: `
<h2>Hello World</h2>
<p>This is my first component!</p>
`,
`
})
export class HelloWorldComponent {
// The code in this class drives the component's behavior.
@@ -21,7 +21,7 @@ The template options object, `angularCompilerOptions`, is a sibling to the `comp
{@a tsconfig-extends}
## Configuration inheritance with extends
Like the TypeScript compiler, The Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
Like the TypeScript compiler, the Angular AOT compiler also supports `extends` in the `angularCompilerOptions` section of the TypeScript configuration file.
The `extends` property is at the top level, parallel to `compilerOptions` and `angularCompilerOptions`.
A TypeScript configuration can inherit settings from another file using the `extends` property.
+1 -1
View File
@@ -249,7 +249,7 @@ See the [Styles configuration guide](guide/workspace-config#styles-and-scripts-c
### Non-CSS style files
If you're building with the CLI,
you can write style files in [sass](https://sass-lang.com/), [less](http://lesscss.org/), or [stylus](https://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
you can write style files in [sass](https://sass-lang.com/), or [less](http://lesscss.org/), and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`) as in the following example:
<code-example>
@Component({
+28 -28
View File
@@ -23,43 +23,43 @@ The most basic form of content projection is *single-slot content projection*. S
To create a component that uses single-slot content projection:
1. [Create](guide/component-overview) a component.
1. [Create a component](guide/component-overview#creating-a-component).
1. In the template for your component, add an `ng-content` element where you want the projected content to appear.
1. In the template for your component, add an `<ng-content>` element where you want the projected content to appear.
For example, the following component uses an `ng-content` element to display a message.
For example, the following component uses an `<ng-content>` element to display a message.
<code-example path="content-projection/src/app/zippy-basic/zippy-basic.component.ts" header="content-projection/src/app/zippy-basic/zippy-basic.component.ts"></code-example>
With the `ng-content` element in place, users of this component can now project their own message into the component. For example:
With the `<ng-content>` element in place, users of this component can now project their own message into the component. For example:
<code-example path="content-projection/src/app/app.component.html" header="content-projection/src/app/app.component.html"
region="single-slot"></code-example>
<div class="alert is-helpful">
The `ng-content` element is a placeholder that does not create a real DOM element. Custom attributes applied to `ng-content` are ignored.
The `<ng-content>` element is a placeholder that does not create a real DOM element. Custom attributes applied to `<ng-content>` are ignored.
</div>
{@a multi-slot}
## Multi-slot content projection
A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of `ng-content`.
A component can have multiple slots. Each slot can specify a CSS selector that determines which content goes into that slot. This pattern is referred to as *multi-slot content projection*. With this pattern, you must specify where you want the projected content to appear. You accomplish this task by using the `select` attribute of `<ng-content>`.
To create a component that uses multi-slot content projection:
1. [Create](guide/component-overview) a component.
1. [Create a component](guide/component-overview#creating-a-component).
1. In the template for your component, add an `ng-content` element where you want the projected content to appear.
1. In the template for your component, add an `<ng-content>` element where you want the projected content to appear.
1. Add a `select` attribute to the `ng-content` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class.
1. Add a `select` attribute to the `<ng-content>` elements. Angular supports [selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for any combination of tag name, attribute, CSS class, and the `:not` pseudo-class.
For example, the following component uses two `ng-content` elements.
For example, the following component uses two `<ng-content>` elements.
<code-example path="content-projection/src/app/zippy-multislot/zippy-multislot.component.ts" header="content-projection/src/app/zippy-multislot/zippy-multislot.component.ts"></code-example>
Content that uses the `question` attribute is projected into the `ng-content` element with the `select=[question]` attribute.
Content that uses the `question` attribute is projected into the `<ng-content>` element with the `select=[question]` attribute.
<code-example path="content-projection/src/app/app.component.html" header="content-projection/src/app/app.component.html"
region="multi-slot"></code-example>
@@ -68,9 +68,9 @@ region="multi-slot"></code-example>
<header>ng-content without a select attribute</header>
If your component includes an `ng-content` element without a `select` attribute, that instance receives all projected components that do not match any of the other `ng-content` elements.
If your component includes an `<ng-content>` element without a `select` attribute, that instance receives all projected components that do not match any of the other `<ng-content>` elements.
In the preceding example, only the second `ng-content` element defines a `select` attribute. As a result, the first `ng-content` element receives any other content projected into the component.
In the preceding example, only the second `<ng-content>` element defines a `select` attribute. As a result, the first `<ng-content>` element receives any other content projected into the component.
</div>
@@ -78,41 +78,41 @@ In the preceding example, only the second `ng-content` element defines a `select
## Conditional content projection
If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `ng-template` element that contains the content you want to conditionally render.
If your component needs to _conditionally_ render content, or render content multiple times, you should configure that component to accept an `<ng-template>` element that contains the content you want to conditionally render.
Using an `ng-content` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `ng-content` element or if that `ng-content` element is inside of an `ngIf` statement.
Using an `<ng-content>` element in these cases is not recommended, because when the consumer of a component supplies the content, that content is _always_ initialized, even if the component does not define an `<ng-content>` element or if that `<ng-content>` element is inside of an `ngIf` statement.
With an `ng-template` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `ng-template` element until that element is explicitly rendered.
With an `<ng-template>` element, you can have your component explicitly render content based on any condition you want, as many times as you want. Angular will not initialize the content of an `<ng-template>` element until that element is explicitly rendered.
The following steps demonstrate a typical implementation of conditional content projection using `ng-template`.
The following steps demonstrate a typical implementation of conditional content projection using `<ng-template>`.
1. [Create](guide/component-overview) a component.
1. [Create a component](guide/component-overview#creating-a-component).
1. In the component that accepts an `ng-template` element, use an `ng-container` element to render that template, such as:
1. In the component that accepts an `<ng-template>` element, use an `<ng-container>` element to render that template, such as:
<code-example path="content-projection/src/app/example-zippy.template.html" header="content-projection/src/app/example-zippy.template.html" region="ng-container">
</code-example>
This example uses the `ngTemplateOutlet` directive to render a given `ng-template` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `ng-container` element because the component does not need to render a real DOM element.
This example uses the `ngTemplateOutlet` directive to render a given `<ng-template>` element, which you will define in a later step. You can apply an `ngTemplateOutlet` directive to any type of element. This example assigns the directive to an `<ng-container>` element because the component does not need to render a real DOM element.
1. Wrap the `ng-container` element in another element, such as a `div` element, and apply your conditional logic.
1. Wrap the `<ng-container>` element in another element, such as a `div` element, and apply your conditional logic.
<code-example path="content-projection/src/app/example-zippy.template.html" header="content-projection/src/app/example-zippy.template.html" region="ngif">
</code-example>
1. In the template where you want to project content, wrap the projected content in an `ng-template` element, such as:
1. In the template where you want to project content, wrap the projected content in an `<ng-template>` element, such as:
<code-example path="content-projection/src/app/app.component.html" region="ng-template">
</code-example>
The `ng-template` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or [`TemplateRef`](/api/core/TemplateRef), by using either the [`@ContentChild`](/api/core/ContentChild) or [`@ContentChildren`](/api/core/ContentChildren) decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `ng-template` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the [`ngTemplateOutlet`](/api/common/NgTemplateOutlet) directive, or with [`ViewContainerRef.createEmbeddedView`](/api/core/ViewContainerRef#createembeddedview).
The `<ng-template>` element defines a block of content that a component can render based on its own logic. A component can get a reference to this template content, or `TemplateRef`, by using either the `@ContentChild` or `@ContentChildren` decorators. The preceding example creates a custom directive, `appExampleZippyContent`, as an API to mark the `<ng-template>` for the component's content. With the `TemplateRef`, the component can render the referenced content by using either the `ngTemplateOutlet` directive, or with the `ViewContainerRef` method `createEmbeddedView()`.
1. Create a directive with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance.
1. [Create an attribute directive](guide/attribute-directives#building-an-attribute-directive) with a selector that matches the custom attribute for your template. In this directive, inject a TemplateRef instance.
<code-example path="content-projection/src/app/app.component.ts" header="content-projection/src/app/app.component.ts" region="zippycontentdirective">
</code-example>
In the previous step, you added an `ng-template` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference.
In the previous step, you added an `<ng-template>` element with a custom attribute, `appExampleZippyDirective`. This code provides the logic that Angular will use when it encounters that custom attribute. In this case, that logic instructs Angular to instantiate a template reference.
1. In the component you want to project content into, use `@ContentChild` to get the template of the projected content.
@@ -144,14 +144,14 @@ For instance, consider the following HTML snippet:
<code-example path="content-projection/src/app/app.component.html" header="content-projection/src/app/app.component.html" region="ngprojectas">
</code-example>
This example uses an `ng-container` attribute to simulate projecting a component into a more complex structure.
This example uses an `<ng-container>` attribute to simulate projecting a component into a more complex structure.
<div class="callout is-helpful">
<header>Reminder!</header>
The `ng-container` element is a logical construct that you can use to group other DOM elements; however, the `ng-container` itself is not rendered in the DOM tree.
The `<ng-container>` element is a logical construct that you can use to group other DOM elements; however, the `<ng-container>` itself is not rendered in the DOM tree.
</div>
In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `ng-container` element is projected into a component using the `[question]` selector.
In this example, the content we want to project resides inside another element. To project this content as intended, the template uses the `ngProjectAs` attribute. With `ngProjectAs`, the entire `<ng-container>` element is projected into a component using the `[question]` selector.
+1 -1
View File
@@ -1092,7 +1092,7 @@ See [custom element](#custom-element).
## workspace
A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI] (#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI](#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)).
The [CLI](#cli) [`ng new` command](cli/new) creates a file system directory (the "workspace root").
In the workspace root, it also creates the workspace [configuration file](#configuration) (`angular.json`) and, by default, an initial application project with the same name.
@@ -380,7 +380,7 @@ The following is an example of how the `<app-root>` and `<app-child>` view trees
...content goes here...
</#VIEW>
</app-child>
<#VIEW>
</#VIEW>
</app-root>
```
@@ -1021,8 +1021,8 @@ The logical tree representation shows why this is:
@Inject(AnimalService, @Optional)=>"🦔">
<!-- ^^@SkipSelf() starts here, @Host() stops here^^ -->
<app-child>
<#VIEW @Provide(AnimalService="🦔")
@Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🐶">
<#VIEW @Provide(AnimalService="🐶")
@Inject(AnimalService, @SkipSelf, @Host, @Optional)=>"🦔">
<!-- Add @SkipSelf ^^-->
</#VIEW>
</app-child>
+565 -363
View File
File diff suppressed because it is too large Load Diff
+1 -2
View File
@@ -110,9 +110,8 @@ Version | Status | Released | Active Ends | LTS Ends
^12.0.0 | Active | May 12, 2021 | Nov 12, 2021 | Nov 12, 2022
^11.0.0 | LTS | Nov 11, 2020 | May 11, 2021 | May 11, 2022
^10.0.0 | LTS | Jun 24, 2020 | Dec 24, 2020 | Dec 24, 2021
^9.0.0 | LTS | Feb 06, 2020 | Aug 06, 2020 | Aug 06, 2021
Angular versions v4, v5, v6, v7, and v8 are no longer under support.
Angular versions v4, v5, v6, v7, v8, and v9 are no longer under support.
### LTS fixes
+1 -1
View File
@@ -6,7 +6,7 @@ As users perform application tasks, they need to move between the different [vie
To handle the navigation from one [view](guide/glossary#view) to the next, you use the Angular **`Router`**.
The **`Router`** enables navigation by interpreting a browser URL as an instruction to change the view.
To explore a sample app featuring the router's primary features, see the <live-example stackblitz="router"></live-example>.
To explore a sample app featuring the router's primary features, see the <live-example name="router"></live-example>.
## Prerequisites
+2 -4
View File
@@ -197,8 +197,7 @@ By using the long form, the schematic can provide more explicit formatting of th
"css",
"scss",
"sass",
"less",
"styl"
"less"
],
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
@@ -207,8 +206,7 @@ By using the long form, the schematic can provide more explicit formatting of th
{ "value": "css", "label": "CSS" },
{ "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" },
{ "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
{ "value": "less", "label": "Less [ http://lesscss.org/ ]" },
{ "value": "styl", "label": "Stylus [ https://stylus-lang.com/ ]" }
{ "value": "less", "label": "Less [ http://lesscss.org/ ]" }
]
},
},
@@ -162,6 +162,12 @@ You declare a template input variable using the `let` keyword as in `let hero`.
There are several such variables in this example: `hero`, `i`, and `odd`.
```html
<ng-template #hero let-hero let-i="index" let-odd="isOdd">
<div [class]="{'odd-row': odd}">{{i}}:{{hero.name}}</div>
</ng-template>
```
The variable's scope is limited to a single instance of the repeated template.
Use the same variable name again in the definition of other structural directives.
@@ -1558,7 +1558,7 @@ You can consolidate the two `beforeEach()` functions into a single, async `befor
The `compileComponents()` method returns a promise so you can perform the
synchronous setup tasks _after_ compilation by moving the synchronous code
into a `then(...)` callback.
after the `await` keyword, where the promise has been resolved.
<code-example
path="testing/src/app/banner/banner-external.component.spec.ts"
+1 -1
View File
@@ -203,7 +203,7 @@ The important bit in the `server.ts` file is the `ngExpressEngine()` function.
The `ngExpressEngine()` function is a wrapper around Universal's `renderModule()` function which turns a client's
requests into server-rendered HTML pages. It accepts an object with the following properties:
* `bootstrap`: The root `NgModule` or `NgModule` factory to use for bootstraping the application when rendering on the server. For the example app, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application.
* `bootstrap`: The root `NgModule` or `NgModule` factory to use for bootstrapping the application when rendering on the server. For the example app, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application.
* `extraProviders`: This is optional and lets you specify dependency providers that apply only when rendering the application on the server. You can do this when your application needs information that can only be determined by the currently running server instance.
The `ngExpressEngine()` function returns a `Promise` callback that resolves to the rendered page.
+1 -1
View File
@@ -590,7 +590,7 @@ The safest bet for ensuring compatibility is using the
[component API](https://docs.angularjs.org/api/ng/type/angular.Module)
introduced in AngularJS 1.5.
An example of an upgradable component is one that just has a template
An example of an upgradeable component is one that just has a template
and a controller:
<code-example path="upgrade-module/src/app/upgrade-static/hero-detail.component.ts" region="hero-detail" header="hero-detail.component.ts">
+3 -3
View File
@@ -191,10 +191,10 @@ Some additional options can only be set through the configuration file, either b
| OPTIONS PROPERTIES | DESCRIPTION |
| :------------------------- | :---------------------------- |
| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` folder. See more in [Assets configuration](#asset-config) below. |
| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com/), [less](http://lesscss.org/), and [stylus](https://stylus-lang.com/). See more in [Styles and scripts configuration](#style-script-config) below. |
| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com/) and [less](http://lesscss.org/). See more in [Styles and scripts configuration](#style-script-config) below. |
| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in [Styles and scripts configuration](#style-script-config) below. |
| `scripts` | An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in [Styles and scripts configuration](#style-script-config) below. |
| `budgets` | Default size-budget type and threshholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](guide/build#configure-size-budgets). (Not available in `test` section.) |
| `budgets` | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](guide/build#configure-size-budgets). (Not available in `test` section.) |
| `fileReplacements` | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](guide/build#configure-target-specific-file-replacements).|
{@a complex-config}
@@ -330,7 +330,7 @@ You can mix simple and complex file references for styles and scripts.
#### Style preprocessor options
In Sass and Stylus you can make use of the `includePaths` functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.
In Sass you can make use of the `includePaths` functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.
To add paths, use the `stylePreprocessorOptions` option:
Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

+20 -24
View File
@@ -40,7 +40,7 @@
"alan-agius4": {
"name": "Alan Agius",
"groups": ["Angular"],
"lead": "kyliau",
"lead": "dgp1130",
"picture": "alan-agius4.jpg",
"bio": "Angular CLI Member, Loves TypeScript, Build Tools, Food, Beer & Coffee :)"
},
@@ -111,7 +111,7 @@
"picture": "aristeidis.jpg",
"twitter": "abampakos",
"website": "https://medium.com/@abampakos",
"bio": "Aristeidis is a front end web developer at Plex-Earth working with Angular. He is a co-organizer of the Angular Athens meetup and the author of Learning Angular - 3rd Edition. He is also a senior Angular instructor at Code.Hub where he teaches the Angular framework to other developers.",
"bio": "Aristeidis is a web development team lead at Plex-Earth working with Angular. He is a co-organizer of the Angular Athens meetup and the author of Learning Angular - 3rd Edition and Angular Projects - 2nd Edition books. He is also a senior Angular instructor at Code.Hub where he teaches the Angular framework to other developers.",
"groups": ["GDE"]
},
"bbrennan": {
@@ -181,13 +181,6 @@
"bio": "Co-founder and CTO of Thinktecture AG, as well as Google GDE and Microsoft MVP. Since two decades active as an engaged and passionate speaker on several software conferences and events all over the world. Some people call him 'Mr. Cross-Platform'.",
"groups": ["GDE"]
},
"cindygk": {
"name": "Cindy Greene-Kaplan",
"picture": "cindygreenekaplan.jpg",
"twitter": "cindykaygk",
"bio": "Cindy is a Program Manager on the Angular team at Google. She is passionate about improving team processes and overall execution. She enjoys dance fitness, movies and travel.",
"groups": ["Angular"]
},
"cironunes": {
"name": "Ciro Nunes",
"picture": "cironunes.jpg",
@@ -198,7 +191,7 @@
"clydin": {
"name": "Charles Lyding",
"groups": ["Angular"],
"lead": "kyliau",
"lead": "dgp1130",
"picture": "clydin.jpg"
},
"coryrylan": {
@@ -262,8 +255,7 @@
"twitter": "develwoutacause",
"website": "https://github.com/dgp1130",
"bio": "Doug is an overly-opinionated software developer with a passion for making awesome developer tools. He is motivated primarily by his selfish desire to make his own life easier, but loves to share his tools and workflows with others to make everyone's lives easier.",
"groups": ["Angular"],
"lead": "kyliau"
"groups": ["Angular"]
},
"doguhan": {
"name": "Doguhan Uluca",
@@ -325,7 +317,7 @@
"website": "https://github.com/filipesilva",
"bio": "Filipe is a passion-driven developer that always strives for the most elegant solution for each problem. He is currently an author for Angular.io, a core contributor for Angular-CLI and senior front end engineer at KonnectAgain. When not busy going through PRs, you can find him scouring reddit for new dinner recipes to cook or enjoying a craft beer in Dublin.",
"groups": ["Angular"],
"lead": "kyliau"
"lead": "dgp1130"
},
"fmalcher": {
"name": "Ferdinand Malcher",
@@ -354,7 +346,7 @@
"gregmagolan": {
"name": "Greg Magolan",
"groups": ["Angular"],
"lead": "kyliau",
"lead": "dgp1130",
"picture": "gregmagolan.jpg",
"bio": "Building great software with Angular and Node.js."
},
@@ -368,7 +360,7 @@
"jbedard": {
"name": "Jason Bedard",
"groups": ["Collaborators"],
"mentor": "kyliau",
"mentor": "dgp1130",
"picture": "jbedard.jpg"
},
"jecelynyeen": {
@@ -459,6 +451,13 @@
"groups": ["Angular"],
"lead": "igorminar"
},
"josmar-crwdstffng": {
"name": "Joe Martin",
"picture": "josephmmartin.jpg",
"bio": "Joe is a technical writer working on the Angular docs.",
"groups": ["Angular"],
"lead": "aikidave"
},
"jschwarty": {
"name": "Justin Schwartzenberger",
"picture": "justinschwartzenberger.jpg",
@@ -530,15 +529,6 @@
"bio": "Kwinten is a GDE for Angular with a passion for reactive coding. He works as a software engineer for Stackblitz. He shares his passion for Angular and coding through blogposts and training sessions with the company he co-founded called Strongbrew.",
"groups": ["GDE"]
},
"kyliau": {
"name": "Keen Yee Liau",
"twitter": "liauky",
"website": "https://github.com/kyliau",
"bio": "Keen works on language service and CLI. He also maintains Karma and Protractor.",
"groups": ["Angular"],
"lead": "igorminar",
"picture": "kyliau.jpg"
},
"lacolaco": {
"name": "Suguru Inatomi",
"picture": "lacolaco.jpg",
@@ -854,6 +844,12 @@
"bio": "Andrew is a software engineer using Angular and .NET. He spends most of his spare time staying up-to-date, helping other people, and experimenting with web tech.",
"groups": ["GDE"]
},
"tmdavisgoogle": {
"name": "Tiffany Davis",
"bio": "Tiffany is an editor working on Angular documentation.",
"groups": ["Angular"],
"lead": "aikidave"
},
"toddmotto": {
"name": "Todd Motto",
"picture": "toddmotto.jpg",
+11
View File
@@ -49,6 +49,11 @@
"desc": "Add API Based CMS to your Angular app",
"url": "https://github.com/ButterCMS/buttercms-angular-tutorial",
"title": "API Based CMS with Butter"
},
"angular-community-meetup": {
"desc": "Come learn technical skills and network at this monthly, multi-series, multi-event, multi-timezone online meetup.",
"url": "https://angularcommunity.net",
"title": "Angular Community Meetup"
}
}
},
@@ -90,6 +95,12 @@
"logo": "",
"title": "NgRuAir",
"url": "https://github.com/ngRuAir/ngruair"
},
"ngxp": {
"desc": "Weekly technical-adjacent podcast by Brooke Avery & Erik Slack. Don't just code in Angular, come enjoy the Angular Experience!",
"logo": "",
"title": "Angular Experience (NgXP)",
"url": "https://ngxp.show"
}
}
}
+5 -1
View File
@@ -199,7 +199,11 @@ This section walks you through creating a child component, `ProductAlertsCompone
<code-example header="src/app/product-alerts/product-alerts.component.html" path="getting-started/src/app/product-alerts/product-alerts.component.1.html"></code-example>
1. To display `ProductAlertsComponent` as a child of `ProductListComponent`, add the selector, `<app-product-alerts>` to `product-list.component.html`.
1. To make `ProductAlertsComponent` available to other components in the application, add it to `AppModule`'s declarations in `app.module.ts`.
<code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="declare-product-alerts"></code-example>
1. Finally, to display `ProductAlertsComponent` as a child of `ProductListComponent`, add the selector, `<app-product-alerts>` to `product-list.component.html`.
Pass the current product as input to the component using property binding.
<code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.5.html" region="app-product-alerts"></code-example>
+4 -4
View File
@@ -18,7 +18,7 @@
"build-local": "yarn ~~build",
"prebuild-local-ci": "yarn setup-local-ci",
"build-local-ci": "yarn ~~build --progress=false",
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js a57976b98",
"extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 56c5962df",
"lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
"test": "yarn check-env && ng test",
"pree2e": "yarn check-env && yarn update-webdriver",
@@ -56,7 +56,7 @@
"docs-test": "node tools/transforms/test.js",
"redirects-test": "node tests/deployment/unit/test",
"firebase-utils-test": "node tools/firebase-test-utils/test",
"tools-lint": "tslint --config \"tools/tslint.json\" --project \"tools/firebase-test-utils\" && eslint tools/ng-packages-installer",
"tools-lint": "eslint tools/firebase-test-utils && eslint tools/ng-packages-installer",
"tools-test": "yarn docs-test && yarn boilerplate:test && jasmine tools/ng-packages-installer/index.spec.js && jasmine scripts/deploy-to-firebase.spec.js && yarn firebase-utils-test",
"preserve-and-sync": "yarn docs",
"serve-and-sync": "run-p \"docs-watch --watch-only\" \"start {@}\" --",
@@ -130,8 +130,8 @@
"cross-spawn": "^7.0.3",
"css-selector-parser": "^1.4.1",
"dgeni": "^0.4.14",
"dgeni-packages": "^0.29.1",
"entities": "^2.2.0",
"dgeni-packages": "^0.29.2",
"entities": "^3.0.0",
"esbuild": "^0.12.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "^2.23.4",
@@ -149,7 +149,7 @@ export class DocViewerComponent implements OnDestroy {
this.setNoIndex(true);
// TODO(gkalpak): Remove this once gathering debug info is no longer needed.
if (/loading chunk \d+ failed/i.test(errorMessage)) {
if (/loading chunk \S+ failed/i.test(errorMessage)) {
// Print some info to help with debugging.
// (There is no reason to wait for this async call to complete before continuing.)
printSwDebugInfo();
@@ -97,7 +97,6 @@
.github-links {
a {
.material-icons:hover {
background: none;
}
@@ -167,6 +166,10 @@
margin-top: 8px;
}
.final-message {
font-style: italic;
}
.api-heading {
@include mixins.font-size(14);
margin: 16px;
@@ -8,9 +8,17 @@
&.api-status-label {
background-color: constants.$mediumgray;
&.deprecated, &.security, &.impure-pipe {
&.deprecated,
&.security,
&.impure-pipe {
background-color: constants.$brightred;
}
a {
color: inherit;
line-height: inherit;
font-size: inherit;
}
}
&.api-type-label {
+1 -1
View File
@@ -86,7 +86,7 @@ The file is expected to contain a JSON object with zero or more of the following
"cmd": "yarn",
"args": [
"e2e",
"--prod",
"--configuration=production",
"--protractor-config=e2e/protractor-puppeteer.conf.js",
"--no-webdriver-update",
"--port={PORT}"

Some files were not shown because too many files have changed in this diff Show More