Compare commits
154 Commits
6.1.1
...
7.0.0-beta
Author | SHA1 | Date | |
---|---|---|---|
a2593cbfb1 | |||
70a3deb8a5 | |||
843479449d | |||
732026c3f5 | |||
ec6d6175d2 | |||
af9ced9026 | |||
c6e5b971d6 | |||
dbdbbdbe86 | |||
fefc860f35 | |||
02e201ab1a | |||
7bf5a43385 | |||
2fe05abbc4 | |||
2505c077d7 | |||
066fc6a0ca | |||
07ab98bbb0 | |||
16c03c0f38 | |||
3355502f2f | |||
02c15a2448 | |||
6861bc5b06 | |||
b8887ddf16 | |||
4933e103d3 | |||
7d006c5005 | |||
67ad59c245 | |||
397530ab24 | |||
a9881bb18e | |||
c1587029db | |||
2b906f652f | |||
c67f1bb38e | |||
637ae135c5 | |||
4eb8ac6de9 | |||
ba1e25f53f | |||
97b5cb2e3b | |||
795e1e8a38 | |||
aea8832243 | |||
1e7ca22078 | |||
26a15cc534 | |||
b0d86c1c2f | |||
dc0715142f | |||
4e264781ee | |||
79a9c71422 | |||
15cc85c54a | |||
725bae1921 | |||
eb999300d9 | |||
afa6b9e794 | |||
0822dc70f2 | |||
728d98d3a9 | |||
2f4abbf5a1 | |||
1000fb8406 | |||
b38931b484 | |||
1fb7111da1 | |||
c2c12e52fe | |||
28c7a4efbc | |||
4f741e74e1 | |||
6bacd32fbd | |||
183757daa2 | |||
adf510f986 | |||
74bce18190 | |||
3ba5220839 | |||
5982425436 | |||
140248ade0 | |||
e60737f63c | |||
7b89711402 | |||
f1223628a6 | |||
1b4269ad85 | |||
a224df43af | |||
d46a961509 | |||
20b453008f | |||
06a1974a48 | |||
3d7f555044 | |||
06af7943a4 | |||
fa70a2a650 | |||
bde4402675 | |||
7d6b258778 | |||
5342aeaafd | |||
1dd2eaa7d2 | |||
af07ffc2ad | |||
2b6e1f0f4b | |||
7a4fb44f8d | |||
88da8f3d52 | |||
01e6dab544 | |||
a9ecf4b929 | |||
166ddaadca | |||
1e5327872d | |||
367841d237 | |||
d5b73832bf | |||
7075c418f9 | |||
466e026f6f | |||
4976a58780 | |||
bafe1a0d2a | |||
c8a4fb1faf | |||
64516da6b0 | |||
6e2a1877ab | |||
aafd502bcb | |||
4cb1074850 | |||
76d8eb021c | |||
3f6fc00d73 | |||
5254d3447d | |||
4ee9db959a | |||
3f20a2fb5a | |||
e3834b7001 | |||
36648293a8 | |||
cd89eb8404 | |||
e99d860393 | |||
24789e9ad9 | |||
f94f9640d0 | |||
4d5167ec83 | |||
efc6684cd3 | |||
2ef777b0b2 | |||
fe14f180a6 | |||
87419097da | |||
9a6d26e05b | |||
6a797d5401 | |||
89e8b6fc0e | |||
f82b6b2ed7 | |||
a87d44c187 | |||
43d0e3dd72 | |||
5b32aa4486 | |||
844d510d3f | |||
2f70e90493 | |||
45cf5b5dad | |||
4ad2f11919 | |||
d7aa20d912 | |||
a673494412 | |||
07e6de5788 | |||
6f1685ab98 | |||
67588ec606 | |||
ee2c050521 | |||
185b932138 | |||
5e98421d33 | |||
8e65891985 | |||
7f59170f77 | |||
9ea112473b | |||
16f0ac38b8 | |||
15df853622 | |||
d3c0915598 | |||
ce98634dfd | |||
342678486d | |||
e8d4211d5c | |||
6a4d66d432 | |||
a3cf61b7cf | |||
a1b185b723 | |||
601064e41d | |||
e265ccd82c | |||
dd44f63c73 | |||
1d051c5841 | |||
323faf954b | |||
3169edd77a | |||
8de304c15a | |||
0d1d5898e3 | |||
6fe865b080 | |||
e0c0c44d99 | |||
13a0d527f6 | |||
ed7aa1c3e5 | |||
f902b5ec59 |
@ -3,7 +3,10 @@
|
||||
# See remote cache documentation in /docs/BAZEL.md
|
||||
|
||||
# Don't be spammy in the logs
|
||||
build --noshow_progress
|
||||
# TODO(gmagolan): Hide progress again once build performance improves
|
||||
# Presently, CircleCI can timeout during bazel test ... with the following
|
||||
# error: Too long with no output (exceeded 10m0s)
|
||||
# build --noshow_progress
|
||||
|
||||
# Don't run manual tests
|
||||
test --test_tag_filters=-manual
|
||||
|
195
.pullapprove.yml
195
.pullapprove.yml
@ -8,6 +8,7 @@
|
||||
# alexeagle - Alex Eagle
|
||||
# alxhub - Alex Rickabaugh
|
||||
# andrewseguin - Andrew Seguin
|
||||
# benlesh - Ben Lesh
|
||||
# brandonroberts - Brandon Roberts
|
||||
# brocco - Mike Brocchi
|
||||
# filipesilva - Filipe Silva
|
||||
@ -15,7 +16,7 @@
|
||||
# hansl - Hans Larsen
|
||||
# IgorMinar - Igor Minar
|
||||
# jasonaden - Jason Aden
|
||||
# kapunahelewong - Kapunahele Wong
|
||||
# jenniferfell - Jennifer Fell
|
||||
# kara - Kara Erickson
|
||||
# kyliau - Keen Yee Liau
|
||||
# matsko - Matias Niemelä
|
||||
@ -91,6 +92,7 @@ groups:
|
||||
- "*.bzl"
|
||||
- "packages/bazel/*"
|
||||
- "tools/bazel.rc"
|
||||
- "/docs/BAZEL.md"
|
||||
users:
|
||||
- alexeagle #primary
|
||||
- kyliau
|
||||
@ -130,42 +132,113 @@ groups:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/core/*"
|
||||
- "aio/content/guide/bootstrapping.md"
|
||||
- "aio/content/examples/bootstrapping/*"
|
||||
- "aio/content/guide/attribute-directives.md"
|
||||
- "aio/content/examples/attribute-directives/*"
|
||||
- "aio/content/images/guide/attribute-directives/*"
|
||||
- "aio/content/guide/structural-directives.md"
|
||||
- "aio/content/examples/structural-directives/*"
|
||||
- "aio/content/images/guide/structural-directives/*"
|
||||
- "aio/content/guide/dynamic-component-loader.md"
|
||||
- "aio/content/examples/dynamic-component-loader/*"
|
||||
- "aio/content/images/guide/dynamic-component-loader/*"
|
||||
- "aio/content/guide/template-syntax.md"
|
||||
- "aio/content/examples/template-syntax/*"
|
||||
- "aio/content/images/guide/template-syntax/*"
|
||||
- "aio/content/guide/dependency-injection.md"
|
||||
- "aio/content/examples/dependency-injection/*"
|
||||
- "aio/content/images/guide/dependency-injection/*"
|
||||
- "aio/content/guide/dependency-injection-in-action.md"
|
||||
- "aio/content/examples/dependency-injection-in-action/*"
|
||||
- "aio/content/images/guide/dependency-injection-in-action/*"
|
||||
- "aio/content/guide/hierarchical-dependency-injection.md"
|
||||
- "aio/content/examples/hierarchical-dependency-injection/*"
|
||||
- "aio/content/guide/singleton-services.md"
|
||||
- "aio/content/guide/dependency-injection-pattern.md"
|
||||
- "aio/content/guide/providers.md"
|
||||
- "aio/content/examples/providers/*"
|
||||
- "aio/content/guide/component-interaction.md"
|
||||
- "aio/content/examples/component-interaction/*"
|
||||
- "aio/content/images/guide/component-interaction/*"
|
||||
- "aio/content/guide/component-styles.md"
|
||||
- "aio/content/examples/component-styles/*"
|
||||
- "aio/content/guide/lifecycle-hooks.md"
|
||||
- "aio/content/examples/lifecycle-hooks/*"
|
||||
- "aio/content/images/guide/lifecycle-hooks/*"
|
||||
- "aio/content/examples/ngcontainer/*"
|
||||
- "aio/content/images/guide/ngcontainer/*"
|
||||
- "aio/content/guide/pipes.md"
|
||||
- "aio/content/examples/pipes/*"
|
||||
- "aio/content/images/guide/pipes/*"
|
||||
- "aio/content/guide/entry-components.md"
|
||||
- "aio/content/guide/set-document-title.md"
|
||||
- "aio/content/examples/set-document-title/*"
|
||||
- "aio/content/images/guide/set-document-title/*"
|
||||
- "aio/content/guide/ngmodules.md"
|
||||
- "aio/content/examples/ngmodules/*"
|
||||
- "aio/content/examples/ngmodule/*"
|
||||
- "aio/content/images/guide/ngmodule/*"
|
||||
- "aio/content/guide/ngmodule-faq.md"
|
||||
- "aio/content/examples/ngmodule-faq/*"
|
||||
- "aio/content/guide/module-types.md"
|
||||
- "aio/content/guide/sharing-ngmodules.md"
|
||||
- "aio/content/guide/frequent-ngmodules.md"
|
||||
- "aio/content/images/guide/frequent-ngmodules/*"
|
||||
- "aio/content/guide/ngmodule-api.md"
|
||||
- "aio/content/guide/ngmodule-vs-jsmodule.md"
|
||||
- "aio/content/guide/feature-modules.md"
|
||||
- "aio/content/examples/feature-modules/*"
|
||||
- "aio/content/images/guide/feature-modules/*"
|
||||
- "aio/content/guide/lazy-loading-ngmodules.md"
|
||||
- "aio/content/examples/lazy-loading-ngmodules/*"
|
||||
- "aio/content/images/guide/lazy-loading-ngmodules"
|
||||
users:
|
||||
- mhevery #primary
|
||||
- jasonaden
|
||||
- kara
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
- IgorMinar
|
||||
- jenniferfell #docs only
|
||||
|
||||
animations:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/animations/*"
|
||||
- "packages/platform-browser/animations/*"
|
||||
- "aio/content/guide/animations.md"
|
||||
- "aio/content/examples/animations/*"
|
||||
- "aio/content/images/guide/animations/*"
|
||||
users:
|
||||
- matsko #primary
|
||||
- mhevery #fallback
|
||||
- IgorMinar #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
compiler/i18n:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/compiler/src/i18n/*"
|
||||
- "aio/content/guide/i18n.md"
|
||||
- "aio/content/examples/i18n/*"
|
||||
users:
|
||||
- vicb #primary
|
||||
- alxhub
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
compiler:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/compiler/*"
|
||||
- "aio/content/guide/aot-compiler.md"
|
||||
users:
|
||||
- alxhub #primary
|
||||
- vicb
|
||||
- mhevery
|
||||
- IgorMinar #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
compiler-cli/ngtools:
|
||||
conditions:
|
||||
@ -174,7 +247,6 @@ groups:
|
||||
users:
|
||||
- hansl
|
||||
- filipesilva #fallback
|
||||
- brocco #fallback
|
||||
- IgorMinar #fallback
|
||||
|
||||
compiler-cli:
|
||||
@ -210,56 +282,97 @@ groups:
|
||||
files:
|
||||
- "packages/forms/*"
|
||||
- "aio/content/guide/forms.md"
|
||||
- "aio/content/guide/form-validation.md"
|
||||
- "aio/content/guide/reactive-forms.md"
|
||||
- "aio/content/examples/forms/*"
|
||||
- "aio/content/images/guide/forms/*"
|
||||
- "aio/content/guide/form-validation.md"
|
||||
- "aio/content/examples/form-validation/*"
|
||||
- "aio/content/images/guide/form-validation/*"
|
||||
- "aio/content/guide/dynamic-form.md"
|
||||
- "aio/content/examples/dynamic-form/*"
|
||||
- "aio/content/images/guide/dynamic-form/*"
|
||||
- "aio/content/guide/reactive-forms.md"
|
||||
- "aio/content/examples/reactive-forms/*"
|
||||
- "aio/content/images/guide/reactive-forms/*"
|
||||
users:
|
||||
- kara #primary
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
http:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/common/http/*"
|
||||
- "packages/http/*"
|
||||
- "aio/content/guide/http.md"
|
||||
- "aio/content/examples/http/*"
|
||||
- "aio/content/images/guide/http/*"
|
||||
users:
|
||||
- alxhub #primary
|
||||
- IgorMinar
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
language-service:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/language-service/*"
|
||||
- "aio/content/guide/language-service.md"
|
||||
- "aio/content/images/guide/language-service/*"
|
||||
users:
|
||||
- kyliau #primary
|
||||
# needs secondary
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
router:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/router/*"
|
||||
- "aio/content/guide/router.md"
|
||||
- "aio/content/examples/router/*"
|
||||
- "aio/content/images/guide/router/*"
|
||||
users:
|
||||
- jasonaden #primary
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
testing:
|
||||
conditions:
|
||||
files:
|
||||
- "*/testing/*"
|
||||
- "aio/content/guide/testing.md"
|
||||
- "aio/content/examples/testing/*"
|
||||
- "aio/content/images/guide/testing/*"
|
||||
users:
|
||||
- vikerman
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
upgrade:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/upgrade/*"
|
||||
- "aio/content/guide/upgrade.md"
|
||||
- "aio/content/examples/upgrade-module/*"
|
||||
- "aio/content/images/guide/upgrade/*"
|
||||
- "aio/content/examples/upgrade-phonecat-1-typescript/*"
|
||||
- "aio/content/examples/upgrade-phonecat-2-hybrid/*"
|
||||
- "aio/content/examples/upgrade-phonecat-3-final/*"
|
||||
- "aio/content/guide/upgrade-performance.md"
|
||||
- "aio/content/guide/ajs-quick-reference.md"
|
||||
- "aio/content/examples/ajs-quick-reference/*"
|
||||
users:
|
||||
- petebacondarwin #primary
|
||||
- gkalpak
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
platform-browser:
|
||||
conditions:
|
||||
@ -275,12 +388,15 @@ groups:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/platform-server/*"
|
||||
- "aio/content/guide/universal.md"
|
||||
- "aio/content/examples/universal/*"
|
||||
users:
|
||||
- vikerman #primary
|
||||
- alxhub #secondary
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
platform-webworker:
|
||||
conditions:
|
||||
@ -296,22 +412,34 @@ groups:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/service-worker/*"
|
||||
- "aio/content/guide/service-worker-getting-started.md"
|
||||
- "aio/content/examples/service-worker-getting-started/*"
|
||||
- "aio/content/guide/service-worker-communications.md"
|
||||
- "aio/content/guide/service-worker-config.md"
|
||||
- "aio/content/guide/service-worker-devops.md"
|
||||
- "aio/content/guide/service-worker-intro.md"
|
||||
- "aio/content/images/guide/service-worker/*"
|
||||
users:
|
||||
- alxhub #primary
|
||||
- gkalpak
|
||||
- IgorMinar #fallback
|
||||
- gkalpak #primary
|
||||
- alxhub
|
||||
- IgorMinar
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
elements:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/elements/*"
|
||||
- "aio/content/examples/elements/*"
|
||||
- "aio/content/images/guide/elements/*"
|
||||
- "aio/content/guide/elements.md"
|
||||
users:
|
||||
- andrewseguin #primary
|
||||
- gkalpak
|
||||
- robwormald
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
||||
benchpress:
|
||||
conditions:
|
||||
@ -323,7 +451,7 @@ groups:
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
|
||||
angular.io:
|
||||
docs-infra:
|
||||
conditions:
|
||||
files:
|
||||
include:
|
||||
@ -336,7 +464,7 @@ groups:
|
||||
- gkalpak
|
||||
- mhevery #fallback
|
||||
|
||||
angular.io-guide-and-tutorial:
|
||||
docs/guide-and-tutorial:
|
||||
conditions:
|
||||
files:
|
||||
include:
|
||||
@ -346,19 +474,20 @@ groups:
|
||||
- "aio/content/navigation.json"
|
||||
- "aio/content/license.md"
|
||||
users:
|
||||
- kapunahelewong
|
||||
- stephenfluin
|
||||
- jenniferfell
|
||||
- brandonroberts
|
||||
- petebacondarwin
|
||||
- gkalpak
|
||||
- IgorMinar
|
||||
- brandonroberts
|
||||
- mhevery #fallback
|
||||
|
||||
angular.io-marketing:
|
||||
docs/marketing:
|
||||
conditions:
|
||||
files:
|
||||
include:
|
||||
- "aio/content/marketing/*"
|
||||
- "aio/content/images/marketing/*"
|
||||
- "aio/content/navigation.json"
|
||||
- "aio/content/license.md"
|
||||
users:
|
||||
@ -368,3 +497,43 @@ groups:
|
||||
- IgorMinar
|
||||
- robwormald
|
||||
- mhevery #fallback
|
||||
|
||||
docs/observables:
|
||||
conditions:
|
||||
files:
|
||||
- "aio/content/examples/observables/*"
|
||||
- "aio/content/images/guide/observables/*"
|
||||
- "aio/content/guide/observables.md"
|
||||
- "aio/content/guide/comparing-observables.md"
|
||||
- "aio/content/examples/observables-in-angular/*"
|
||||
- "aio/content/images/guide/observables-in-angular/*"
|
||||
- "aio/content/guide/observables-in-angular.md"
|
||||
- "aio/content/examples/practical-observable-usage/*"
|
||||
- "aio/content/guide/practical-observable-usage.md"
|
||||
- "aio/content/examples/rx-library/*"
|
||||
- "aio/content/guide/rx-library.md"
|
||||
users:
|
||||
- jasonaden
|
||||
- benlesh
|
||||
- IgorMinar
|
||||
- mhevery
|
||||
- jenniferfell #docs only
|
||||
|
||||
docs/packaging:
|
||||
conditions:
|
||||
files:
|
||||
- "aio/content/guide/npm-packages.md"
|
||||
- "aio/content/guide/browser-support.md"
|
||||
- "aio/content/guide/typescript-configuration.md"
|
||||
- "aio/content/guide/setup-systemjs-anatomy.md"
|
||||
- "aio/content/examples/setup/*"
|
||||
- "aio/content/guide/setup.md"
|
||||
- "aio/content/guide/deployment.md"
|
||||
- "aio/content/guide/releases.md"
|
||||
- "aio/content/guide/updating.md"
|
||||
users:
|
||||
- IgorMinar #primary
|
||||
- alexeagle
|
||||
- hansl
|
||||
- mhevery #fallback
|
||||
- jenniferfell #docs only
|
||||
|
223
BUILD.bazel
223
BUILD.bazel
@ -15,220 +15,19 @@ alias(
|
||||
actual = "@nodejs//:yarn",
|
||||
)
|
||||
|
||||
node_modules_filegroup(
|
||||
alias(
|
||||
name = "node_modules",
|
||||
packages = [
|
||||
"adm-zip",
|
||||
"ajv",
|
||||
"angular",
|
||||
"angular-1.5",
|
||||
"angular-mocks",
|
||||
"angular-mocks-1.5",
|
||||
"anymatch",
|
||||
"arr-diff",
|
||||
"arr-flatten",
|
||||
"arr-union",
|
||||
"array-unique",
|
||||
"asn1",
|
||||
"assert-plus",
|
||||
"assign-symbols",
|
||||
"async-each",
|
||||
"asynckit",
|
||||
"atob",
|
||||
"aws-sign2",
|
||||
"aws4",
|
||||
"balanced-match",
|
||||
"base",
|
||||
"base64-js",
|
||||
"binary-extensions",
|
||||
"blocking-proxy",
|
||||
"brace-expansion",
|
||||
"braces",
|
||||
"bytebuffer",
|
||||
"cache-base",
|
||||
"caseless",
|
||||
"chokidar",
|
||||
"class-utils",
|
||||
"co",
|
||||
"collection-visit",
|
||||
"combined-stream",
|
||||
"component-emitter",
|
||||
"concat-map",
|
||||
"copy-descriptor",
|
||||
"core-util-is",
|
||||
"debug",
|
||||
"decode-uri-component",
|
||||
"define-property",
|
||||
"delayed-stream",
|
||||
"domino",
|
||||
"expand-brackets",
|
||||
"expand-range",
|
||||
"extend",
|
||||
"extend-shallow",
|
||||
"extglob",
|
||||
"extsprintf",
|
||||
"fast-deep-equal",
|
||||
"fast-json-stable-stringify",
|
||||
"filename-regex",
|
||||
"fill-range",
|
||||
"for-in",
|
||||
"for-own",
|
||||
"forever-agent",
|
||||
"form-data",
|
||||
"fragment-cache",
|
||||
"fs.realpath",
|
||||
"get-value",
|
||||
"glob",
|
||||
"glob-base",
|
||||
"glob-parent",
|
||||
"graceful-fs",
|
||||
"hammerjs",
|
||||
"har-schema",
|
||||
"har-validator",
|
||||
"has-value",
|
||||
"has-values",
|
||||
"http-signature",
|
||||
"https-proxy-agent",
|
||||
"inflight",
|
||||
"inherits",
|
||||
"is-accessor-descriptor",
|
||||
"is-binary-path",
|
||||
"is-buffer",
|
||||
"is-data-descriptor",
|
||||
"is-descriptor",
|
||||
"is-dotfile",
|
||||
"is-equal-shallow",
|
||||
"is-extendable",
|
||||
"is-extglob",
|
||||
"is-glob",
|
||||
"is-number",
|
||||
"is-plain-object",
|
||||
"is-posix-bracket",
|
||||
"is-primitive",
|
||||
"is-typedarray",
|
||||
"is-windows",
|
||||
"isarray",
|
||||
"isobject",
|
||||
"isstream",
|
||||
"jasmine",
|
||||
"jasmine-core",
|
||||
"jasminewd2",
|
||||
"json-schema",
|
||||
"json-schema-traverse",
|
||||
"json-stable-stringify",
|
||||
"json-stringify-safe",
|
||||
"jsprim",
|
||||
"kind-of",
|
||||
"long",
|
||||
"lru-cache",
|
||||
"map-cache",
|
||||
"map-visit",
|
||||
"math-random",
|
||||
"micromatch",
|
||||
"mime-db",
|
||||
"mime-types",
|
||||
"minimatch",
|
||||
"minimist",
|
||||
"mixin-deep",
|
||||
"nanomatch",
|
||||
"normalize-path",
|
||||
"oauth-sign",
|
||||
"object.omit",
|
||||
"object.pick",
|
||||
"object-copy",
|
||||
"object-visit",
|
||||
"once",
|
||||
"optimist",
|
||||
"options",
|
||||
"os-tmpdir",
|
||||
"parse-glob",
|
||||
"pascalcase",
|
||||
"path-dirname",
|
||||
"path-is-absolute",
|
||||
"performance-now",
|
||||
"posix-character-classes",
|
||||
"preserve",
|
||||
"process-nextick-args",
|
||||
"protobufjs",
|
||||
"protractor",
|
||||
"qs",
|
||||
"randomatic",
|
||||
"readable-stream",
|
||||
"readdirp",
|
||||
"reflect-metadata",
|
||||
"regex-cache",
|
||||
"regex-not",
|
||||
"remove-trailing-separator",
|
||||
"repeat-element",
|
||||
"repeat-string",
|
||||
"request",
|
||||
"ret",
|
||||
"rimraf",
|
||||
"safe-buffer",
|
||||
"safe-regex",
|
||||
"sax",
|
||||
"semver",
|
||||
"set-immediate-shim",
|
||||
"set-value",
|
||||
"shelljs",
|
||||
"sigmund",
|
||||
"snapdragon",
|
||||
"snapdragon-node",
|
||||
"snapdragon-util",
|
||||
"source-map",
|
||||
"source-map-resolve",
|
||||
"source-map-support",
|
||||
"source-map-url",
|
||||
"split-string",
|
||||
"sshpk",
|
||||
"static-extend",
|
||||
"stringstream",
|
||||
"tmp",
|
||||
"to-object-path",
|
||||
"to-regex",
|
||||
"to-regex-range",
|
||||
"tough-cookie",
|
||||
"tsickle",
|
||||
"tslib",
|
||||
"tsutils",
|
||||
"tunnel-agent",
|
||||
"typescript",
|
||||
"union-value",
|
||||
"unset-value",
|
||||
"upath",
|
||||
"uri-js",
|
||||
"urix",
|
||||
"use",
|
||||
"util-deprecate",
|
||||
"uuid",
|
||||
"verror",
|
||||
"webdriver-js-extender",
|
||||
"webdriver-manager",
|
||||
"wordwrap",
|
||||
"wrappy",
|
||||
"xhr2",
|
||||
"xml2js",
|
||||
"xmlbuilder",
|
||||
"zone.js",
|
||||
"@angular-devkit/core",
|
||||
"@angular-devkit/schematics",
|
||||
"@types",
|
||||
"@webcomponents/custom-elements",
|
||||
],
|
||||
patterns = [
|
||||
"node_modules/protractor/**",
|
||||
"node_modules/@schematics/angular/**",
|
||||
],
|
||||
actual = "@angular_deps//:node_modules",
|
||||
)
|
||||
|
||||
filegroup(
|
||||
name = "web_test_bootstrap_scripts",
|
||||
# do not sort
|
||||
srcs = [
|
||||
"//:node_modules/reflect-metadata/Reflect.js",
|
||||
"//:node_modules/zone.js/dist/zone.js",
|
||||
"//:node_modules/zone.js/dist/zone-testing.js",
|
||||
"//:node_modules/zone.js/dist/task-tracking.js",
|
||||
"@angular_deps//:node_modules/reflect-metadata/Reflect.js",
|
||||
"@angular_deps//:node_modules/zone.js/dist/zone.js",
|
||||
"@angular_deps//:node_modules/zone.js/dist/zone-testing.js",
|
||||
"@angular_deps//:node_modules/zone.js/dist/task-tracking.js",
|
||||
"//:test-events.js",
|
||||
],
|
||||
)
|
||||
@ -236,9 +35,11 @@ filegroup(
|
||||
filegroup(
|
||||
name = "angularjs_scripts",
|
||||
srcs = [
|
||||
"//:node_modules/angular-1.5/angular.js",
|
||||
"//:node_modules/angular-mocks-1.5/angular-mocks.js",
|
||||
"//:node_modules/angular-mocks/angular-mocks.js",
|
||||
"//:node_modules/angular/angular.js",
|
||||
"@angular_deps//:node_modules/angular-1.5/angular.js",
|
||||
"@angular_deps//:node_modules/angular-1.6/angular.js",
|
||||
"@angular_deps//:node_modules/angular-mocks-1.5/angular-mocks.js",
|
||||
"@angular_deps//:node_modules/angular-mocks-1.6/angular-mocks.js",
|
||||
"@angular_deps//:node_modules/angular-mocks/angular-mocks.js",
|
||||
"@angular_deps//:node_modules/angular/angular.js",
|
||||
],
|
||||
)
|
||||
|
70
CHANGELOG.md
70
CHANGELOG.md
@ -1,3 +1,55 @@
|
||||
<a name="7.0.0-beta.1"></a>
|
||||
# [7.0.0-beta.1](https://github.com/angular/angular/compare/7.0.0-beta.0...7.0.0-beta.1) (2018-08-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler-cli:** use the oldProgram option in watch mode ([#21364](https://github.com/angular/angular/issues/21364)) ([c6e5b97](https://github.com/angular/angular/commit/c6e5b97)), closes [#21361](https://github.com/angular/angular/issues/21361)
|
||||
* **core:** In Testability.whenStable update callback, pass more complete ([#25010](https://github.com/angular/angular/issues/25010)) ([16c03c0](https://github.com/angular/angular/commit/16c03c0))
|
||||
* add mappings for ngfactory & ngsummary files to their module names in aot summary resolver ([#25335](https://github.com/angular/angular/issues/25335)) ([02e201a](https://github.com/angular/angular/commit/02e201a))
|
||||
* **router:** take base uri into account in `setUpLocationSync()` ([#20244](https://github.com/angular/angular/issues/20244)) ([ba1e25f](https://github.com/angular/angular/commit/ba1e25f)), closes [#20061](https://github.com/angular/angular/issues/20061)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **core:** add DoBootstrap interface. ([#24558](https://github.com/angular/angular/issues/24558)) ([732026c](https://github.com/angular/angular/commit/732026c)), closes [#24557](https://github.com/angular/angular/issues/24557)
|
||||
|
||||
|
||||
|
||||
<a name="6.1.2"></a>
|
||||
## [6.1.2](https://github.com/angular/angular/compare/6.1.1...6.1.2) (2018-08-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **router:** take base uri into account in `setUpLocationSync()` ([#20244](https://github.com/angular/angular/issues/20244)) ([ae9b4e6](https://github.com/angular/angular/commit/ae9b4e6)), closes [#20061](https://github.com/angular/angular/issues/20061)
|
||||
* add mappings for ngfactory & ngsummary files to their module names in aot summary resolver ([#25335](https://github.com/angular/angular/issues/25335)) ([054fbbe](https://github.com/angular/angular/commit/054fbbe))
|
||||
|
||||
|
||||
<a name="7.0.0-beta.0"></a>
|
||||
# [7.0.0-beta.0](https://github.com/angular/angular/compare/6.1.0...7.0.0-beta.0) (2018-08-02)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bazel:** allow compile_strategy to be (privately) imported ([#25080](https://github.com/angular/angular/issues/25080)) ([0d1d589](https://github.com/angular/angular/commit/0d1d589))
|
||||
* **compiler:** update compiler to flatten nested template fns ([#24943](https://github.com/angular/angular/issues/24943)) ([fe14f18](https://github.com/angular/angular/commit/fe14f18))
|
||||
* **compiler-cli:** correct realPath to realpath. ([#25023](https://github.com/angular/angular/issues/25023)) ([01e6dab](https://github.com/angular/angular/commit/01e6dab))
|
||||
* **core:** throw error message when @Output not initialized ([#19116](https://github.com/angular/angular/issues/19116)) ([adf510f](https://github.com/angular/angular/commit/adf510f)), closes [#3664](https://github.com/angular/angular/issues/3664)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **compiler:** add "original" placeholder value on extracted XMB ([#25079](https://github.com/angular/angular/issues/25079)) ([e99d860](https://github.com/angular/angular/commit/e99d860))
|
||||
|
||||
|
||||
|
||||
<a name="6.1.1"></a>
|
||||
## [6.1.1](https://github.com/angular/angular/compare/6.1.0...6.1.1) (2018-08-02)
|
||||
|
||||
* **compiler-cli:** correct tsickle dependency version to fix typescript 2.9 compatibility ([fec29fa](https://github.com/angular/angular/commit/317c7087c56b72aa74cd6d6a8f719e6e7fec29fa))
|
||||
|
||||
|
||||
|
||||
<a name="6.1.0"></a>
|
||||
# [6.1.0](https://github.com/angular/angular/compare/6.0.0-rc.5...6.1.0) (2018-07-25)
|
||||
|
||||
@ -16,26 +68,19 @@
|
||||
* **common:** format fractional seconds ([#24844](https://github.com/angular/angular/issues/24844)) ([0b4d85e](https://github.com/angular/angular/commit/0b4d85e)), closes [#24831](https://github.com/angular/angular/issues/24831)
|
||||
* **common:** properly update collection reference in NgForOf ([#24684](https://github.com/angular/angular/issues/24684)) ([ff84c5c](https://github.com/angular/angular/commit/ff84c5c)), closes [#24155](https://github.com/angular/angular/issues/24155)
|
||||
* **common:** use correct currency format for locale de-AT ([#24658](https://github.com/angular/angular/issues/24658)) ([dcabb05](https://github.com/angular/angular/commit/dcabb05)), closes [#24609](https://github.com/angular/angular/issues/24609)
|
||||
* **common:** do not round factional seconds ([#24831](https://github.com/angular/angular/issues/24831)) ([a527c69](https://github.com/angular/angular/commit/a527c69)), closes [#24384](https://github.com/angular/angular/issues/24384)
|
||||
* **common:** properly update collection reference in NgForOf ([#24684](https://github.com/angular/angular/issues/24684)) ([ff84c5c](https://github.com/angular/angular/commit/ff84c5c)), closes [#24155](https://github.com/angular/angular/issues/24155)
|
||||
* **common:** use correct currency format for locale de-AT ([#24658](https://github.com/angular/angular/issues/24658)) ([dcabb05](https://github.com/angular/angular/commit/dcabb05)), closes [#24609](https://github.com/angular/angular/issues/24609)
|
||||
* **common:** use correct ICU plural for locale mk ([#24659](https://github.com/angular/angular/issues/24659)) ([64a8584](https://github.com/angular/angular/commit/64a8584))
|
||||
* **compiler:** fix a few non-tree-shakeable code patterns ([#24677](https://github.com/angular/angular/issues/24677)) ([50d4a4f](https://github.com/angular/angular/commit/50d4a4f))
|
||||
* **compiler:** i18n_extractor now outputs the correct source file name ([#24885](https://github.com/angular/angular/issues/24885)) ([c8ad965](https://github.com/angular/angular/commit/c8ad965)), closes [#24884](https://github.com/angular/angular/issues/24884)
|
||||
* **compiler:** fix a few non-tree-shakeable code patterns ([#24677](https://github.com/angular/angular/issues/24677)) ([50d4a4f](https://github.com/angular/angular/commit/50d4a4f))
|
||||
* **compiler:** support `.` in import statements. ([#20634](https://github.com/angular/angular/issues/20634)) ([d8f7b29](https://github.com/angular/angular/commit/d8f7b29)), closes [#20363](https://github.com/angular/angular/issues/20363)
|
||||
* **compiler:** avoid a crash in ngc-wrapped. ([#23468](https://github.com/angular/angular/issues/23468)) ([e1c4930](https://github.com/angular/angular/commit/e1c4930))
|
||||
* **compiler:** generate constant array for i18n attributes ([#23837](https://github.com/angular/angular/issues/23837)) ([cfde36d](https://github.com/angular/angular/commit/cfde36d))
|
||||
* **compiler:** generate core-compliant hostBindings property ([#24087](https://github.com/angular/angular/issues/24087)) ([01b5acd](https://github.com/angular/angular/commit/01b5acd)), closes [#24013](https://github.com/angular/angular/issues/24013)
|
||||
* **compiler:** handle undefined annotation metadata ([#23349](https://github.com/angular/angular/issues/23349)) ([ca776c5](https://github.com/angular/angular/commit/ca776c5))
|
||||
* **compiler-cli:** Use typescript to resolve modules for metadata ([#22856](https://github.com/angular/angular/issues/22856)) ([0d5f2d3](https://github.com/angular/angular/commit/0d5f2d3))
|
||||
* **compiler-cli:** Use typescript to resolve modules for metadata ([#22856](https://github.com/angular/angular/issues/22856)) ([0d5f2d3](https://github.com/angular/angular/commit/0d5f2d3))
|
||||
* **compiler-cli:** don't rely on incompatible TS method ([#23550](https://github.com/angular/angular/issues/23550)) ([b1f040f](https://github.com/angular/angular/commit/b1f040f))
|
||||
* **core:** stop reusing provider definitions across NgModuleRef instances ([#25022](https://github.com/angular/angular/issues/25022)) ([6b859da](https://github.com/angular/angular/commit/6b859da)), closes [#25018](https://github.com/angular/angular/issues/25018)
|
||||
* **core:** mark NgModule as not the root if APP_ROOT is set to false ([#24814](https://github.com/angular/angular/issues/24814)) ([1089261](https://github.com/angular/angular/commit/1089261))
|
||||
* **core:** use addCustomEqualityTester instead of overriding toEqual ([#22983](https://github.com/angular/angular/issues/22983)) ([0922228](https://github.com/angular/angular/commit/0922228)), closes [#22939](https://github.com/angular/angular/issues/22939)
|
||||
* **core:** mark NgModule as not the root if APP_ROOT is set to false ([#24814](https://github.com/angular/angular/issues/24814)) ([1089261](https://github.com/angular/angular/commit/1089261))
|
||||
* **core:** use addCustomEqualityTester instead of overriding toEqual ([#22983](https://github.com/angular/angular/issues/22983)) ([0922228](https://github.com/angular/angular/commit/0922228)), closes [#22939](https://github.com/angular/angular/issues/22939)
|
||||
* **core:** Injector correctly honors the @Self flag ([#24520](https://github.com/angular/angular/issues/24520)) ([ccbda9d](https://github.com/angular/angular/commit/ccbda9d))
|
||||
* **core:** avoid eager providers re-initialization ([#23559](https://github.com/angular/angular/issues/23559)) ([0c6dc45](https://github.com/angular/angular/commit/0c6dc45))
|
||||
* **core:** call ngOnDestroy on all services that have it ([#23755](https://github.com/angular/angular/issues/23755)) ([fc03427](https://github.com/angular/angular/commit/fc03427)), closes [#22466](https://github.com/angular/angular/issues/22466) [#22240](https://github.com/angular/angular/issues/22240) [#14818](https://github.com/angular/angular/issues/14818)
|
||||
@ -44,10 +89,6 @@
|
||||
* **elements:** prevent closure renaming of platform properties ([#23843](https://github.com/angular/angular/issues/23843)) ([d4b8b24](https://github.com/angular/angular/commit/d4b8b24))
|
||||
* **forms:** properly handle special properties in FormGroup.get ([#22249](https://github.com/angular/angular/issues/22249)) ([9367e91](https://github.com/angular/angular/commit/9367e91)), closes [#17195](https://github.com/angular/angular/issues/17195)
|
||||
* **language-service:** do not overwrite native `Reflect` ([#24299](https://github.com/angular/angular/issues/24299)) ([6881404](https://github.com/angular/angular/commit/6881404)), closes [#21420](https://github.com/angular/angular/issues/21420)
|
||||
* **language-service:** do not overwrite native `Reflect` ([#24299](https://github.com/angular/angular/issues/24299)) ([6881404](https://github.com/angular/angular/commit/6881404)), closes [#21420](https://github.com/angular/angular/issues/21420)
|
||||
* **platform-browser:** add missing deps for HammerGesturesPlugin ([#24682](https://github.com/angular/angular/issues/24682)) ([13d60ea](https://github.com/angular/angular/commit/13d60ea))
|
||||
* **platform-browser:** mark Meta and Title services as tree shakable providers ([#24815](https://github.com/angular/angular/issues/24815)) ([197387d](https://github.com/angular/angular/commit/197387d))
|
||||
* **platform-browser:** workaround wrong import path generated by ngc for DOCUMENT ([#24830](https://github.com/angular/angular/issues/24830)) ([7d27ecc](https://github.com/angular/angular/commit/7d27ecc))
|
||||
* **platform-browser:** add missing deps for HammerGesturesPlugin ([#24682](https://github.com/angular/angular/issues/24682)) ([13d60ea](https://github.com/angular/angular/commit/13d60ea))
|
||||
* **platform-browser:** mark Meta and Title services as tree shakable providers ([#24815](https://github.com/angular/angular/issues/24815)) ([197387d](https://github.com/angular/angular/commit/197387d))
|
||||
* **platform-browser:** workaround wrong import path generated by ngc for DOCUMENT ([#24830](https://github.com/angular/angular/issues/24830)) ([7d27ecc](https://github.com/angular/angular/commit/7d27ecc))
|
||||
@ -57,14 +98,12 @@
|
||||
* **platform-server:** provide Domino DOM types globally ([#24116](https://github.com/angular/angular/issues/24116)) ([c73196e](https://github.com/angular/angular/commit/c73196e)), closes [#23280](https://github.com/angular/angular/issues/23280) [#23133](https://github.com/angular/angular/issues/23133)
|
||||
* **router:** Fix _lastPathIndex in deeply nested empty paths ([#22394](https://github.com/angular/angular/issues/22394)) ([968f153](https://github.com/angular/angular/commit/968f153))
|
||||
* **router:** add ability to recover from malformed url ([#23283](https://github.com/angular/angular/issues/23283)) ([86d254d](https://github.com/angular/angular/commit/86d254d)), closes [#21468](https://github.com/angular/angular/issues/21468)
|
||||
* **router:** add ability to recover from malformed url ([#23283](https://github.com/angular/angular/issues/23283)) ([86d254d](https://github.com/angular/angular/commit/86d254d)), closes [#21468](https://github.com/angular/angular/issues/21468)
|
||||
* **router:** fix lazy loading of aux routes ([#23459](https://github.com/angular/angular/issues/23459)) ([5731d07](https://github.com/angular/angular/commit/5731d07)), closes [#10981](https://github.com/angular/angular/issues/10981)
|
||||
* **router:** avoid freezing queryParams in-place ([#22663](https://github.com/angular/angular/issues/22663)) ([89f64e5](https://github.com/angular/angular/commit/89f64e5)), closes [#22617](https://github.com/angular/angular/issues/22617)
|
||||
* **router:** cache route handle if found ([#22475](https://github.com/angular/angular/issues/22475)) ([4cfa571](https://github.com/angular/angular/commit/4cfa571)), closes [#22474](https://github.com/angular/angular/issues/22474)
|
||||
* **router:** correct the segment parsing so it won't break on ampersand ([#23684](https://github.com/angular/angular/issues/23684)) ([553a680](https://github.com/angular/angular/commit/553a680))
|
||||
* **service-worker:** don't include sourceMappingURL in ngsw-worker ([#24877](https://github.com/angular/angular/issues/24877)) ([8620373](https://github.com/angular/angular/commit/8620373)), closes [#23596](https://github.com/angular/angular/issues/23596)
|
||||
* **service-worker:** avoid network requests when looking up hashed resources in cache ([#24127](https://github.com/angular/angular/issues/24127)) ([52d43a9](https://github.com/angular/angular/commit/52d43a9))
|
||||
* **service-worker:** avoid network requests when looking up hashed resources in cache ([#24127](https://github.com/angular/angular/issues/24127)) ([52d43a9](https://github.com/angular/angular/commit/52d43a9))
|
||||
* **service-worker:** fix `SwPush.unsubscribe()` ([#24162](https://github.com/angular/angular/issues/24162)) ([3ed2d75](https://github.com/angular/angular/commit/3ed2d75)), closes [#24095](https://github.com/angular/angular/issues/24095)
|
||||
* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([fb59b2d](https://github.com/angular/angular/commit/fb59b2d)), closes [#23196](https://github.com/angular/angular/issues/23196)
|
||||
* **service-worker:** check platformBrowser before accessing navigator.serviceWorker ([#21231](https://github.com/angular/angular/issues/21231)) ([0bdd30e](https://github.com/angular/angular/commit/0bdd30e))
|
||||
@ -82,9 +121,6 @@
|
||||
* **core:** expose a Compiler API for accessing module ids from NgModule types ([#24258](https://github.com/angular/angular/issues/24258)) ([bd02b27](https://github.com/angular/angular/commit/bd02b27))
|
||||
* **core:** KeyValueDiffer#diff allows null values ([#24319](https://github.com/angular/angular/issues/24319)) ([52ce9d5](https://github.com/angular/angular/commit/52ce9d5))
|
||||
* **core:** add support for ShadowDOM v1 ([#24718](https://github.com/angular/angular/issues/24718)) ([3553977](https://github.com/angular/angular/commit/3553977))
|
||||
* **core:** add support for using async/await with Jasmine ([#24637](https://github.com/angular/angular/issues/24637)) ([71100e6](https://github.com/angular/angular/commit/71100e6))
|
||||
* **core:** add support for ShadowDOM v1 ([#24718](https://github.com/angular/angular/issues/24718)) ([3553977](https://github.com/angular/angular/commit/3553977))
|
||||
* **core:** add support for using async/await with Jasmine ([#24637](https://github.com/angular/angular/issues/24637)) ([71100e6](https://github.com/angular/angular/commit/71100e6))
|
||||
(https://github.com/angular/angular/commit/328971f)), closes [#24616](https://github.com/angular/angular/issues/24616)
|
||||
* **platform-browser:** add HammerJS lazy-loader symbols to public API ([#23943](https://github.com/angular/angular/issues/23943)) ([26fbf1d](https://github.com/angular/angular/commit/26fbf1d))
|
||||
* **platform-browser:** allow lazy-loading HammerJS ([#23906](https://github.com/angular/angular/issues/23906)) ([313bdce](https://github.com/angular/angular/commit/313bdce))
|
||||
@ -247,7 +283,6 @@ To learn about the release highlights and our new CLI-powered update workflow fo
|
||||
* **animations:** only use the WA-polyfill alongside AnimationBuilder ([#22143](https://github.com/angular/angular/issues/22143)) ([b2f366b](https://github.com/angular/angular/commit/b2f366b)), closes [#17496](https://github.com/angular/angular/issues/17496)
|
||||
* **animations:** expose `element` and `params` within transition matchers ([#22693](https://github.com/angular/angular/issues/22693)) ([58b94e6](https://github.com/angular/angular/commit/58b94e6))
|
||||
* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
|
||||
* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
|
||||
* **common:** export functions to format numbers, percents, currencies & dates ([#22423](https://github.com/angular/angular/issues/22423)) ([4180912](https://github.com/angular/angular/commit/4180912)), closes [#20536](https://github.com/angular/angular/issues/20536)
|
||||
* **compiler:** lower @NgModule ids if needed ([#23031](https://github.com/angular/angular/issues/23031)) ([bd024c0](https://github.com/angular/angular/commit/bd024c0))
|
||||
* **compiler:** implement "enableIvy" compiler option ([#21427](https://github.com/angular/angular/issues/21427)) ([64d16de](https://github.com/angular/angular/commit/64d16de))
|
||||
@ -287,7 +322,6 @@ To learn about the release highlights and our new CLI-powered update workflow fo
|
||||
* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
|
||||
* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([f88fba0](https://github.com/angular/angular/commit/f88fba0)), closes [#19712](https://github.com/angular/angular/issues/19712)
|
||||
* **animations:** treat numeric state name values as strings ([#22923](https://github.com/angular/angular/issues/22923)) ([e5e1b0d](https://github.com/angular/angular/commit/e5e1b0d))
|
||||
* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
|
||||
* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([d2aa8ac](https://github.com/angular/angular/commit/d2aa8ac))
|
||||
* **common:** NgClass should properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([4a42669](https://github.com/angular/angular/commit/4a42669)), closes [#21932](https://github.com/angular/angular/issues/21932)
|
||||
* **common:** fix the titlecase pipe ([#22600](https://github.com/angular/angular/issues/22600)) ([7966744](https://github.com/angular/angular/commit/7966744))
|
||||
|
53
WORKSPACE
53
WORKSPACE
@ -6,9 +6,16 @@ workspace(name = "angular")
|
||||
|
||||
http_archive(
|
||||
name = "build_bazel_rules_nodejs",
|
||||
url = "https://github.com/bazelbuild/rules_nodejs/archive/0.10.1.zip",
|
||||
strip_prefix = "rules_nodejs-0.10.1",
|
||||
sha256 = "634206524d90dc03c52392fa3f19a16637d2bcf154910436fe1d669a0d9d7b9c",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.11.2.zip"],
|
||||
strip_prefix = "rules_nodejs-0.11.2",
|
||||
sha256 = "c00d5381adeefb56e0ef959a7b168cae628535dab933cfad1c2cd1870cd7c9de",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
name = "bazel_skylib",
|
||||
urls = ["https://github.com/bazelbuild/bazel-skylib/archive/0.3.1.zip"],
|
||||
strip_prefix = "bazel-skylib-0.3.1",
|
||||
sha256 = "95518adafc9a2b656667bbf517a952e54ce7f350779d0dd95133db4eb5c27fb1",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
@ -20,9 +27,9 @@ http_archive(
|
||||
|
||||
http_archive(
|
||||
name = "build_bazel_rules_typescript",
|
||||
url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.3.zip",
|
||||
strip_prefix = "rules_typescript-0.15.3",
|
||||
sha256 = "a2b26ac3fc13036011196063db1bf7f1eae81334449201dc28087ebfa3708c99",
|
||||
url = "https://github.com/bazelbuild/rules_typescript/archive/1d9a4b0087f307e31af91e2b221a6447288994c6.zip",
|
||||
strip_prefix = "rules_typescript-1d9a4b0087f307e31af91e2b221a6447288994c6",
|
||||
sha256 = "e17ac3f33d5d3cd2a0c385c4fd28b814d0ad46c6c67ccaef97160be99d7a24eb",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
@ -71,6 +78,22 @@ http_archive(
|
||||
sha256 = "8a517806d2b7c8505ba5c53934e7d7c70d341b68ffd268e9044d35b564a48828",
|
||||
)
|
||||
|
||||
#
|
||||
# Point Bazel to WORKSPACEs that live in subdirectories
|
||||
#
|
||||
|
||||
local_repository(
|
||||
name = "rxjs",
|
||||
path = "node_modules/rxjs/src",
|
||||
)
|
||||
|
||||
# Point to the integration test workspace just so that Bazel doesn't descend into it
|
||||
# when expanding the //... pattern
|
||||
local_repository(
|
||||
name = "bazel_integration_test",
|
||||
path = "integration/bazel",
|
||||
)
|
||||
|
||||
#
|
||||
# Load and install our dependencies downloaded above.
|
||||
#
|
||||
@ -100,26 +123,10 @@ load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
|
||||
|
||||
ts_setup_workspace()
|
||||
|
||||
load("//packages/bazel/src:ng_setup_workspace.bzl", "ng_setup_workspace")
|
||||
load("@angular//:index.bzl", "ng_setup_workspace")
|
||||
|
||||
ng_setup_workspace()
|
||||
|
||||
#
|
||||
# Point Bazel to WORKSPACEs that live in subdirectories
|
||||
#
|
||||
|
||||
local_repository(
|
||||
name = "rxjs",
|
||||
path = "node_modules/rxjs/src",
|
||||
)
|
||||
|
||||
# Point to the integration test workspace just so that Bazel doesn't descend into it
|
||||
# when expanding the //... pattern
|
||||
local_repository(
|
||||
name = "bazel_integration_test",
|
||||
path = "integration/bazel",
|
||||
)
|
||||
|
||||
#
|
||||
# Ask Bazel to manage these toolchain dependencies for us.
|
||||
# Bazel will run `yarn install` when one of these toolchains is requested during
|
||||
|
@ -43,6 +43,17 @@ Here are the most important tasks you might need to use:
|
||||
|
||||
* `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
|
||||
|
||||
## Developing on Windows
|
||||
The `packages/` directory may contain Linux-specific symlinks, which are not recognized by Windows.
|
||||
These unresolved links cause the docs generation process to fail because it cannot locate certain files.
|
||||
|
||||
> Hint: The following steps require administration rights or [Windows Developer Mode](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) enabled!
|
||||
|
||||
To fix this problem, run `scripts/windows/create-symlinks.sh`. This command creates temporary files where the symlinks used to be. Make sure not to commit those files with your documentation changes.
|
||||
When you are done making and testing your documentation changes, you can restore the original symlinks and delete the temporary files by running `scripts/windows/remove-symlinks.sh`.
|
||||
|
||||
It's necessary to remove the temporary files, because otherwise they're displayed as local changes in your git working copy and certain operations are blocked.
|
||||
|
||||
## Using ServiceWorker locally
|
||||
|
||||
Since abb36e3cb, running `yarn start --prod` will no longer set up the ServiceWorker, which
|
||||
|
@ -1,26 +1,38 @@
|
||||
import { ReflectiveInjector } from '@angular/core';
|
||||
import { Injector } from '@angular/core';
|
||||
|
||||
import { Car, Engine, Tires } from './car';
|
||||
import { Logger } from '../logger.service';
|
||||
|
||||
// #docregion injector
|
||||
export function useInjector() {
|
||||
let injector: ReflectiveInjector;
|
||||
let injector: Injector;
|
||||
// #enddocregion injector
|
||||
/*
|
||||
// #docregion injector-no-new
|
||||
// Cannot instantiate an ReflectiveInjector like this!
|
||||
let injector = new ReflectiveInjector([Car, Engine, Tires]);
|
||||
// Cannot instantiate an Injector like this!
|
||||
let injector = new Injector([
|
||||
{ provide: Car, deps: [Engine, Tires] },
|
||||
{ provide: Engine, deps: [] },
|
||||
{ provide: Tires, deps: [] }
|
||||
]);
|
||||
// #enddocregion injector-no-new
|
||||
*/
|
||||
// #docregion injector, injector-create-and-call
|
||||
injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
|
||||
injector = Injector.create({
|
||||
providers: [
|
||||
{ provide: Car, deps: [Engine, Tires] },
|
||||
{ provide: Engine, deps: [] },
|
||||
{ provide: Tires, deps: [] }
|
||||
]
|
||||
});
|
||||
// #docregion injector-call
|
||||
let car = injector.get(Car);
|
||||
// #enddocregion injector-call, injector-create-and-call
|
||||
car.description = 'Injector';
|
||||
|
||||
injector = ReflectiveInjector.resolveAndCreate([Logger]);
|
||||
injector = Injector.create({
|
||||
providers: [{ provide: Logger, deps: [] }]
|
||||
});
|
||||
let logger = injector.get(Logger);
|
||||
logger.log('Injector car.drive() said: ' + car.drive());
|
||||
return car;
|
||||
|
9
aio/content/examples/elements/stackblitz.json
Normal file
9
aio/content/examples/elements/stackblitz.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"description": "Angular Elements",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1].*"
|
||||
],
|
||||
"tags":["cookbook"]
|
||||
}
|
@ -1,15 +1,14 @@
|
||||
// #docplaster
|
||||
// #docregion app-module
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
// import the feature module here so you can add it to the imports array below
|
||||
import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
@ -17,7 +16,7 @@ import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
CustomerDashboardModule // add the feature module here
|
||||
],
|
||||
providers: [],
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
@ -13,7 +13,7 @@ import { AppComponent } from './app.component';
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
providers: [],
|
||||
|
@ -1,26 +1,21 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import {
|
||||
FlyingHeroesComponent,
|
||||
FlyingHeroesImpureComponent
|
||||
} from './flying-heroes.component';
|
||||
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
import { FetchJsonPipe } from './fetch-json.pipe';
|
||||
import { FlyingHeroesComponent, FlyingHeroesImpureComponent } from './flying-heroes.component';
|
||||
import { FlyingHeroesImpurePipe, FlyingHeroesPipe } from './flying-heroes.pipe';
|
||||
import { HeroAsyncMessageComponent } from './hero-async-message.component';
|
||||
import { HeroBirthdayComponent } from './hero-birthday1.component';
|
||||
import { HeroBirthday2Component } from './hero-birthday2.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { PowerBoosterComponent } from './power-booster.component';
|
||||
import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
|
||||
import {
|
||||
FlyingHeroesPipe,
|
||||
FlyingHeroesImpurePipe
|
||||
} from './flying-heroes.pipe';
|
||||
import { FetchJsonPipe } from './fetch-json.pipe';
|
||||
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
import { PowerBoosterComponent } from './power-booster.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@ -43,6 +38,6 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
||||
FetchJsonPipe,
|
||||
ExponentialStrengthPipe
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
@ -1,13 +1,14 @@
|
||||
// #docregion
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
// #docregion pipe-metadata
|
||||
@Pipe({
|
||||
name: 'fetch',
|
||||
pure: false
|
||||
})
|
||||
// #enddocregion pipe-metadata
|
||||
export class FetchJsonPipe implements PipeTransform {
|
||||
export class FetchJsonPipe implements PipeTransform {
|
||||
private cachedData: any = null;
|
||||
private cachedUrl = '';
|
||||
|
||||
@ -17,7 +18,7 @@ export class FetchJsonPipe implements PipeTransform {
|
||||
if (url !== this.cachedUrl) {
|
||||
this.cachedData = null;
|
||||
this.cachedUrl = url;
|
||||
this.http.get(url).subscribe( result => this.cachedData = result );
|
||||
this.http.get(url).subscribe(result => this.cachedData = result);
|
||||
}
|
||||
|
||||
return this.cachedData;
|
||||
|
@ -1,6 +1,6 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
// #docregion added-imports
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Location } from '@angular/common';
|
||||
@ -17,7 +17,7 @@ import { HeroService } from '../hero.service';
|
||||
styleUrls: [ './hero-detail.component.css' ]
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
@Input() hero: Hero;
|
||||
hero: Hero;
|
||||
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
@ -11,7 +11,7 @@ import { HeroService } from '../hero.service';
|
||||
styleUrls: [ './hero-detail.component.css' ]
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
@Input() hero: Hero;
|
||||
hero: Hero;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
|
@ -19,7 +19,7 @@ If you use the CLI to generate an app, the default `AppModule` is as follows:
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@ -31,7 +31,7 @@ import { AppComponent } from './app.component';
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpModule
|
||||
HttpClientModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
@ -138,7 +138,7 @@ It tells Angular about other NgModules that this particular module needs to func
|
||||
This list of modules are those that export components, directives, or pipes
|
||||
that the component templates in this module reference. In this case, the component is
|
||||
`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
|
||||
`FormsModule`, or `HttpModule`.
|
||||
`FormsModule`, or `HttpClientModule`.
|
||||
A component template can reference another component, directive,
|
||||
or pipe when the referenced class is declared in this module or
|
||||
the class was imported from another module.
|
||||
|
@ -44,6 +44,9 @@ is available to <code>declarations</code> of this module.</p>
|
||||
<td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td><code><b>entryComponents:</b> [SomeComponent, OtherComponent]</code></td>
|
||||
<td><p>List of components not referenced in any reachable template, for example dynamically created from code.</p></td>
|
||||
</tr><tr>
|
||||
<td><code><b>bootstrap:</b> [MyAppComponent]</code></td>
|
||||
<td><p>List of components to bootstrap when this module is bootstrapped.</p>
|
||||
</td>
|
||||
|
@ -89,47 +89,51 @@ promise.then(() => {
|
||||
The following code snippets illustrate how the same kind of operation is defined using observables and promises.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Operation</th>
|
||||
<th>Observable</th>
|
||||
<th>Promise</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Creation</td>
|
||||
<td>
|
||||
<pre>new Observable((observer) => {
|
||||
observer.next(123);
|
||||
});</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>new Promise((resolve, reject) => {
|
||||
resolve(123);
|
||||
});</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Transform</td>
|
||||
<td><pre>obs.map((value) => value * 2 );</pre></td>
|
||||
<td><pre>promise.then((value) => value * 2);</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subscribe</td>
|
||||
<td>
|
||||
<pre>sub = obs.subscribe((value) => {
|
||||
console.log(value)
|
||||
});</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>promise.then((value) => {
|
||||
console.log(value);
|
||||
});</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unsubscribe</td>
|
||||
<td><pre>sub.unsubscribe();</pre></td>
|
||||
<td>Implied by promise resolution.</td>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Operation</th>
|
||||
<th>Observable</th>
|
||||
<th>Promise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Creation</td>
|
||||
<td>
|
||||
<pre>new Observable((observer) => {
|
||||
observer.next(123);
|
||||
});</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>new Promise((resolve, reject) => {
|
||||
resolve(123);
|
||||
});</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Transform</td>
|
||||
<td><pre>obs.map((value) => value * 2 );</pre></td>
|
||||
<td><pre>promise.then((value) => value * 2);</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Subscribe</td>
|
||||
<td>
|
||||
<pre>sub = obs.subscribe((value) => {
|
||||
console.log(value)
|
||||
});</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>promise.then((value) => {
|
||||
console.log(value);
|
||||
});</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unsubscribe</td>
|
||||
<td><pre>sub.unsubscribe();</pre></td>
|
||||
<td>Implied by promise resolution.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Observables compared to events API
|
||||
|
@ -410,7 +410,7 @@ Here you see the new and the old implementation side-by-side:
|
||||
|
||||
Tree shaking is the ability to remove code that is not referenced in an application from the final bundle. Tree-shakable providers give Angular the ability to remove services that are not used in your application from the final output. This significantly reduces the size of your bundles.
|
||||
|
||||
Ideally, if an application is not injecting a service, it should not be included in the final output. However, it turns out that the Angular compiler cannot identify at build time if the service will be required or not. Because it's always possible to inject a service directly using `injector.get(Service)`, Angular cannot identify all of the places in your code where this injection could happen, so it has no choice but to include the service in the injector regardless. Thus, services provided in modules are not tree-shakeable.
|
||||
Ideally, if an application is not injecting a service, it should not be included in the final output. However, it turns out that the Angular compiler cannot identify at build time if the service will be required or not. Because it's always possible to inject a service directly using `injector.get(Service)`, Angular cannot identify all of the places in your code where this injection could happen, so it has no choice but to include the service in the injector regardless. Thus, services provided in modules are not tree-shakable.
|
||||
|
||||
Let us consider an example of non-tree-shakable providers in Angular.
|
||||
|
||||
@ -424,13 +424,13 @@ This module can then be imported into your application module, to make the servi
|
||||
|
||||
When `ngc` runs, it compiles AppModule into a module factory, which contains definitions for all the providers declared in all the modules it includes. At runtime, this factory becomes an injector that instantiates these services.
|
||||
|
||||
Tree-shaking doesn't work in the method above because Angular cannot decide to exclude one chunk of code (the provider definition for the service within the module factory) based on whether another chunk of code (the service class) is used. To make services tree-shakeable, the information about how to construct an instance of the service (the provider definition) needs to be a part of the service class itself.
|
||||
Tree-shaking doesn't work in the method above because Angular cannot decide to exclude one chunk of code (the provider definition for the service within the module factory) based on whether another chunk of code (the service class) is used. To make services tree-shakable, the information about how to construct an instance of the service (the provider definition) needs to be a part of the service class itself.
|
||||
|
||||
#### Creating tree-shakable providers
|
||||
|
||||
To create providers that are tree-shakable, the information that used to be specified in the module should be specified in the `@Injectable` decorator on the service itself.
|
||||
|
||||
The following example shows the tree-shakeable equivalent to the `ServiceModule` example above:
|
||||
The following example shows the tree-shakable equivalent to the `ServiceModule` example above:
|
||||
|
||||
<code-example path="dependency-injection/src/app/tree-shaking/service.ts" title="src/app/tree-shaking/service.ts" linenums="false"> </code-example>
|
||||
|
||||
@ -690,9 +690,9 @@ If the factory function needs access to other DI tokens, it can use the inject f
|
||||
|
||||
<code-example>
|
||||
const TOKEN =
|
||||
new InjectionToken('tree-shakeable token',
|
||||
new InjectionToken('tree-shakable token',
|
||||
{ providedIn: 'root', factory: () =>
|
||||
new AppConfig(inject(Parameter1), inject(Paremeter2)), });
|
||||
new AppConfig(inject(Parameter1), inject(Parameter2)), });
|
||||
</code-example>
|
||||
|
||||
{@a optional}
|
||||
|
@ -3,25 +3,25 @@
|
||||
_Angular elements_ are Angular components packaged as _custom elements_, a web standard for defining new HTML elements in a framework-agnostic way.
|
||||
|
||||
[Custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) are a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills (see [Browser Support](#browser-support)).
|
||||
A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.
|
||||
A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.
|
||||
The browser maintains a `CustomElementRegistry` of defined custom elements (also called Web Components), which maps an instantiable JavaScript class to an HTML tag.
|
||||
|
||||
The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
|
||||
The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API.
|
||||
|
||||
Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser.
|
||||
Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents.
|
||||
Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser.
|
||||
Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
We are working on custom elements that can be used by web apps built on other frameworks.
|
||||
A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality.
|
||||
We are working on custom elements that can be used by web apps built on other frameworks.
|
||||
A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality.
|
||||
For more about the direction of development, check out this [video presentation](https://www.youtube.com/watch?v=Z1gLFPLVJjY&t=4s).
|
||||
|
||||
</div>
|
||||
|
||||
## Using custom elements
|
||||
|
||||
Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.
|
||||
Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.
|
||||
|
||||
- <b>Easy dynamic content in an Angular app</b>
|
||||
|
||||
@ -33,14 +33,14 @@ Custom elements bootstrap themselves - they start automatically when they are ad
|
||||
|
||||
### How it works
|
||||
|
||||
Use the `createCustomElement()` function to convert a component into a class that can be registered with the browser as a custom element.
|
||||
After you register your configured class with the browser's custom-element registry, you can use the new element just like a built-in HTML element in content that you add directly into the DOM:
|
||||
Use the `createCustomElement()` function to convert a component into a class that can be registered with the browser as a custom element.
|
||||
After you register your configured class with the browser's custom-element registry, you can use the new element just like a built-in HTML element in content that you add directly into the DOM:
|
||||
|
||||
```
|
||||
<my-popup message="Use Angular!"></my-popup>
|
||||
```
|
||||
|
||||
When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM. The content is provided by the component's template, which uses Angular template syntax, and is rendered using the component and DOM data. Input properties in the component correspond to input attributes for the element.
|
||||
When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM. The content is provided by the component's template, which uses Angular template syntax, and is rendered using the component and DOM data. Input properties in the component correspond to input attributes for the element.
|
||||
|
||||
<figure>
|
||||
|
||||
@ -52,25 +52,25 @@ When your custom element is placed on a page, the browser creates an instance of
|
||||
|
||||
## Transforming components to custom elements
|
||||
|
||||
Angular provides the `createCustomElement()` function for converting an Angular component,
|
||||
together with its dependencies, to a custom element. The function collects the component's
|
||||
observable properties, along with the Angular functionality the browser needs to
|
||||
create and destroy instances, and to detect and respond to changes.
|
||||
Angular provides the `createCustomElement()` function for converting an Angular component,
|
||||
together with its dependencies, to a custom element. The function collects the component's
|
||||
observable properties, along with the Angular functionality the browser needs to
|
||||
create and destroy instances, and to detect and respond to changes.
|
||||
|
||||
The conversion process implements the `NgElementConstructor` interface, and creates a
|
||||
constructor class that is configured to produce a self-bootstrapping instance of your component.
|
||||
The conversion process implements the `NgElementConstructor` interface, and creates a
|
||||
constructor class that is configured to produce a self-bootstrapping instance of your component.
|
||||
|
||||
Use a JavaScript function, `customElements.define()`, to register the configured constructor
|
||||
and its associated custom-element tag with the browser's `CustomElementRegistry`.
|
||||
Use a JavaScript function, `customElements.define()`, to register the configured constructor
|
||||
and its associated custom-element tag with the browser's `CustomElementRegistry`.
|
||||
When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/elements/createElement.png" alt="Transform a component to a custom element" class="left">
|
||||
<img src="generated/images/guide/elements/createElement.png" alt="Transform a component to a custom element" class="left">
|
||||
|
||||
</figure>
|
||||
|
||||
### Mapping
|
||||
### Mapping
|
||||
|
||||
A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs. Component properties and logic maps directly into HTML attributes and the browser's event system.
|
||||
|
||||
@ -80,13 +80,13 @@ A custom element _hosts_ an Angular component, providing a bridge between the da
|
||||
|
||||
|
||||
For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).
|
||||
|
||||
|
||||
|
||||
{@a browser-support}
|
||||
|
||||
## Browser support for custom elements
|
||||
|
||||
The recently-developed [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) Web Platform feature is currently supported natively in a number of browsers. Support is pending or planned in other browsers.
|
||||
The recently-developed [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) Web Platform feature is currently supported natively in a number of browsers. Support is pending or planned in other browsers.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
@ -111,7 +111,7 @@ The recently-developed [custom elements](https://developer.mozilla.org/en-US/doc
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Edge</td>
|
||||
<td>Working on an implementation. <br>
|
||||
<td>Working on an implementation. <br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
@ -120,7 +120,7 @@ The recently-developed [custom elements](https://developer.mozilla.org/en-US/doc
|
||||
In browsers that support Custom Elements natively, the specification requires developers use ES2015 classes to define Custom Elements - developers can opt-in to this by setting the `target: "es2015"` property in their project's `tsconfig.json`. As Custom Element and ES2015 support may not be available in all browsers, developers can instead choose to use a polyfill to support older browsers and ES5 code.
|
||||
|
||||
Use the [Angular CLI](https://cli.angular.io/) to automatically set up your project with the correct polyfill: `ng add @angular/elements --name=*your_project_name*`.
|
||||
- For more information about polyfills, see [polyfill documentation](https://www.webcomponents.org/polyfills).
|
||||
- For more information about polyfills, see [polyfill documentation](https://www.webcomponents.org/polyfills).
|
||||
|
||||
- For more information about Angular browser support, see [Browser Support](guide/browser-support).
|
||||
|
||||
@ -131,12 +131,12 @@ Previously, when you wanted to add a component to an app at runtime, you had to
|
||||
|
||||
Using an Angular custom element makes the process much simpler and more transparent, by providing all of the infrastructure and framework automatically—all you have to do is define the kind of event handling you want. (You do still have to exclude the component from compilation, if you are not going to use it in your app.)
|
||||
|
||||
The Popup Service example app defines a component that you can either load dynamically or convert to a custom element.
|
||||
The Popup Service example app (shown below) defines a component that you can either load dynamically or convert to a custom element.
|
||||
|
||||
- `popup.component.ts` defines a simple pop-up element that displays an input message, with some animation and styling.
|
||||
- `popup.component.ts` defines a simple pop-up element that displays an input message, with some animation and styling.
|
||||
- `popup.service.ts` creates an injectable service that provides two different ways to invoke the PopupComponent; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.
|
||||
- `app.module.ts` adds the PopupComponent in the module's `entryComponents` list, to exclude it from compilation and avoid startup warnings or errors.
|
||||
- `app.component.ts` defines the app's root component, which uses the PopupService to add the pop-up to the DOM at run time. When the app runs, the root component's constructor converts PopupComponent to a custom element.
|
||||
- `app.component.ts` defines the app's root component, which uses the PopupService to add the pop-up to the DOM at run time. When the app runs, the root component's constructor converts PopupComponent to a custom element.
|
||||
|
||||
For comparison, the demo shows both methods. One button adds the popup using the dynamic-loading method, and the other uses the custom element. You can see that the result is the same; only the preparation is different.
|
||||
|
||||
@ -158,3 +158,59 @@ For comparison, the demo shows both methods. One button adds the popup using the
|
||||
|
||||
</code-pane>
|
||||
</code-tabs>
|
||||
|
||||
<!--
|
||||
StackBlitz transpiles code to ES5. The live example will not work without a polyfill.
|
||||
Only offer a `.zip` to download for now.
|
||||
-->
|
||||
You can download the full code for the example <live-example downloadOnly>here</live-example>.
|
||||
|
||||
|
||||
## Typings for custom elements
|
||||
|
||||
Generic DOM APIs, such as `document.createElement()` or `document.querySelector()`, return an element type that is appropriate for the specified arguments. For example, calling `document.createElement('a')` will return an `HTMLAnchorElement`, which TypeScript knows has an `href` property. Similarly, `document.createElement('div')` will return an `HTMLDivElement`, which TypeScript knows has no `href` property.
|
||||
|
||||
When called with unknown elements, such as a custom element name (`popup-element` in our example), the methods will return a generic type, such as `HTMLELement`, since TypeScript can't infer the correct type of the returned element.
|
||||
|
||||
Custom elements created with Angular extend `NgElement` (which in turn extends `HTMLElement`). Additionally, these custom elements will have a property for each input of the corresponding component. For example, our `popup-element` will have a `message` property of type `string`.
|
||||
|
||||
There are a few options if you want to get correct types for your custom elements. Let's assume you create a `my-dialog` custom element based on the following component:
|
||||
|
||||
```ts
|
||||
@Component(...)
|
||||
class MyDialog {
|
||||
@Input() content: string;
|
||||
}
|
||||
```
|
||||
|
||||
The most straight forward way to get accurate typings is to cast the return value of the relevant DOM methods to the correct type. For that, you can use the `NgElement` and `WithProperties` types (both exported from `@angular/elements`):
|
||||
|
||||
```ts
|
||||
const aDialog = document.createElement('my-dialog') as NgElement & WithProperties<{content: string}>;
|
||||
aDialog.content = 'Hello, world!';
|
||||
aDialog.content = 123; // <-- ERROR: TypeScript knows this should be a string.
|
||||
aDialog.body = 'News'; // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
|
||||
```
|
||||
|
||||
This is a good way to quickly get TypeScript features, such as type checking and autocomplete support, for you custom element. But it can get cumbersome if you need it in several places, because you have to cast the return type on every occurrence.
|
||||
|
||||
An alternative way, that only requires defining each custom element's type once, is augmenting the `HTMLELementTagNameMap`, which TypeScript uses to infer the type of a returned element based on its tag name (for DOM methods such as `document.createElement()`, `document.querySelector()`, etc.):
|
||||
|
||||
```ts
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'my-dialog': NgElement & WithProperties<{content: string}>;
|
||||
'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now, TypeScript can infer the correct type the same way it does for built-in elements:
|
||||
|
||||
```ts
|
||||
document.createElement('div') //--> HTMLDivElement (built-in element)
|
||||
document.querySelector('foo') //--> Element (unknown element)
|
||||
document.createElement('my-dialog') //--> NgElement & WithProperties<{content: string}> (custom element)
|
||||
document.querySelector('my-other-element') //--> NgElement & WithProperties<{foo: 'bar'}> (custom element)
|
||||
```
|
||||
|
@ -36,7 +36,7 @@ The following is an example of specifying a bootstrapped component,
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
providers: [],
|
||||
|
@ -73,11 +73,11 @@ Typically you don’t interact with the compiler directly; rather, you use it in
|
||||
|
||||
**@angular/forms**: support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms).
|
||||
|
||||
**@angular/http**: Angular's old, soon-to-be-deprecated, HTTP client.
|
||||
**@angular/http**: Angular's old, deprecated, HTTP client.
|
||||
|
||||
**@angular/platform-browser**: Everything DOM and browser related, especially
|
||||
the pieces that help render into the DOM.
|
||||
This package also includes the `bootstrapStatic()` method
|
||||
This package also includes the `bootstrapModuleFactory()` method
|
||||
for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler).
|
||||
|
||||
**@angular/platform-browser-dynamic**: Includes [Providers](api/core/Provider)
|
||||
|
@ -13,7 +13,7 @@ The sample application and all tests in this guide are available for inspection
|
||||
|
||||
## Setup
|
||||
|
||||
The Angular CLI downloads and install everything you need to test an Angular application with the [Jasmine test framework](http://jasmine.github.io/2.4/introduction.html).
|
||||
The Angular CLI downloads and install everything you need to test an Angular application with the [Jasmine test framework](https://jasmine.github.io/).
|
||||
|
||||
The project you create with the CLI is immediately ready to test.
|
||||
Just run this one CLI command:
|
||||
@ -920,7 +920,7 @@ so it is safe to call `TestBed.get()` as follows:
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For a use case in which `TestBed.get()` does not work,
|
||||
see the section [_Override a component's providers_](#component-override), which
|
||||
see the [_Override component providers_](#component-override) section that
|
||||
explains when and why you must get the service from the component's injector instead.
|
||||
|
||||
</div>
|
||||
|
BIN
aio/content/images/bios/kevinyang.jpg
Normal file
BIN
aio/content/images/bios/kevinyang.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
@ -653,5 +653,15 @@
|
||||
"twitter": "elanathellama",
|
||||
"bio": "Elana is a Developer Relations intern on the Angular team at Google. She is working on migration paths from AngularJS to Angular and would love to chat about your experience with upgrading.",
|
||||
"group": "Angular"
|
||||
},
|
||||
|
||||
"kevinyang": {
|
||||
"name": "Kevin Yang",
|
||||
"picture": "kevinyang.jpg",
|
||||
"twitter": "chgc",
|
||||
"website": "https://blog.kevinyang.net/",
|
||||
"bio":
|
||||
"Kevin is a Angular Taiwan, Angular Girls Taiwan community organzier. He loves sharing knowledge with other developers through blogging, speaking, workshops.",
|
||||
"group": "GDE"
|
||||
}
|
||||
}
|
||||
|
@ -13,12 +13,6 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ReactiveConf -->
|
||||
<tr>
|
||||
<th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>
|
||||
<td>Bratislava, Slovakia</td>
|
||||
<td>October 25, 2017</td>
|
||||
</tr>
|
||||
<!-- AngularConnect-->
|
||||
<tr>
|
||||
<th><a href="http://angularconnect.com" title="AngularConnect">AngularConnect</a></th>
|
||||
@ -61,6 +55,12 @@
|
||||
<td>Melbourne, Australia</td>
|
||||
<td>Jun 22, 2018</td>
|
||||
</tr>
|
||||
<!-- ReactiveConf -->
|
||||
<tr>
|
||||
<th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>
|
||||
<td>Bratislava, Slovakia</td>
|
||||
<td>October 29-31, 2018</td>
|
||||
</tr>
|
||||
<!-- AngularConnect-->
|
||||
<tr>
|
||||
<th><a href="http://angularconnect.com" title="AngularConnect">AngularConnect</a></th>
|
||||
|
@ -16,6 +16,12 @@
|
||||
"rev": true,
|
||||
"title": "Angular Conferences and Angular Camps in Moscow, Russia.",
|
||||
"url": "https://angular-ru.github.io/"
|
||||
},
|
||||
"made-with-angular": {
|
||||
"desc": "A showcase of web apps built with Angular.",
|
||||
"rev": true,
|
||||
"title": "Made with Angular",
|
||||
"url": "https://www.madewithangular.com/"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -181,7 +187,7 @@
|
||||
"rev": true,
|
||||
"title": "Amexio Canvas Web Based Drag and Drop IDE by MetaMagic",
|
||||
"url": "https://amexio.tech/"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"Tooling": {
|
||||
@ -260,6 +266,13 @@
|
||||
"title": "Nx",
|
||||
"logo": "https://nrwl.io/assets/nx-logo.png",
|
||||
"url": "https://nrwl.io/nx"
|
||||
},
|
||||
"uijar": {
|
||||
"desc": "A drop in module to automatically create a living style guide based on the test you write for your components.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "UI-jar - Test Driven Style Guide Development",
|
||||
"url": "https://github.com/ui-jar/ui-jar"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -317,7 +330,7 @@
|
||||
"url": "http://www.primefaces.org/primeng/"
|
||||
},
|
||||
"a3b": {
|
||||
"desc": "One of the first major UI frameworks to support Angular",
|
||||
"desc": "A professional grade library of Angular UI components written in TypeScript that includes our Data Grid, TreeView, Charts, Editors, DropDowns, DatePickers, and many more. Features include support for AOT compilation, Tree Shaking for high-performance, localization, and accessibility.",
|
||||
"logo": "",
|
||||
"rev": true,
|
||||
"title": "Kendo UI",
|
||||
@ -421,8 +434,8 @@
|
||||
"-KLIzGEp8Mh5W-FkiQnL": {
|
||||
"desc": "Your quick, no-nonsense guide to building real-world apps with Angular",
|
||||
"rev": true,
|
||||
"title": "Learning Angular",
|
||||
"url": "https://www.packtpub.com/web-development/learning-angular-2"
|
||||
"title": "Learning Angular - Second Edition",
|
||||
"url": "https://www.packtpub.com/web-development/learning-angular-second-edition"
|
||||
},
|
||||
"3ab": {
|
||||
"desc": "More than 15 books from O'Reilly about Angular",
|
||||
@ -629,6 +642,12 @@
|
||||
"rev": true,
|
||||
"title": "AngularFirebase.com",
|
||||
"url": "https://angularfirebase.com/"
|
||||
},
|
||||
"loiane-angulartraining": {
|
||||
"desc": "Free Angular course in Portuguese.",
|
||||
"rev": true,
|
||||
"title": "Loiane Training (Português)",
|
||||
"url": "https://loiane.training/course/angular/"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -736,6 +755,12 @@
|
||||
"rev": true,
|
||||
"title": "Angular.Schule (German)",
|
||||
"url": "https://angular.schule/"
|
||||
},
|
||||
"strbrw": {
|
||||
"desc": "Angular and RxJS trainings, Code Reviews and consultancy. We help software engineers all over the world to create better web-applications...",
|
||||
"rev": true,
|
||||
"title": "StrongBrew",
|
||||
"url": "https://strongbrew.io/"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -89,15 +89,8 @@ Registering the provider in the `@Injectable` metadata also allows Angular to op
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
If you need to, you can register providers at different levels:
|
||||
in the `HeroesComponent`, in the `AppComponent`, in the `AppModule`.
|
||||
For instance, you could have told the CLI to provide the service at the module level automatically by appending `--module=app`.
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate service hero --module=app
|
||||
</code-example>
|
||||
|
||||
To learn more about providers and injectors, see the [Dependency Injection guide](guide/dependency-injection).
|
||||
To learn more about providers, see the [Providers section](guide/providers).
|
||||
To learn more about injectors, see the [Dependency Injection guide](guide/dependency-injection).
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -250,7 +250,7 @@ There are three significant differences from `getHeroes()`.
|
||||
|
||||
## Update heroes
|
||||
|
||||
Editing a hero's name in the _hero detail_ view.
|
||||
Edit a hero's name in the _hero detail_ view.
|
||||
As you type, the hero name updates the heading at the top of the page.
|
||||
But when you click the "go back button", the changes are lost.
|
||||
|
||||
@ -291,11 +291,11 @@ That header is in the `httpOptions` constant defined in the `HeroService`.
|
||||
|
||||
<code-example
|
||||
path="toh-pt6/src/app/hero.service.ts"
|
||||
region="http-options">
|
||||
region="http-options"
|
||||
title="src/app/hero.service.ts">
|
||||
</code-example>
|
||||
|
||||
Refresh the browser, change a hero name, save your change,
|
||||
and click the "go back" button.
|
||||
Refresh the browser, change a hero name and save your change. Navigating to the previous view is implemented in the `save()` method defined in `HeroDetailComponent`.
|
||||
The hero now appears in the list with the changed name.
|
||||
|
||||
## Add a new hero
|
||||
@ -440,7 +440,7 @@ Create a `HeroSearchComponent` with the CLI.
|
||||
ng generate component hero-search
|
||||
</code-example>
|
||||
|
||||
The CLI generates the three `HeroSearchComponent` and adds the component to the `AppModule' declarations
|
||||
The CLI generates the three `HeroSearchComponent` files and adds the component to the `AppModule` declarations
|
||||
|
||||
Replace the generated `HeroSearchComponent` _template_ with a text box and a list of matching search results like this.
|
||||
|
||||
|
@ -7,14 +7,15 @@
|
||||
<mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
|
||||
<mat-toolbar-row class="notification-container">
|
||||
<aio-notification
|
||||
icon="insert_comment"
|
||||
iconLabel="Announcement"
|
||||
buttonText="Learn More"
|
||||
actionUrl="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4"
|
||||
notificationId="angular-v6-announcement"
|
||||
expirationDate="2018-07-01"
|
||||
[dismissOnContentClick]="true"
|
||||
(dismissed)="notificationDismissed()">
|
||||
Version 6 of Angular Now Available!
|
||||
<a href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4">
|
||||
<mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
|
||||
<span class="message">Version 6 of Angular Now Available!</span>
|
||||
<span class="action-button">Learn More</span>
|
||||
</a>
|
||||
</aio-notification>
|
||||
</mat-toolbar-row>
|
||||
<mat-toolbar-row>
|
||||
|
@ -115,7 +115,6 @@ describe('ApiListComponent', () => {
|
||||
|
||||
component.filteredSections.subscribe(filtered => {
|
||||
filtered = filtered.filter(s => s.items);
|
||||
console.log(filtered);
|
||||
expect(filtered.length).toBe(1, 'sections');
|
||||
expect(filtered[0].name).toBe(section, 'section name');
|
||||
const items = filtered[0].items!;
|
||||
|
@ -1,8 +1,6 @@
|
||||
<a href="{{actionUrl}}" class="content" (click)="dismiss()">
|
||||
<mat-icon class="icon" [svgIcon]="icon" [attr.aria-label]="iconLabel"></mat-icon>
|
||||
<span class="message"><ng-content></ng-content></span>
|
||||
<span class="action-button">{{buttonText}}</span>
|
||||
</a>
|
||||
<span class="content" (click)="contentClick()">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
|
||||
<button mat-icon-button class="close-button" aria-label="Close" (click)="dismiss()">
|
||||
<mat-icon svgIcon="close" aria-label="Dismiss notification"></mat-icon>
|
||||
|
@ -30,37 +30,49 @@ describe('NotificationComponent', () => {
|
||||
fixture.detectChanges();
|
||||
}
|
||||
|
||||
it('should display the message', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
expect(fixture.nativeElement.innerHTML).toContain('Help Angular by taking a <strong>1 minute survey</strong>!');
|
||||
describe('content projection', () => {
|
||||
it('should display the message text', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
expect(fixture.nativeElement.innerHTML).toContain('Version 6 of Angular Now Available!');
|
||||
});
|
||||
|
||||
it('should render HTML elements', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
const button = fixture.debugElement.query(By.css('.action-button'));
|
||||
expect(button.nativeElement.textContent).toEqual('Learn More');
|
||||
});
|
||||
|
||||
it('should process Angular directives', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
const badSpans = fixture.debugElement.queryAll(By.css('.bad'));
|
||||
expect(badSpans.length).toEqual(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('should display an icon', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
const iconElement = fixture.debugElement.query(By.css('.icon'));
|
||||
expect(iconElement.properties['svgIcon']).toEqual('insert_comment');
|
||||
expect(iconElement.attributes['aria-label']).toEqual('Survey');
|
||||
});
|
||||
|
||||
it('should display a button', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
const button = fixture.debugElement.query(By.css('.action-button'));
|
||||
expect(button.nativeElement.textContent).toEqual('Go to survey');
|
||||
});
|
||||
|
||||
it('should call dismiss when the message link is clicked', () => {
|
||||
it('should call dismiss() when the message link is clicked, if dismissOnContentClick is true', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
spyOn(component, 'dismiss');
|
||||
fixture.debugElement.query(By.css('a')).triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
component.dismissOnContentClick = true;
|
||||
const message: HTMLSpanElement = fixture.debugElement.query(By.css('.messageholder')).nativeElement;
|
||||
message.click();
|
||||
expect(component.dismiss).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call dismiss when the close button is clicked', () => {
|
||||
it('should not call dismiss() when the message link is clicked, if dismissOnContentClick is false', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
spyOn(component, 'dismiss');
|
||||
component.dismissOnContentClick = false;
|
||||
const message: HTMLSpanElement = fixture.debugElement.query(By.css('.messageholder')).nativeElement;
|
||||
message.click();
|
||||
expect(component.dismiss).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call dismiss() when the close button is clicked', () => {
|
||||
configTestingModule();
|
||||
createComponent();
|
||||
spyOn(component, 'dismiss');
|
||||
@ -104,13 +116,15 @@ describe('NotificationComponent', () => {
|
||||
@Component({
|
||||
template: `
|
||||
<aio-notification
|
||||
icon="insert_comment"
|
||||
iconLabel="Survey"
|
||||
buttonText="Go to survey"
|
||||
actionUrl="https://bit.ly/angular-survey-2018"
|
||||
notificationId="survey-january-2018"
|
||||
expirationDate="2018-01-22">
|
||||
Help Angular by taking a <strong>1 minute survey</strong>!
|
||||
<span class="messageholder">
|
||||
<a href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4">
|
||||
<span *ngIf="false" class="bad">This should not appear</span>
|
||||
<span class="message">Version 6 of Angular Now Available!</span>
|
||||
<span class="action-button">Learn More</span>
|
||||
</a>
|
||||
</span>
|
||||
</aio-notification>`
|
||||
})
|
||||
class TestComponent {
|
||||
|
@ -22,10 +22,7 @@ const LOCAL_STORAGE_NAMESPACE = 'aio-notification/';
|
||||
export class NotificationComponent implements OnInit {
|
||||
private get localStorage() { return this.window.localStorage; }
|
||||
|
||||
@Input() icon: string;
|
||||
@Input() iconLabel: string;
|
||||
@Input() buttonText: string;
|
||||
@Input() actionUrl: string;
|
||||
@Input() dismissOnContentClick: boolean;
|
||||
@Input() notificationId: string;
|
||||
@Input() expirationDate: string;
|
||||
@Output() dismissed = new EventEmitter();
|
||||
@ -44,6 +41,12 @@ export class NotificationComponent implements OnInit {
|
||||
this.showNotification = previouslyHidden || expired ? 'hide' : 'show';
|
||||
}
|
||||
|
||||
contentClick() {
|
||||
if (this.dismissOnContentClick) {
|
||||
this.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
this.localStorage.setItem(LOCAL_STORAGE_NAMESPACE + this.notificationId, 'hide');
|
||||
this.showNotification = 'hide';
|
||||
|
@ -74,6 +74,13 @@ describe('GaService', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('sendEvent', () => {
|
||||
it('should send "event" with associated data', () => {
|
||||
gaService.sendEvent('some source', 'some campaign', 'a label', 45);
|
||||
expect(gaSpy).toHaveBeenCalledWith('send', 'event', 'some source', 'some campaign', 'a label', 45);
|
||||
});
|
||||
});
|
||||
|
||||
it('should support replacing the `window.ga` function', () => {
|
||||
const gaSpy2 = jasmine.createSpy('new ga');
|
||||
mockWindow.ga = gaSpy2;
|
||||
|
@ -29,6 +29,10 @@ export class GaService {
|
||||
this.ga('send', 'pageview');
|
||||
}
|
||||
|
||||
sendEvent(source: string, action: string, label?: string, value?: number) {
|
||||
this.ga('send', 'event', source, action, label, value);
|
||||
}
|
||||
|
||||
ga(...args: any[]) {
|
||||
const gaFn = (this.window as any)['ga'];
|
||||
if (gaFn) {
|
||||
|
@ -64,18 +64,22 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
|
||||
margin: $hamburgerShownMargin;
|
||||
padding: 0;
|
||||
|
||||
&:not(.starting) {
|
||||
transition-duration: 0.4s;
|
||||
transition-property: color, margin;
|
||||
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
// Hamburger hidden by default on large screens.
|
||||
// (Will be shown per doc.)
|
||||
margin: $hamburgerHiddenMargin;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
min-width: 15%;
|
||||
}
|
||||
|
||||
&:not(.starting) {
|
||||
transition-duration: 0.4s;
|
||||
transition-property: color, margin;
|
||||
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
}
|
||||
@ -92,6 +96,10 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
|
||||
margin: 0 16px 0 0;
|
||||
padding: 21px 0;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
margin-top: -21px;
|
||||
@ -194,12 +202,17 @@ aio-search-box.search-container {
|
||||
.toolbar-external-icons-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 16px;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
@ -31,11 +31,14 @@ aio-notification {
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
max-width: calc(100% - #{$notificationHeight});
|
||||
text-transform: none;
|
||||
padding: 0;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
@media (max-width: 464px) {
|
||||
@ -46,10 +49,10 @@ aio-notification {
|
||||
.message {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-left: 10px;
|
||||
background: $brightred;
|
||||
border-radius: 15px;
|
||||
text-transform: uppercase;
|
||||
|
@ -0,0 +1,21 @@
|
||||
{
|
||||
"scripts": [
|
||||
{ "name": "ng", "command": "ng" },
|
||||
{ "name": "build", "command": "ng build" },
|
||||
{ "name": "start", "command": "ng serve" },
|
||||
{ "name": "test", "command": "ng test" },
|
||||
{ "name": "lint", "command": "ng lint" },
|
||||
{ "name": "e2e", "command": "ng e2e" }
|
||||
],
|
||||
"dependencies": [
|
||||
"@angular/elements"
|
||||
],
|
||||
"devDependencies": [
|
||||
"@angular-devkit/build-angular",
|
||||
"@angular/cli",
|
||||
"@types/jasminewd2",
|
||||
"jasmine-spec-reporter",
|
||||
"karma-coverage-istanbul-reporter",
|
||||
"ts-node"
|
||||
]
|
||||
}
|
@ -68,7 +68,7 @@ function runE2e() {
|
||||
// that they should run under. Then run each app/spec collection sequentially.
|
||||
function findAndRunE2eTests(filter, outputFile, shard) {
|
||||
|
||||
const shardParts = shard ? shard.split('/') : [0,1];
|
||||
const shardParts = shard ? shard.split('/') : [0, 1];
|
||||
const shardModulo = parseInt(shardParts[0], 10);
|
||||
const shardDivider = parseInt(shardParts[1], 10);
|
||||
|
||||
@ -82,11 +82,17 @@ function findAndRunE2eTests(filter, outputFile, shard) {
|
||||
const status = { passed: [], failed: [] };
|
||||
return getE2eSpecs(EXAMPLES_PATH, filter)
|
||||
.then(e2eSpecPaths => {
|
||||
console.log('All e2e specs:');
|
||||
logSpecs(e2eSpecPaths);
|
||||
|
||||
Object.keys(e2eSpecPaths).forEach(key => {
|
||||
const value = e2eSpecPaths[key];
|
||||
e2eSpecPaths[key] = value.filter((p, index) => index % shardDivider === shardModulo);
|
||||
});
|
||||
|
||||
console.log(`E2e specs for shard ${shardParts.join('/')}:`);
|
||||
logSpecs(e2eSpecPaths);
|
||||
|
||||
return e2eSpecPaths.systemjs.reduce((promise, specPath) => {
|
||||
return promise.then(() => {
|
||||
const examplePath = path.dirname(specPath);
|
||||
@ -313,4 +319,16 @@ function loadExampleConfig(exampleFolder) {
|
||||
return config;
|
||||
}
|
||||
|
||||
// Log the specs (for debugging purposes).
|
||||
// `e2eSpecPaths` is of type: `{[type: string]: string[]}`
|
||||
// (where `type` is `systemjs`, `cli, etc.)
|
||||
function logSpecs(e2eSpecPaths) {
|
||||
Object.keys(e2eSpecPaths).forEach(type => {
|
||||
const paths = e2eSpecPaths[type];
|
||||
|
||||
console.log(` ${type.toUpperCase()}:`);
|
||||
console.log(paths.map(p => ` ${p}`).join('\n'));
|
||||
});
|
||||
}
|
||||
|
||||
runE2e();
|
||||
|
@ -153,7 +153,7 @@ Note that Bazel has a `--stamp` argument to `bazel build`, but this has no effec
|
||||
Bazel supports fetching action results from a cache, allowing a clean build to pick up artifacts from prior builds.
|
||||
This makes builds incremental, even on CI.
|
||||
It works because Bazel assigns a content-based hash to all action inputs, which is used as the cache key for the action outputs.
|
||||
Thanks the the hermeticity property, we can skip executing an action if the inputs hash is already present in the cache.
|
||||
Thanks to the hermeticity property, we can skip executing an action if the inputs hash is already present in the cache.
|
||||
|
||||
Of course, non-hermeticity in an action can cause problems.
|
||||
At worst, you can fetch a broken artifact from the cache, making your build non-reproducible.
|
||||
|
26
index.bzl
Normal file
26
index.bzl
Normal file
@ -0,0 +1,26 @@
|
||||
# Copyright Google Inc. All Rights Reserved.
|
||||
#
|
||||
# Use of this source code is governed by an MIT-style license that can be
|
||||
# found in the LICENSE file at https://angular.io/license
|
||||
""" Public API surface is re-exported here.
|
||||
|
||||
This API is exported for users building angular from source in downstream
|
||||
projects. The rules from packages/bazel are re-exported here as well
|
||||
as the ng_setup_workspace repository rule needed when building angular
|
||||
from source downstream. Alternately, this API is available from the
|
||||
@angular/bazel npm package if the npm distribution of angular is
|
||||
used in a downstream project.
|
||||
"""
|
||||
|
||||
load("//packages/bazel:index.bzl",
|
||||
_ng_module = "ng_module",
|
||||
_ng_package = "ng_package",
|
||||
_protractor_web_test = "protractor_web_test",
|
||||
_protractor_web_test_suite = "protractor_web_test_suite")
|
||||
load("//tools:ng_setup_workspace.bzl", _ng_setup_workspace = "ng_setup_workspace")
|
||||
|
||||
ng_module = _ng_module
|
||||
ng_package = _ng_package
|
||||
protractor_web_test = _protractor_web_test
|
||||
protractor_web_test_suite = _protractor_web_test_suite
|
||||
ng_setup_workspace = _ng_setup_workspace
|
@ -6,9 +6,16 @@ workspace(name = "bazel_integration_test")
|
||||
|
||||
http_archive(
|
||||
name = "build_bazel_rules_nodejs",
|
||||
url = "https://github.com/bazelbuild/rules_nodejs/archive/0.10.1.zip",
|
||||
strip_prefix = "rules_nodejs-0.10.1",
|
||||
sha256 = "634206524d90dc03c52392fa3f19a16637d2bcf154910436fe1d669a0d9d7b9c",
|
||||
urls = ["https://github.com/bazelbuild/rules_nodejs/archive/0.11.2.zip"],
|
||||
strip_prefix = "rules_nodejs-0.11.2",
|
||||
sha256 = "c00d5381adeefb56e0ef959a7b168cae628535dab933cfad1c2cd1870cd7c9de",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
name = "bazel_skylib",
|
||||
urls = ["https://github.com/bazelbuild/bazel-skylib/archive/0.3.1.zip"],
|
||||
strip_prefix = "bazel-skylib-0.3.1",
|
||||
sha256 = "95518adafc9a2b656667bbf517a952e54ce7f350779d0dd95133db4eb5c27fb1",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
@ -20,9 +27,9 @@ http_archive(
|
||||
|
||||
http_archive(
|
||||
name = "build_bazel_rules_typescript",
|
||||
url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.0.zip",
|
||||
strip_prefix = "rules_typescript-0.15.0",
|
||||
sha256 = "1aa75917330b820cb239b3c10a936a10f0a46fe215063d4492dd76dc6e1616f4",
|
||||
url = "https://github.com/bazelbuild/rules_typescript/archive/1d9a4b0087f307e31af91e2b221a6447288994c6.zip",
|
||||
strip_prefix = "rules_typescript-1d9a4b0087f307e31af91e2b221a6447288994c6",
|
||||
sha256 = "e17ac3f33d5d3cd2a0c385c4fd28b814d0ad46c6c67ccaef97160be99d7a24eb",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
@ -38,6 +45,20 @@ http_archive(
|
||||
sha256 = "b243c4d64f054c174051785862ab079050d90b37a1cef7da93821c6981cb9ad4",
|
||||
)
|
||||
|
||||
#
|
||||
# Point Bazel to WORKSPACEs that live in subdirectories
|
||||
#
|
||||
|
||||
local_repository(
|
||||
name = "angular",
|
||||
path = "node_modules/@angular/bazel",
|
||||
)
|
||||
|
||||
local_repository(
|
||||
name = "rxjs",
|
||||
path = "node_modules/rxjs/src",
|
||||
)
|
||||
|
||||
#
|
||||
# Load and install our dependencies downloaded above.
|
||||
#
|
||||
@ -68,24 +89,6 @@ load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
|
||||
|
||||
sass_repositories()
|
||||
|
||||
#
|
||||
# Point Bazel to WORKSPACEs that live in subdirectories
|
||||
#
|
||||
|
||||
local_repository(
|
||||
name = "angular",
|
||||
path = "node_modules/@angular/bazel",
|
||||
)
|
||||
|
||||
local_repository(
|
||||
name = "rxjs",
|
||||
path = "node_modules/rxjs/src",
|
||||
)
|
||||
|
||||
#
|
||||
# Load and install our dependencies from local repositories
|
||||
#
|
||||
|
||||
load("@angular//:index.bzl", "ng_setup_workspace")
|
||||
|
||||
ng_setup_workspace()
|
||||
|
@ -32,6 +32,7 @@ ts_library(
|
||||
name = "test_lib",
|
||||
testonly = 1,
|
||||
srcs = glob(["*.spec.ts"]),
|
||||
tsconfig = "//src:tsconfig.json",
|
||||
deps = [":hello-world"],
|
||||
)
|
||||
|
||||
|
@ -5,6 +5,7 @@ ts_library(
|
||||
name = "e2e",
|
||||
testonly = 1,
|
||||
srcs = ["app.spec.ts"],
|
||||
tsconfig = ":tsconfig.json",
|
||||
)
|
||||
|
||||
ts_library(
|
||||
|
@ -3,47 +3,50 @@
|
||||
|
||||
|
||||
"@angular/animations@file:../../dist/packages-dist/animations":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
"@angular/bazel@file:../../dist/packages-dist/bazel":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
"@bazel/typescript" "^0.15.0"
|
||||
"@types/node" "6.0.84"
|
||||
protobufjs "5.0.0"
|
||||
|
||||
"@angular/common@file:../../dist/packages-dist/common":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
"@angular/compiler-cli@file:../../dist/packages-dist/compiler-cli":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
chokidar "^1.4.2"
|
||||
convert-source-map "^1.5.1"
|
||||
magic-string "^0.25.0"
|
||||
minimist "^1.2.0"
|
||||
reflect-metadata "^0.1.2"
|
||||
tsickle "^0.30.0"
|
||||
source-map "^0.6.1"
|
||||
tsickle "^0.32.1"
|
||||
|
||||
"@angular/compiler@file:../../dist/packages-dist/compiler":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
"@angular/core@file:../../dist/packages-dist/core":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
"@angular/platform-browser-dynamic@file:../../dist/packages-dist/platform-browser-dynamic":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
"@angular/platform-browser@file:../../dist/packages-dist/platform-browser":
|
||||
version "6.1.0-beta.3"
|
||||
version "6.1.0"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
@ -316,6 +319,10 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
|
||||
|
||||
convert-source-map@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
|
||||
|
||||
core-util-is@1.0.2, core-util-is@~1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
|
||||
@ -826,6 +833,12 @@ long@~3:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
|
||||
|
||||
magic-string@^0.25.0:
|
||||
version "0.25.0"
|
||||
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.0.tgz#1f3696f9931ff0a1ed4c132250529e19cad6759b"
|
||||
dependencies:
|
||||
sourcemap-codec "^1.4.1"
|
||||
|
||||
math-random@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
|
||||
@ -1305,10 +1318,14 @@ source-map@^0.5.6:
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
|
||||
source-map@^0.6.0:
|
||||
source-map@^0.6.0, source-map@^0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
|
||||
sourcemap-codec@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.1.tgz#c8fd92d91889e902a07aee392bdd2c5863958ba2"
|
||||
|
||||
sshpk@^1.7.0:
|
||||
version "1.14.2"
|
||||
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
|
||||
@ -1393,9 +1410,9 @@ tough-cookie@~2.3.3:
|
||||
dependencies:
|
||||
punycode "^1.4.1"
|
||||
|
||||
tsickle@^0.30.0:
|
||||
version "0.30.0"
|
||||
resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.30.0.tgz#7941146ae92933854a8742fa1047606c4536649b"
|
||||
tsickle@^0.32.1:
|
||||
version "0.32.1"
|
||||
resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.32.1.tgz#f16e94ba80b32fc9ebe320dc94fbc2ca7f3521a5"
|
||||
dependencies:
|
||||
jasmine-diff "^0.1.3"
|
||||
minimist "^1.2.0"
|
||||
|
@ -10,7 +10,7 @@
|
||||
"@angular/core": "file:../../dist/packages-dist/core",
|
||||
"@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
|
||||
"@angular/platform-server": "file:../../dist/packages-dist/platform-server",
|
||||
"google-closure-compiler": "20180319.0.0",
|
||||
"google-closure-compiler": "20180716.0.0",
|
||||
"rxjs": "file:../../node_modules/rxjs",
|
||||
"typescript": "file:../../node_modules/typescript",
|
||||
"zone.js": "file:../../node_modules/zone.js"
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -31,6 +31,8 @@ module.exports = function(config) {
|
||||
// Serve AngularJS for `ngUpgrade` testing.
|
||||
{pattern: 'node_modules/angular-1.5/angular.js', included: false, watched: false},
|
||||
{pattern: 'node_modules/angular-mocks-1.5/angular-mocks.js', included: false, watched: false},
|
||||
{pattern: 'node_modules/angular-1.6/angular.js', included: false, watched: false},
|
||||
{pattern: 'node_modules/angular-mocks-1.6/angular-mocks.js', included: false, watched: false},
|
||||
{pattern: 'node_modules/angular/angular.js', included: false, watched: false},
|
||||
{pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false, watched: false},
|
||||
|
||||
@ -82,7 +84,7 @@ module.exports = function(config) {
|
||||
'dist/all/@angular/elements/schematics/**',
|
||||
'dist/all/@angular/examples/**/e2e_test/*',
|
||||
'dist/all/@angular/language-service/**',
|
||||
'dist/all/@angular/router/test/**',
|
||||
'dist/all/@angular/router/**/test/**',
|
||||
'dist/all/@angular/platform-browser/testing/e2e_util.js',
|
||||
'dist/all/angular1_router.js',
|
||||
'dist/examples/**/e2e_test/**',
|
||||
@ -110,6 +112,7 @@ module.exports = function(config) {
|
||||
// don't need this entire config file.
|
||||
proxies: {
|
||||
'/base/angular/': '/base/',
|
||||
'/base/angular_deps/': '/base/',
|
||||
},
|
||||
|
||||
reporters: ['dots'],
|
||||
|
@ -29,7 +29,7 @@ describe('largeform benchmark perf', () => {
|
||||
|
||||
[CreateAndDestroyWorker].forEach((worker) => {
|
||||
describe(worker.id, () => {
|
||||
it('should run for ng2', (done) => {
|
||||
it('should run for ng2', done => {
|
||||
runLargeFormBenchmark({
|
||||
id: `largeform.ng2.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largeform/ng2/index.html',
|
||||
|
@ -40,7 +40,7 @@ describe('largetable benchmark perf', () => {
|
||||
|
||||
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
|
||||
describe(worker.id, () => {
|
||||
it('should run for ng2', (done) => {
|
||||
it('should run for ng2', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.ng2.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/ng2/index.html',
|
||||
@ -48,7 +48,7 @@ describe('largetable benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for ng2 with ngSwitch', (done) => {
|
||||
it('should run for ng2 with ngSwitch', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.ng2_switch.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/ng2_switch/index.html',
|
||||
@ -56,7 +56,7 @@ describe('largetable benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for render3', (done) => {
|
||||
it('should run for render3', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.render3.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/render3/index.html',
|
||||
@ -65,7 +65,7 @@ describe('largetable benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for iv', (done) => {
|
||||
it('should run for iv', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.iv.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/iv/index.html',
|
||||
@ -74,7 +74,7 @@ describe('largetable benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for the baseline', (done) => {
|
||||
it('should run for the baseline', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.baseline.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/baseline/index.html',
|
||||
@ -83,7 +83,7 @@ describe('largetable benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should run for incremental-dom', (done) => {
|
||||
it('should run for incremental-dom', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.incremental_dom.${worker.id}`,
|
||||
url: 'all/benchmarks/src/largetable/incremental_dom/index.html',
|
||||
|
@ -24,7 +24,7 @@ describe('tree benchmark perf', () => {
|
||||
Benchmarks.forEach(benchmark => {
|
||||
describe(benchmark.id, () => {
|
||||
// This is actually a destroyOnly benchmark
|
||||
it('should work for createOnly', (done) => {
|
||||
it('should work for createOnly', done => {
|
||||
runTreeBenchmark({
|
||||
id: 'createOnly',
|
||||
benchmark,
|
||||
@ -33,7 +33,7 @@ describe('tree benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should work for createOnlyForReal', (done) => {
|
||||
it('should work for createOnlyForReal', done => {
|
||||
runTreeBenchmark({
|
||||
id: 'createOnlyForReal',
|
||||
benchmark,
|
||||
@ -42,7 +42,7 @@ describe('tree benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should work for createDestroy', (done) => {
|
||||
it('should work for createDestroy', done => {
|
||||
runTreeBenchmark({
|
||||
id: 'createDestroy',
|
||||
benchmark,
|
||||
@ -53,13 +53,13 @@ describe('tree benchmark perf', () => {
|
||||
}).then(done, done.fail);
|
||||
});
|
||||
|
||||
it('should work for update', (done) => {
|
||||
it('should work for update', done => {
|
||||
runTreeBenchmark({id: 'update', benchmark, work: () => $(CreateBtn).click()})
|
||||
.then(done, done.fail);
|
||||
});
|
||||
|
||||
if (benchmark.buttons.indexOf(DetectChangesBtn) !== -1) {
|
||||
it('should work for detectChanges', (done) => {
|
||||
it('should work for detectChanges', done => {
|
||||
runTreeBenchmark({
|
||||
id: 'detectChanges',
|
||||
benchmark,
|
||||
|
@ -41,7 +41,7 @@ describe('largetable benchmark perf', () => {
|
||||
|
||||
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
|
||||
describe(worker.id, () => {
|
||||
it('should run for render3', (done) => {
|
||||
it('should run for render3', done => {
|
||||
runTableBenchmark({
|
||||
id: `largeTable.render3.${worker.id}`,
|
||||
url: 'index.html',
|
||||
|
10
modules/types.d.ts
vendored
10
modules/types.d.ts
vendored
@ -8,11 +8,11 @@
|
||||
|
||||
// This file contains all ambient imports needed to compile the modules/ source code
|
||||
|
||||
/// <reference path="../node_modules/@types/hammerjs/index.d.ts" />
|
||||
/// <reference path="../node_modules/@types/jasmine/index.d.ts" />
|
||||
/// <reference path="../node_modules/@types/jasminewd2/index.d.ts" />
|
||||
/// <reference path="../node_modules/@types/node/index.d.ts" />
|
||||
/// <reference path="../node_modules/zone.js/dist/zone.js.d.ts" />
|
||||
/// <reference types="hammerjs" />
|
||||
/// <reference types="jasmine" />
|
||||
/// <reference types="jasminewd2" />
|
||||
/// <reference types="node" />
|
||||
/// <reference types="zone.js" />
|
||||
/// <reference path="../tools/types-ext/jasminewd2.d.ts" />
|
||||
/// <reference path="./es6-subset.d.ts" />
|
||||
/// <reference path="./system.d.ts" />
|
||||
|
19
package.json
19
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "angular-srcs",
|
||||
"version": "6.1.0",
|
||||
"version": "7.0.0-beta.1",
|
||||
"private": true,
|
||||
"branchPattern": "2.0.*",
|
||||
"description": "Angular - a web framework for modern web apps",
|
||||
@ -21,7 +21,9 @@
|
||||
"prebuildifier": "bazel build --noshow_progress @com_github_bazelbuild_buildtools//buildifier",
|
||||
"buildifier": "find . -type f \\( -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs $(bazel info bazel-bin)/external/com_github_bazelbuild_buildtools/buildifier/*/buildifier",
|
||||
"preinstall": "node tools/yarn/check-yarn.js",
|
||||
"postinstall": "yarn update-webdriver && node ./tools/postinstall-patches.js",
|
||||
"postinstall": "yarn update-webdriver && node ./tools/postinstall-patches.js && yarn patch-types",
|
||||
"//patch-types": "work-around for issue https://github.com/angular/angular/issues/25051",
|
||||
"patch-types": "node -e \"var sh = require('shelljs'); sh.set('-e'); sh.mkdir('-p', 'node_modules/@types/zone.js'); sh.cp('-f', 'node_modules/zone.js/dist/zone.js.d.ts', 'node_modules/@types/zone.js/index.d.ts')\"",
|
||||
"update-webdriver": "webdriver-manager update --gecko false $CHROMEDRIVER_VERSION_ARG",
|
||||
"check-env": "gulp check-env",
|
||||
"commitmsg": "node ./scripts/git/commit-msg.js"
|
||||
@ -44,22 +46,26 @@
|
||||
"@types/base64-js": "1.2.5",
|
||||
"@types/chai": "^4.1.2",
|
||||
"@types/chokidar": "1.7.3",
|
||||
"@types/convert-source-map": "^1.5.1",
|
||||
"@types/diff": "^3.2.2",
|
||||
"@types/fs-extra": "4.0.2",
|
||||
"@types/hammerjs": "2.0.35",
|
||||
"@types/jasmine": "^2.8.8",
|
||||
"@types/jasminewd2": "^2.0.3",
|
||||
"@types/minimist": "^1.2.0",
|
||||
"@types/mock-fs": "^3.6.30",
|
||||
"@types/node": "6.0.88",
|
||||
"@types/selenium-webdriver": "3.0.7",
|
||||
"@types/shelljs": "^0.7.8",
|
||||
"@types/source-map": "^0.5.1",
|
||||
"@types/systemjs": "0.19.32",
|
||||
"@webcomponents/custom-elements": "^1.0.4",
|
||||
"angular": "npm:angular@1.6",
|
||||
"angular": "npm:angular@1.7",
|
||||
"angular-1.5": "npm:angular@1.5",
|
||||
"angular-mocks": "npm:angular-mocks@1.6",
|
||||
"angular-1.6": "npm:angular@1.6",
|
||||
"angular-mocks": "npm:angular-mocks@1.7",
|
||||
"angular-mocks-1.5": "npm:angular-mocks@1.5",
|
||||
"angular-mocks-1.6": "npm:angular-mocks@1.6",
|
||||
"base64-js": "1.2.1",
|
||||
"bower": "1.8.2",
|
||||
"browserstacktunnel-wrapper": "2.0.1",
|
||||
@ -70,6 +76,7 @@
|
||||
"cldr-data-downloader": "0.3.2",
|
||||
"cldrjs": "0.5.0",
|
||||
"conventional-changelog": "1.1.0",
|
||||
"convert-source-map": "^1.5.1",
|
||||
"cors": "2.8.4",
|
||||
"diff": "^3.5.0",
|
||||
"domino": "2.0.1",
|
||||
@ -95,7 +102,9 @@
|
||||
"karma-sauce-launcher": "^1.2.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"madge": "0.5.0",
|
||||
"magic-string": "^0.25.0",
|
||||
"minimist": "1.2.0",
|
||||
"mock-fs": "^4.5.0",
|
||||
"mutation-observer": "^1.0.3",
|
||||
"node-uuid": "1.4.8",
|
||||
"protobufjs": "5.0.0",
|
||||
@ -108,7 +117,7 @@
|
||||
"selenium-webdriver": "3.5.0",
|
||||
"semver": "5.4.1",
|
||||
"shelljs": "^0.8.1",
|
||||
"source-map": "0.5.7",
|
||||
"source-map": "^0.6.1",
|
||||
"source-map-support": "0.4.18",
|
||||
"systemjs": "0.18.10",
|
||||
"tsickle": "0.32",
|
||||
|
@ -26,7 +26,7 @@ export interface AnimationPlayer {
|
||||
finish(): void;
|
||||
destroy(): void;
|
||||
reset(): void;
|
||||
setPosition(p: any /** TODO #9100 */): void;
|
||||
setPosition(position: any /** TODO #9100 */): void;
|
||||
getPosition(): number;
|
||||
parentPlayer: AnimationPlayer|null;
|
||||
readonly totalTime: number;
|
||||
@ -93,7 +93,7 @@ export class NoopAnimationPlayer implements AnimationPlayer {
|
||||
}
|
||||
}
|
||||
reset(): void {}
|
||||
setPosition(p: number): void {}
|
||||
setPosition(position: number): void {}
|
||||
getPosition(): number { return 0; }
|
||||
|
||||
/** @internal */
|
||||
|
@ -14,7 +14,7 @@ load(":rules_typescript.bzl",
|
||||
"ts_providers_dict_to_struct",
|
||||
)
|
||||
|
||||
def _compile_strategy(ctx):
|
||||
def compile_strategy(ctx):
|
||||
"""Detect which strategy should be used to implement ng_module.
|
||||
|
||||
Depending on the value of the 'compile' define flag or the '_global_mode' attribute, ng_module
|
||||
@ -50,7 +50,7 @@ def _compiler_name(ctx):
|
||||
the name of the current compiler to be displayed in build output
|
||||
"""
|
||||
|
||||
strategy = _compile_strategy(ctx)
|
||||
strategy = compile_strategy(ctx)
|
||||
if strategy == 'legacy':
|
||||
return 'ngc'
|
||||
elif strategy == 'global':
|
||||
@ -72,7 +72,7 @@ def _enable_ivy_value(ctx):
|
||||
the value of enableIvy that needs to be set in angularCompilerOptions in the generated tsconfig
|
||||
"""
|
||||
|
||||
strategy = _compile_strategy(ctx)
|
||||
strategy = compile_strategy(ctx)
|
||||
if strategy == 'legacy':
|
||||
return False
|
||||
elif strategy == 'global':
|
||||
@ -95,7 +95,7 @@ def _include_ng_files(ctx):
|
||||
factory files), false otherwise
|
||||
"""
|
||||
|
||||
strategy = _compile_strategy(ctx)
|
||||
strategy = compile_strategy(ctx)
|
||||
return strategy == 'legacy' or strategy == 'global'
|
||||
|
||||
def _basename_of(ctx, file):
|
||||
|
@ -30,7 +30,7 @@ nodejs_binary(
|
||||
name = "ngc-wrapped",
|
||||
data = [
|
||||
":ngc_lib",
|
||||
"@build_bazel_rules_typescript//internal:worker_protocol.proto",
|
||||
"@build_bazel_rules_typescript//third_party/github.com/bazelbuild/bazel/src/main/protobuf:worker_protocol.proto",
|
||||
],
|
||||
entry_point = "angular/packages/bazel/src/ngc-wrapped/index.js",
|
||||
visibility = ["//visibility:public"],
|
||||
|
@ -76,7 +76,8 @@ export function runOneBuild(args: string[], inputs?: {[path: string]: string}):
|
||||
export function relativeToRootDirs(filePath: string, rootDirs: string[]): string {
|
||||
if (!filePath) return filePath;
|
||||
// NB: the rootDirs should have been sorted longest-first
|
||||
for (const dir of rootDirs || []) {
|
||||
for (let i = 0; i < rootDirs.length; i++) {
|
||||
const dir = rootDirs[i];
|
||||
const rel = path.posix.relative(dir, filePath);
|
||||
if (rel.indexOf('.') != 0) return rel;
|
||||
}
|
||||
@ -106,7 +107,9 @@ export function compile({allowNonHermeticReads, allDepsCompiledWithBazel = true,
|
||||
fileLoader = new CachedFileLoader(fileCache, allowNonHermeticReads);
|
||||
// Resolve the inputs to absolute paths to match TypeScript internals
|
||||
const resolvedInputs: {[path: string]: string} = {};
|
||||
for (const key of Object.keys(inputs)) {
|
||||
const inputKeys = Object.keys(inputs);
|
||||
for (let i = 0; i < inputKeys.length; i++) {
|
||||
const key = inputKeys[i];
|
||||
resolvedInputs[resolveNormalizedPath(key)] = inputs[key];
|
||||
}
|
||||
fileCache.updateCache(resolvedInputs);
|
||||
@ -207,6 +210,12 @@ export function compile({allowNonHermeticReads, allDepsCompiledWithBazel = true,
|
||||
if (fileName ===
|
||||
path.join(compilerOpts.baseUrl, bazelOpts.package, compilerOpts.flatModuleOutFile + '.ts'))
|
||||
return true;
|
||||
// Also handle the case when angular is built from source as an external repository
|
||||
if (fileName ===
|
||||
path.join(
|
||||
compilerOpts.baseUrl, 'external/angular', bazelOpts.package,
|
||||
compilerOpts.flatModuleOutFile + '.ts'))
|
||||
return true;
|
||||
return origBazelHostShouldNameModule(fileName) || NGC_GEN_FILES.test(fileName);
|
||||
};
|
||||
|
||||
@ -300,8 +309,8 @@ export function compile({allowNonHermeticReads, allDepsCompiledWithBazel = true,
|
||||
fs.writeFileSync(bazelOpts.tsickleExternsPath, externs);
|
||||
}
|
||||
|
||||
for (const missing of writtenExpectedOuts) {
|
||||
originalWriteFile(missing, '', false);
|
||||
for (let i = 0; i < writtenExpectedOuts.length; i++) {
|
||||
originalWriteFile(writtenExpectedOuts[i], '', false);
|
||||
}
|
||||
|
||||
return {program, diagnostics};
|
||||
@ -317,7 +326,8 @@ function generateMetadataJson(
|
||||
program: ts.Program, files: string[], rootDirs: string[], bazelBin: string,
|
||||
tsHost: ts.CompilerHost) {
|
||||
const collector = new ng.MetadataCollector();
|
||||
for (const file of files) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const sourceFile = program.getSourceFile(file);
|
||||
if (sourceFile) {
|
||||
const metadata = collector.getMetadata(sourceFile);
|
||||
@ -347,7 +357,9 @@ function gatherDiagnosticsForInputsOnly(
|
||||
// program.getDeclarationDiagnostics() it somehow corrupts the emit.
|
||||
diagnostics.push(...tsProgram.getOptionsDiagnostics());
|
||||
diagnostics.push(...tsProgram.getGlobalDiagnostics());
|
||||
for (const sf of tsProgram.getSourceFiles().filter(f => isCompilationTarget(bazelOpts, f))) {
|
||||
const programFiles = tsProgram.getSourceFiles().filter(f => isCompilationTarget(bazelOpts, f));
|
||||
for (let i = 0; i < programFiles.length; i++) {
|
||||
const sf = programFiles[i];
|
||||
// Note: We only get the diagnostics for individual files
|
||||
// to e.g. not check libraries.
|
||||
diagnostics.push(...tsProgram.getSyntacticDiagnostics(sf));
|
||||
|
@ -30,6 +30,6 @@ jasmine_node_test(
|
||||
":angular_core",
|
||||
"//packages/bazel/test/ngc-wrapped/empty:empty_tsconfig.json",
|
||||
"//packages/bazel/test/ngc-wrapped/empty:tsconfig.json",
|
||||
"@build_bazel_rules_typescript//internal:worker_protocol.proto",
|
||||
"@build_bazel_rules_typescript//third_party/github.com/bazelbuild/bazel/src/main/protobuf:worker_protocol.proto",
|
||||
],
|
||||
)
|
||||
|
@ -70,7 +70,7 @@ export function createTsConfig(options: TsConfigOptions) {
|
||||
'tsickleExternsPath': '',
|
||||
// we don't copy the node_modules into our tmp dir, so we should look in
|
||||
// the original workspace directory for it
|
||||
'nodeModulesPrefix': '../angular/node_modules',
|
||||
'nodeModulesPrefix': '../angular/external/angular_deps/node_modules',
|
||||
},
|
||||
'files': options.files,
|
||||
'angularCompilerOptions': {
|
||||
|
@ -6,6 +6,7 @@ load("//tools/http-server:http_server.bzl", "http_server")
|
||||
ts_library(
|
||||
name = "app",
|
||||
srcs = ["app.ts"],
|
||||
tsconfig = ":tsconfig.json",
|
||||
)
|
||||
|
||||
ts_devserver(
|
||||
@ -33,6 +34,7 @@ ts_library(
|
||||
name = "ts_spec",
|
||||
testonly = True,
|
||||
srcs = ["test.spec.ts"],
|
||||
tsconfig = ":tsconfig.json",
|
||||
)
|
||||
|
||||
protractor_web_test_suite(
|
||||
@ -49,6 +51,6 @@ protractor_web_test_suite(
|
||||
configuration = ":conf.js",
|
||||
data = ["//packages/bazel/src/protractor/utils"],
|
||||
on_prepare = ":on-prepare.js",
|
||||
server = ":prodserver",
|
||||
server = ":devserver",
|
||||
deps = [":ts_spec"],
|
||||
)
|
||||
|
@ -1,5 +1,5 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["es2015"]
|
||||
"lib": ["dom", "es2015"]
|
||||
}
|
||||
}
|
||||
|
@ -5,6 +5,7 @@ ts_library(
|
||||
name = "ts_spec",
|
||||
testonly = True,
|
||||
srcs = ["test.spec.ts"],
|
||||
tsconfig = ":tsconfig.json",
|
||||
)
|
||||
|
||||
ts_library(
|
||||
|
@ -28,13 +28,13 @@ export interface HttpParameterCodec {
|
||||
*
|
||||
*/
|
||||
export class HttpUrlEncodingCodec implements HttpParameterCodec {
|
||||
encodeKey(k: string): string { return standardEncoding(k); }
|
||||
encodeKey(key: string): string { return standardEncoding(key); }
|
||||
|
||||
encodeValue(v: string): string { return standardEncoding(v); }
|
||||
encodeValue(value: string): string { return standardEncoding(value); }
|
||||
|
||||
decodeKey(k: string): string { return decodeURIComponent(k); }
|
||||
decodeKey(key: string): string { return decodeURIComponent(key); }
|
||||
|
||||
decodeValue(v: string) { return decodeURIComponent(v); }
|
||||
decodeValue(value: string) { return decodeURIComponent(value); }
|
||||
}
|
||||
|
||||
|
||||
|
@ -6,15 +6,14 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {HttpHandler} from '../src/backend';
|
||||
import {HttpHeaders} from '../src/headers';
|
||||
import {HttpRequest} from '../src/request';
|
||||
import {HttpXsrfCookieExtractor, HttpXsrfInterceptor} from '../src/xsrf';
|
||||
import {HttpXsrfCookieExtractor, HttpXsrfInterceptor, HttpXsrfTokenExtractor} from '../src/xsrf';
|
||||
|
||||
import {HttpClientTestingBackend} from '../testing/src/backend';
|
||||
|
||||
class SampleTokenExtractor {
|
||||
constructor(private token: string|null) {}
|
||||
class SampleTokenExtractor extends HttpXsrfTokenExtractor {
|
||||
constructor(private token: string|null) { super(); }
|
||||
|
||||
getToken(): string|null { return this.token; }
|
||||
}
|
||||
|
@ -51,22 +51,22 @@ export class NgClass implements DoCheck {
|
||||
private _ngEl: ElementRef, private _renderer: Renderer2) {}
|
||||
|
||||
@Input('class')
|
||||
set klass(v: string) {
|
||||
set klass(value: string) {
|
||||
this._removeClasses(this._initialClasses);
|
||||
this._initialClasses = typeof v === 'string' ? v.split(/\s+/) : [];
|
||||
this._initialClasses = typeof value === 'string' ? value.split(/\s+/) : [];
|
||||
this._applyClasses(this._initialClasses);
|
||||
this._applyClasses(this._rawClass);
|
||||
}
|
||||
|
||||
@Input()
|
||||
set ngClass(v: string|string[]|Set<string>|{[klass: string]: any}) {
|
||||
set ngClass(value: string|string[]|Set<string>|{[klass: string]: any}) {
|
||||
this._removeClasses(this._rawClass);
|
||||
this._applyClasses(this._initialClasses);
|
||||
|
||||
this._iterableDiffer = null;
|
||||
this._keyValueDiffer = null;
|
||||
|
||||
this._rawClass = typeof v === 'string' ? v.split(/\s+/) : v;
|
||||
this._rawClass = typeof value === 'string' ? value.split(/\s+/) : value;
|
||||
|
||||
if (this._rawClass) {
|
||||
if (isListLikeIterable(this._rawClass)) {
|
||||
|
@ -16,6 +16,8 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgMo
|
||||
* `NgComponentOutlet` requires a component type, if a falsy value is set the view will clear and
|
||||
* any existing component will get destroyed.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Fine tune control
|
||||
*
|
||||
* You can control the component creation process by using the following optional attributes:
|
||||
@ -50,7 +52,8 @@ import {ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, NgMo
|
||||
* ngModuleFactory: moduleFactory;">
|
||||
* </ng-container>
|
||||
* ```
|
||||
* ## Example
|
||||
*
|
||||
* ### A simple example
|
||||
*
|
||||
* {@example common/ngComponentOutlet/ts/module.ts region='SimpleExample'}
|
||||
*
|
||||
|
@ -27,6 +27,8 @@ export class NgForOfContext<T> {
|
||||
* for each instantiated template inherits from the outer context with the given loop variable
|
||||
* set to the current item from the iterable.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Local Variables
|
||||
*
|
||||
* `NgForOf` provides several exported values that can be aliased to local variables:
|
||||
|
@ -17,13 +17,16 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri
|
||||
* - `then` template is the inline template of `ngIf` unless bound to a different value.
|
||||
* - `else` template is blank unless it is bound.
|
||||
*
|
||||
* ## Most common usage
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Most common usage
|
||||
*
|
||||
* The most common usage of the `ngIf` directive is to conditionally show the inline template as
|
||||
* seen in this example:
|
||||
* {@example common/ngIf/ts/module.ts region='NgIfSimple'}
|
||||
*
|
||||
* ## Showing an alternative template using `else`
|
||||
* ### Showing an alternative template using `else`
|
||||
*
|
||||
* If it is necessary to display a template when the `expression` is falsy use the `else` template
|
||||
* binding as shown. Note that the `else` binding points to a `<ng-template>` labeled `#elseBlock`.
|
||||
@ -32,7 +35,7 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri
|
||||
*
|
||||
* {@example common/ngIf/ts/module.ts region='NgIfElse'}
|
||||
*
|
||||
* ## Using non-inlined `then` template
|
||||
* ### Using non-inlined `then` template
|
||||
*
|
||||
* Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using
|
||||
* a binding (just like `else`). Because `then` and `else` are bindings, the template references can
|
||||
@ -40,7 +43,7 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri
|
||||
*
|
||||
* {@example common/ngIf/ts/module.ts region='NgIfThenElse'}
|
||||
*
|
||||
* ## Storing conditional result in a variable
|
||||
* ### Storing conditional result in a variable
|
||||
*
|
||||
* A common pattern is that we need to show a set of properties from the same object. If the
|
||||
* object is undefined, then we have to use the safe-traversal-operator `?.` to guard against
|
||||
|
@ -41,10 +41,10 @@ export class NgStyle implements DoCheck {
|
||||
private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {}
|
||||
|
||||
@Input()
|
||||
set ngStyle(v: {[key: string]: string}) {
|
||||
this._ngStyle = v;
|
||||
if (!this._differ && v) {
|
||||
this._differ = this._differs.find(v).create();
|
||||
set ngStyle(values: {[key: string]: string}) {
|
||||
this._ngStyle = values;
|
||||
if (!this._differ && values) {
|
||||
this._differ = this._differs.find(values).create();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -11,11 +11,6 @@ import {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChange
|
||||
/**
|
||||
* @ngModule CommonModule
|
||||
*
|
||||
* @usageNotes
|
||||
* ```
|
||||
* <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
|
||||
* ```
|
||||
*
|
||||
* @description
|
||||
*
|
||||
* Inserts an embedded view from a prepared `TemplateRef`.
|
||||
@ -24,13 +19,17 @@ import {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChange
|
||||
* `[ngTemplateOutletContext]` should be an object, the object's keys will be available for binding
|
||||
* by the local template `let` declarations.
|
||||
*
|
||||
* Note: using the key `$implicit` in the context object will set its value as default.
|
||||
* @usageNotes
|
||||
* ```
|
||||
* <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
|
||||
* ```
|
||||
*
|
||||
* ## Example
|
||||
* Using the key `$implicit` in the context object will set its value as default.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/ngTemplateOutlet/ts/module.ts region='NgTemplateOutlet'}
|
||||
*
|
||||
*
|
||||
*/
|
||||
@Directive({selector: '[ngTemplateOutlet]'})
|
||||
export class NgTemplateOutlet implements OnChanges {
|
||||
|
@ -25,6 +25,8 @@ import {LocationChangeListener, PlatformLocation} from './platform_location';
|
||||
* For instance, if you call `location.go('/foo')`, the browser's URL will become
|
||||
* `example.com#/foo`.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/location/ts/hash_location_component.ts region='LocationComponent'}
|
||||
|
@ -27,7 +27,9 @@ export interface PopStateEvent {
|
||||
* Depending on which {@link LocationStrategy} is used, `Location` will either persist
|
||||
* to the URL's path or the URL's hash segment.
|
||||
*
|
||||
* Note: it's better to use {@link Router#navigate} service to trigger route changes. Use
|
||||
* @usageNotes
|
||||
*
|
||||
* It's better to use {@link Router#navigate} service to trigger route changes. Use
|
||||
* `Location` only if you need to interact with or create normalized URLs outside of
|
||||
* routing.
|
||||
*
|
||||
@ -39,6 +41,7 @@ export interface PopStateEvent {
|
||||
* - `/my/app/user/123/` **is not** normalized
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/location/ts/path_location_component.ts region='LocationComponent'}
|
||||
*
|
||||
*/
|
||||
|
@ -47,6 +47,8 @@ export abstract class LocationStrategy {
|
||||
* representing the URL prefix that should be preserved when generating and recognizing
|
||||
* URLs.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* ```typescript
|
||||
|
@ -34,6 +34,8 @@ import {LocationChangeListener, PlatformLocation} from './platform_location';
|
||||
* `location.go('/foo')`, the browser's URL will become
|
||||
* `example.com/my/app/foo`.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/location/ts/path_location_component.ts region='LocationComponent'}
|
||||
|
@ -67,4 +67,4 @@ export interface LocationChangeEvent {
|
||||
/**
|
||||
* @experimental
|
||||
*/
|
||||
export interface LocationChangeListener { (e: LocationChangeEvent): any; }
|
||||
export interface LocationChangeListener { (event: LocationChangeEvent): any; }
|
||||
|
@ -51,8 +51,9 @@ const _observableStrategy = new ObservableStrategy();
|
||||
* changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid
|
||||
* potential memory leaks.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ## Examples
|
||||
* ### Examples
|
||||
*
|
||||
* This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
|
||||
* promise.
|
||||
@ -64,7 +65,6 @@ const _observableStrategy = new ObservableStrategy();
|
||||
*
|
||||
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}
|
||||
*
|
||||
*
|
||||
*/
|
||||
@Pipe({name: 'async', pure: false})
|
||||
export class AsyncPipe implements OnDestroy, PipeTransform {
|
||||
|
@ -64,6 +64,8 @@ import {DateFormatter} from './intl';
|
||||
* - this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera
|
||||
* browsers.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Examples
|
||||
*
|
||||
* Assuming `dateObj` is (year: 2010, month: 9, day: 3, hour: 12 PM, minute: 05, second: 08)
|
||||
|
@ -78,11 +78,12 @@ function formatNumber(
|
||||
* WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
|
||||
* and may require a polyfill. See [Browser Support](guide/browser-support) for details.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/pipes/ts/number_pipe.ts region='DeprecatedNumberPipe'}
|
||||
*
|
||||
*
|
||||
*/
|
||||
@Pipe({name: 'number'})
|
||||
export class DeprecatedDecimalPipe implements PipeTransform {
|
||||
@ -106,6 +107,8 @@ export class DeprecatedDecimalPipe implements PipeTransform {
|
||||
* WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
|
||||
* and may require a polyfill. See [Browser Support](guide/browser-support) for details.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/pipes/ts/percent_pipe.ts region='DeprecatedPercentPipe'}
|
||||
@ -140,6 +143,8 @@ export class DeprecatedPercentPipe implements PipeTransform {
|
||||
* WARNING: this pipe uses the Internationalization API which is not yet available in all browsers
|
||||
* and may require a polyfill. See [Browser Support](guide/browser-support) for details.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/pipes/ts/currency_pipe.ts region='DeprecatedCurrencyPipe'}
|
||||
|
@ -18,7 +18,9 @@ const _INTERPOLATION_REGEXP: RegExp = /#/g;
|
||||
*
|
||||
* Maps a value to a string that pluralizes the value according to locale rules.
|
||||
*
|
||||
* ## Example
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/pipes/ts/i18n_pipe.ts region='I18nPluralPipeComponent'}
|
||||
*
|
||||
|
@ -18,7 +18,9 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
|
||||
* If none of the keys of the `mapping` match the `value`, then the content
|
||||
* of the `other` key is returned when present, otherwise an empty string is returned.
|
||||
*
|
||||
* ## Example
|
||||
* @usageNotes
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* {@example common/pipes/ts/i18n_pipe.ts region='I18nSelectPipeComponent'}
|
||||
*
|
||||
|
@ -18,9 +18,8 @@ import {Pipe, PipeTransform} from '@angular/core';
|
||||
*
|
||||
* The following component uses a JSON pipe to convert an object
|
||||
* to JSON format, and displays the string in both formats for comparison.
|
||||
|
||||
* {@example common/pipes/ts/json_pipe.ts region='JsonPipe'}
|
||||
*
|
||||
* {@example common/pipes/ts/json_pipe.ts region='JsonPipe'}
|
||||
*
|
||||
*/
|
||||
@Pipe({name: 'json', pure: false})
|
||||
|
@ -19,20 +19,20 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
|
||||
* formatted according to locale rules that determine group sizing and
|
||||
* separator, decimal-point character, and other locale-specific
|
||||
* configurations.
|
||||
*
|
||||
*
|
||||
* If no parameters are specified, the function rounds off to the nearest value using this
|
||||
* [rounding method](https://en.wikibooks.org/wiki/Arithmetic/Rounding).
|
||||
* The behavior differs from that of the JavaScript ```Math.round()``` function.
|
||||
* In the following case for example, the pipe rounds down where
|
||||
* In the following case for example, the pipe rounds down where
|
||||
* ```Math.round()``` rounds up:
|
||||
*
|
||||
*
|
||||
* ```html
|
||||
* -2.5 | number:'1.0-0'
|
||||
* > -3
|
||||
* Math.round(-2.5)
|
||||
* > -2
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* @see `formatNumber()`
|
||||
*
|
||||
* @usageNotes
|
||||
@ -44,7 +44,6 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
|
||||
*
|
||||
* <code-example path="common/pipes/ts/number_pipe.ts" region='NumberPipe'></code-example>
|
||||
*
|
||||
*
|
||||
*/
|
||||
@Pipe({name: 'number'})
|
||||
export class DecimalPipe implements PipeTransform {
|
||||
|
@ -15,6 +15,8 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
|
||||
*
|
||||
* Creates a new `Array` or `String` containing a subset (slice) of the elements.
|
||||
*
|
||||
* @usageNotes
|
||||
*
|
||||
* All behavior is based on the expected behavior of the JavaScript API `Array.prototype.slice()`
|
||||
* and `String.prototype.slice()`.
|
||||
*
|
||||
@ -31,14 +33,15 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
|
||||
*
|
||||
* produces the following:
|
||||
*
|
||||
* <li>b</li>
|
||||
* <li>c</li>
|
||||
* ```html
|
||||
* <li>b</li>
|
||||
* <li>c</li>
|
||||
* ```
|
||||
*
|
||||
* ## String Examples
|
||||
* ### String Examples
|
||||
*
|
||||
* {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_string'}
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@Pipe({name: 'slice', pure: false})
|
||||
|
@ -21,11 +21,12 @@ ts_library(
|
||||
],
|
||||
),
|
||||
module_name = "@angular/compiler-cli",
|
||||
node_modules = "@//:node_modules",
|
||||
node_modules = "@angular_deps//:node_modules",
|
||||
tsconfig = ":tsconfig",
|
||||
deps = [
|
||||
"//packages/compiler",
|
||||
"//packages/compiler-cli/src/ngtsc/annotations",
|
||||
"//packages/compiler-cli/src/ngtsc/factories",
|
||||
"//packages/compiler-cli/src/ngtsc/metadata",
|
||||
"//packages/compiler-cli/src/ngtsc/transform",
|
||||
],
|
||||
@ -41,5 +42,8 @@ npm_package(
|
||||
"ivy-local",
|
||||
"release-with-framework",
|
||||
],
|
||||
deps = [":compiler-cli"],
|
||||
deps = [
|
||||
":compiler-cli",
|
||||
"//packages/compiler-cli/src/ngcc",
|
||||
],
|
||||
)
|
||||
|
@ -5,14 +5,18 @@
|
||||
"main": "index.js",
|
||||
"typings": "index.d.ts",
|
||||
"bin": {
|
||||
"ivy-ngcc": "./src/ngcc/main-ngcc.js",
|
||||
"ngc": "./src/main.js",
|
||||
"ng-xi18n": "./src/extract_i18n.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"reflect-metadata": "^0.1.2",
|
||||
"minimist": "^1.2.0",
|
||||
"tsickle": "^0.30.0",
|
||||
"chokidar": "^1.4.2"
|
||||
"tsickle": "^0.32.1",
|
||||
"chokidar": "^1.4.2",
|
||||
"convert-source-map": "^1.5.1",
|
||||
"magic-string": "^0.25.0",
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">=2.7.2 <2.10",
|
||||
|
21
packages/compiler-cli/src/ngcc/BUILD.bazel
Normal file
21
packages/compiler-cli/src/ngcc/BUILD.bazel
Normal file
@ -0,0 +1,21 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "ts_library")
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
|
||||
|
||||
ts_library(
|
||||
name = "ngcc",
|
||||
srcs = glob([
|
||||
"*.ts",
|
||||
"**/*.ts",
|
||||
]),
|
||||
module_name = "@angular/compiler-cli/src/ngcc",
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/compiler",
|
||||
"//packages/compiler-cli/src/ngtsc/annotations",
|
||||
"//packages/compiler-cli/src/ngtsc/host",
|
||||
"//packages/compiler-cli/src/ngtsc/metadata",
|
||||
"//packages/compiler-cli/src/ngtsc/transform",
|
||||
],
|
||||
)
|
30
packages/compiler-cli/src/ngcc/README.md
Normal file
30
packages/compiler-cli/src/ngcc/README.md
Normal file
@ -0,0 +1,30 @@
|
||||
# Angular Compatibility Compiler (ngcc)
|
||||
|
||||
This compiler will convert `node_modules` compiled with `ngc`, into `node_modules` which
|
||||
appear to have been compiled with `ngtsc`.
|
||||
|
||||
This conversion will allow such "legacy" packages to be used by the Ivy rendering engine.
|
||||
|
||||
## Building
|
||||
|
||||
The project is built using Bazel:
|
||||
|
||||
```bash
|
||||
bazel build //packages/compiler-cli/src/ngcc
|
||||
```
|
||||
|
||||
## Unit Testing
|
||||
|
||||
The unit tests are built and run using Bazel:
|
||||
|
||||
```bash
|
||||
bazel test //packages/compiler-cli/src/ngcc/test
|
||||
```
|
||||
|
||||
## Integration Testing
|
||||
|
||||
There are tests that check the behaviour of the overall executable:
|
||||
|
||||
```bash
|
||||
bazel test //packages/compiler-cli/test/ngcc
|
||||
```
|
9
packages/compiler-cli/src/ngcc/index.ts
Normal file
9
packages/compiler-cli/src/ngcc/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
export {mainNgcc} from './src/main';
|
16
packages/compiler-cli/src/ngcc/main-ngcc.ts
Normal file
16
packages/compiler-cli/src/ngcc/main-ngcc.ts
Normal file
@ -0,0 +1,16 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {mainNgcc} from './src/main';
|
||||
|
||||
// CLI entry point
|
||||
if (require.main === module) {
|
||||
const args = process.argv.slice(2);
|
||||
process.exitCode = mainNgcc(args);
|
||||
}
|
97
packages/compiler-cli/src/ngcc/src/analyzer.ts
Normal file
97
packages/compiler-cli/src/ngcc/src/analyzer.ts
Normal file
@ -0,0 +1,97 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import * as fs from 'fs';
|
||||
import * as ts from 'typescript';
|
||||
import {ComponentDecoratorHandler, DirectiveDecoratorHandler, InjectableDecoratorHandler, NgModuleDecoratorHandler, PipeDecoratorHandler, ResourceLoader, SelectorScopeRegistry} from '../../ngtsc/annotations';
|
||||
import {Decorator} from '../../ngtsc/host';
|
||||
import {CompileResult, DecoratorHandler} from '../../ngtsc/transform';
|
||||
import {NgccReflectionHost} from './host/ngcc_host';
|
||||
import {ParsedClass} from './parsing/parsed_class';
|
||||
import {ParsedFile} from './parsing/parsed_file';
|
||||
import {isDefined} from './utils';
|
||||
|
||||
export interface AnalyzedClass<T = any> extends ParsedClass {
|
||||
handler: DecoratorHandler<T>;
|
||||
analysis: any;
|
||||
diagnostics?: ts.Diagnostic[];
|
||||
compilation: CompileResult[];
|
||||
}
|
||||
|
||||
export interface AnalyzedFile {
|
||||
analyzedClasses: AnalyzedClass[];
|
||||
sourceFile: ts.SourceFile;
|
||||
}
|
||||
|
||||
export interface MatchingHandler<T> {
|
||||
handler: DecoratorHandler<T>;
|
||||
decorator: Decorator;
|
||||
}
|
||||
|
||||
/**
|
||||
* `ResourceLoader` which directly uses the filesystem to resolve resources synchronously.
|
||||
*/
|
||||
export class FileResourceLoader implements ResourceLoader {
|
||||
load(url: string): string { return fs.readFileSync(url, 'utf8'); }
|
||||
}
|
||||
|
||||
export class Analyzer {
|
||||
resourceLoader = new FileResourceLoader();
|
||||
scopeRegistry = new SelectorScopeRegistry(this.typeChecker, this.host);
|
||||
handlers: DecoratorHandler<any>[] = [
|
||||
new ComponentDecoratorHandler(
|
||||
this.typeChecker, this.host, this.scopeRegistry, false, this.resourceLoader),
|
||||
new DirectiveDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
|
||||
new InjectableDecoratorHandler(this.host, false),
|
||||
new NgModuleDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
|
||||
new PipeDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
|
||||
];
|
||||
|
||||
constructor(private typeChecker: ts.TypeChecker, private host: NgccReflectionHost) {}
|
||||
|
||||
/**
|
||||
* Analyize a parsed file to generate the information about decorated classes that
|
||||
* should be converted to use ivy definitions.
|
||||
* @param file The file to be analysed for decorated classes.
|
||||
*/
|
||||
analyzeFile(file: ParsedFile): AnalyzedFile {
|
||||
const analyzedClasses =
|
||||
file.decoratedClasses.map(clazz => this.analyzeClass(file.sourceFile, clazz))
|
||||
.filter(isDefined);
|
||||
|
||||
return {
|
||||
analyzedClasses,
|
||||
sourceFile: file.sourceFile,
|
||||
};
|
||||
}
|
||||
|
||||
protected analyzeClass(file: ts.SourceFile, clazz: ParsedClass): AnalyzedClass|undefined {
|
||||
const matchingHandlers =
|
||||
this.handlers.map(handler => ({handler, decorator: handler.detect(clazz.decorators)}))
|
||||
.filter(isMatchingHandler);
|
||||
|
||||
if (matchingHandlers.length > 1) {
|
||||
throw new Error('TODO.Diagnostic: Class has multiple Angular decorators.');
|
||||
}
|
||||
|
||||
if (matchingHandlers.length == 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const {handler, decorator} = matchingHandlers[0];
|
||||
const {analysis, diagnostics} = handler.analyze(clazz.declaration, decorator);
|
||||
let compilation = handler.compile(clazz.declaration, analysis);
|
||||
if (!Array.isArray(compilation)) {
|
||||
compilation = [compilation];
|
||||
}
|
||||
return {...clazz, handler, analysis, diagnostics, compilation};
|
||||
}
|
||||
}
|
||||
|
||||
function isMatchingHandler<T>(handler: Partial<MatchingHandler<T>>): handler is MatchingHandler<T> {
|
||||
return !!handler.decorator;
|
||||
}
|
425
packages/compiler-cli/src/ngcc/src/host/esm2015_host.ts
Normal file
425
packages/compiler-cli/src/ngcc/src/host/esm2015_host.ts
Normal file
@ -0,0 +1,425 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import * as ts from 'typescript';
|
||||
|
||||
import {ClassMember, ClassMemberKind, Decorator, Parameter} from '../../../ngtsc/host';
|
||||
import {TypeScriptReflectionHost, reflectObjectLiteral} from '../../../ngtsc/metadata';
|
||||
import {getNameText} from '../utils';
|
||||
import {NgccReflectionHost} from './ngcc_host';
|
||||
|
||||
export const DECORATORS = 'decorators' as ts.__String;
|
||||
export const PROP_DECORATORS = 'propDecorators' as ts.__String;
|
||||
export const CONSTRUCTOR = '__constructor' as ts.__String;
|
||||
export const CONSTRUCTOR_PARAMS = 'ctorParameters' as ts.__String;
|
||||
|
||||
/**
|
||||
* Esm2015 packages contain ECMAScript 2015 classes, etc.
|
||||
* Decorators are defined via static properties on the class. For example:
|
||||
*
|
||||
* ```
|
||||
* class SomeDirective {
|
||||
* }
|
||||
* SomeDirective.decorators = [
|
||||
* { type: Directive, args: [{ selector: '[someDirective]' },] }
|
||||
* ];
|
||||
* SomeDirective.ctorParameters = () => [
|
||||
* { type: ViewContainerRef, },
|
||||
* { type: TemplateRef, },
|
||||
* { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
|
||||
* ];
|
||||
* SomeDirective.propDecorators = {
|
||||
* "input1": [{ type: Input },],
|
||||
* "input2": [{ type: Input },],
|
||||
* };
|
||||
* ```
|
||||
*
|
||||
* * Classes are decorated if they have a static property called `decorators`.
|
||||
* * Members are decorated if there is a matching key on a static property
|
||||
* called `propDecorators`.
|
||||
* * Constructor parameters decorators are found on an object returned from
|
||||
* a static method called `ctorParameters`.
|
||||
*/
|
||||
export class Esm2015ReflectionHost extends TypeScriptReflectionHost implements NgccReflectionHost {
|
||||
constructor(checker: ts.TypeChecker) { super(checker); }
|
||||
|
||||
/**
|
||||
* Examine a declaration (for example, of a class or function) and return metadata about any
|
||||
* decorators present on the declaration.
|
||||
*
|
||||
* @param declaration a TypeScript `ts.Declaration` node representing the class or function over
|
||||
* which to reflect. For example, if the intent is to reflect the decorators of a class and the
|
||||
* source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the source is in ES5
|
||||
* format, this might be a `ts.VariableDeclaration` as classes in ES5 are represented as the
|
||||
* result of an IIFE execution.
|
||||
*
|
||||
* @returns an array of `Decorator` metadata if decorators are present on the declaration, or
|
||||
* `null` if either no decorators were present or if the declaration is not of a decoratable type.
|
||||
*/
|
||||
getDecoratorsOfDeclaration(declaration: ts.Declaration): Decorator[]|null {
|
||||
const symbol = this.getClassSymbol(declaration);
|
||||
if (symbol) {
|
||||
if (symbol.exports && symbol.exports.has(DECORATORS)) {
|
||||
// Symbol of the identifier for `SomeDirective.decorators`.
|
||||
const decoratorsSymbol = symbol.exports.get(DECORATORS) !;
|
||||
const decoratorsIdentifier = decoratorsSymbol.valueDeclaration;
|
||||
|
||||
if (decoratorsIdentifier && decoratorsIdentifier.parent) {
|
||||
if (ts.isBinaryExpression(decoratorsIdentifier.parent)) {
|
||||
// AST of the array of decorator values
|
||||
const decoratorsArray = decoratorsIdentifier.parent.right;
|
||||
return this.reflectDecorators(decoratorsArray);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Examine a declaration which should be of a class, and return metadata about the members of the
|
||||
* class.
|
||||
*
|
||||
* @param declaration a TypeScript `ts.Declaration` node representing the class over which to
|
||||
* reflect. If the source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the
|
||||
* source is in ES5 format, this might be a `ts.VariableDeclaration` as classes in ES5 are
|
||||
* represented as the result of an IIFE execution.
|
||||
*
|
||||
* @returns an array of `ClassMember` metadata representing the members of the class.
|
||||
*
|
||||
* @throws if `declaration` does not resolve to a class declaration.
|
||||
*/
|
||||
getMembersOfClass(clazz: ts.Declaration): ClassMember[] {
|
||||
const members: ClassMember[] = [];
|
||||
const symbol = this.getClassSymbol(clazz);
|
||||
if (!symbol) {
|
||||
throw new Error(`Attempted to get members of a non-class: "${clazz.getText()}"`);
|
||||
}
|
||||
|
||||
// The decorators map contains all the properties that are decorated
|
||||
const decoratorsMap = this.getMemberDecorators(symbol);
|
||||
|
||||
// The member map contains all the method (instance and static); and any instance properties
|
||||
// that are initialized in the class.
|
||||
if (symbol.members) {
|
||||
symbol.members.forEach((value, key) => {
|
||||
const decorators = removeFromMap(decoratorsMap, key);
|
||||
const member = this.reflectMember(value, decorators);
|
||||
if (member) {
|
||||
members.push(member);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// The static property map contains all the static properties
|
||||
if (symbol.exports) {
|
||||
symbol.exports.forEach((value, key) => {
|
||||
const decorators = removeFromMap(decoratorsMap, key);
|
||||
const member = this.reflectMember(value, decorators, true);
|
||||
if (member) {
|
||||
members.push(member);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Deal with any decorated properties that were not initialized in the class
|
||||
decoratorsMap.forEach((value, key) => {
|
||||
members.push({
|
||||
implementation: null,
|
||||
decorators: value,
|
||||
isStatic: false,
|
||||
kind: ClassMemberKind.Property,
|
||||
name: key,
|
||||
nameNode: null,
|
||||
node: null,
|
||||
type: null,
|
||||
value: null
|
||||
});
|
||||
});
|
||||
|
||||
return members;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reflect over the constructor of a class and return metadata about its parameters.
|
||||
*
|
||||
* This method only looks at the constructor of a class directly and not at any inherited
|
||||
* constructors.
|
||||
*
|
||||
* @param declaration a TypeScript `ts.Declaration` node representing the class over which to
|
||||
* reflect. If the source is in ES6 format, this will be a `ts.ClassDeclaration` node. If the
|
||||
* source is in ES5 format, this might be a `ts.VariableDeclaration` as classes in ES5 are
|
||||
* represented as the result of an IIFE execution.
|
||||
*
|
||||
* @returns an array of `Parameter` metadata representing the parameters of the constructor, if
|
||||
* a constructor exists. If the constructor exists and has 0 parameters, this array will be empty.
|
||||
* If the class has no constructor, this method returns `null`.
|
||||
*
|
||||
* @throws if `declaration` does not resolve to a class declaration.
|
||||
*/
|
||||
getConstructorParameters(clazz: ts.Declaration): Parameter[]|null {
|
||||
const classSymbol = this.getClassSymbol(clazz);
|
||||
if (!classSymbol) {
|
||||
throw new Error(
|
||||
`Attempted to get constructor parameters of a non-class: "${clazz.getText()}"`);
|
||||
}
|
||||
const parameterNodes = this.getConstructorParameterDeclarations(classSymbol);
|
||||
if (parameterNodes) {
|
||||
const parameters: Parameter[] = [];
|
||||
const decoratorInfo = this.getConstructorDecorators(classSymbol);
|
||||
parameterNodes.forEach((node, index) => {
|
||||
const info = decoratorInfo[index];
|
||||
const decorators =
|
||||
info && info.has('decorators') && this.reflectDecorators(info.get('decorators') !) ||
|
||||
null;
|
||||
const type = info && info.get('type') || null;
|
||||
const nameNode = node.name;
|
||||
parameters.push({name: getNameText(nameNode), nameNode, type, decorators});
|
||||
});
|
||||
return parameters;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a symbol for a declaration that we think is a class.
|
||||
* @param declaration The declaration whose symbol we are finding
|
||||
* @returns the symbol for the declaration or `undefined` if it is not
|
||||
* a "class" or has no symbol.
|
||||
*/
|
||||
getClassSymbol(declaration: ts.Declaration): ts.Symbol|undefined {
|
||||
return ts.isClassDeclaration(declaration) ?
|
||||
declaration.name && this.checker.getSymbolAtLocation(declaration.name) :
|
||||
undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Member decorators are declared as static properties of the class in ES2015:
|
||||
*
|
||||
* ```
|
||||
* SomeDirective.propDecorators = {
|
||||
* "ngForOf": [{ type: Input },],
|
||||
* "ngForTrackBy": [{ type: Input },],
|
||||
* "ngForTemplate": [{ type: Input },],
|
||||
* };
|
||||
* ```
|
||||
*/
|
||||
protected getMemberDecorators(classSymbol: ts.Symbol): Map<string, Decorator[]> {
|
||||
const memberDecorators = new Map<string, Decorator[]>();
|
||||
if (classSymbol.exports && classSymbol.exports.has(PROP_DECORATORS)) {
|
||||
// Symbol of the identifier for `SomeDirective.propDecorators`.
|
||||
const propDecoratorsMap =
|
||||
getPropertyValueFromSymbol(classSymbol.exports.get(PROP_DECORATORS) !);
|
||||
if (propDecoratorsMap && ts.isObjectLiteralExpression(propDecoratorsMap)) {
|
||||
const propertiesMap = reflectObjectLiteral(propDecoratorsMap);
|
||||
propertiesMap.forEach(
|
||||
(value, name) => { memberDecorators.set(name, this.reflectDecorators(value)); });
|
||||
}
|
||||
}
|
||||
return memberDecorators;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reflect over the given expression and extract decorator information.
|
||||
* @param decoratorsArray An expression that contains decorator information.
|
||||
*/
|
||||
protected reflectDecorators(decoratorsArray: ts.Expression): Decorator[] {
|
||||
const decorators: Decorator[] = [];
|
||||
|
||||
if (ts.isArrayLiteralExpression(decoratorsArray)) {
|
||||
// Add each decorator that is imported from `@angular/core` into the `decorators` array
|
||||
decoratorsArray.elements.forEach(node => {
|
||||
|
||||
// If the decorator is not an object literal expression then we are not interested
|
||||
if (ts.isObjectLiteralExpression(node)) {
|
||||
// We are only interested in objects of the form: `{ type: DecoratorType, args: [...] }`
|
||||
const decorator = reflectObjectLiteral(node);
|
||||
|
||||
// Is the value of the `type` property an identifier?
|
||||
const typeIdentifier = decorator.get('type');
|
||||
if (typeIdentifier && ts.isIdentifier(typeIdentifier)) {
|
||||
decorators.push({
|
||||
name: typeIdentifier.text,
|
||||
import: this.getImportOfIdentifier(typeIdentifier), node,
|
||||
args: getDecoratorArgs(node),
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return decorators;
|
||||
}
|
||||
|
||||
protected reflectMember(symbol: ts.Symbol, decorators?: Decorator[], isStatic?: boolean):
|
||||
ClassMember|null {
|
||||
let kind: ClassMemberKind|null = null;
|
||||
let value: ts.Expression|null = null;
|
||||
let name: string|null = null;
|
||||
let nameNode: ts.Identifier|null = null;
|
||||
let type = null;
|
||||
|
||||
|
||||
const node = symbol.valueDeclaration || symbol.declarations && symbol.declarations[0];
|
||||
if (!node || !isClassMemberType(node)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (symbol.flags & ts.SymbolFlags.Method) {
|
||||
kind = ClassMemberKind.Method;
|
||||
} else if (symbol.flags & ts.SymbolFlags.Property) {
|
||||
kind = ClassMemberKind.Property;
|
||||
} else if (symbol.flags & ts.SymbolFlags.GetAccessor) {
|
||||
kind = ClassMemberKind.Getter;
|
||||
} else if (symbol.flags & ts.SymbolFlags.SetAccessor) {
|
||||
kind = ClassMemberKind.Setter;
|
||||
}
|
||||
|
||||
if (isStatic && isPropertyAccess(node)) {
|
||||
name = node.name.text;
|
||||
value = symbol.flags & ts.SymbolFlags.Property ? node.parent.right : null;
|
||||
} else if (isThisAssignment(node)) {
|
||||
kind = ClassMemberKind.Property;
|
||||
name = node.left.name.text;
|
||||
value = node.right;
|
||||
isStatic = false;
|
||||
} else if (ts.isConstructorDeclaration(node)) {
|
||||
kind = ClassMemberKind.Constructor;
|
||||
name = 'constructor';
|
||||
isStatic = false;
|
||||
}
|
||||
|
||||
if (kind === null) {
|
||||
console.warn(`Unknown member type: "${node.getText()}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!name) {
|
||||
if (isNamedDeclaration(node) && node.name && ts.isIdentifier(node.name)) {
|
||||
name = node.name.text;
|
||||
nameNode = node.name;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// If we have still not determined if this is a static or instance member then
|
||||
// look for the `static` keyword on the declaration
|
||||
if (isStatic === undefined) {
|
||||
isStatic = node.modifiers !== undefined &&
|
||||
node.modifiers.some(mod => mod.kind === ts.SyntaxKind.StaticKeyword);
|
||||
}
|
||||
|
||||
return {
|
||||
node,
|
||||
implementation: node, kind, type, name, nameNode, value, isStatic,
|
||||
decorators: decorators || []
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the declarations of the constructor parameters of a class identified by its symbol.
|
||||
* @param classSymbol the class whose parameters we want to find.
|
||||
* @returns an array of `ts.ParameterDeclaration` objects representing each of the parameters in
|
||||
* the
|
||||
* class's constructor or null if there is no constructor.
|
||||
*/
|
||||
protected getConstructorParameterDeclarations(classSymbol: ts.Symbol):
|
||||
ts.ParameterDeclaration[]|null {
|
||||
const constructorSymbol = classSymbol.members && classSymbol.members.get(CONSTRUCTOR);
|
||||
if (constructorSymbol) {
|
||||
// For some reason the constructor does not have a `valueDeclaration` ?!?
|
||||
const constructor = constructorSymbol.declarations &&
|
||||
constructorSymbol.declarations[0] as ts.ConstructorDeclaration;
|
||||
if (constructor && constructor.parameters) {
|
||||
return Array.from(constructor.parameters);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructors parameter decorators are declared in the body of static method of the class in
|
||||
* ES2015:
|
||||
*
|
||||
* ```
|
||||
* SomeDirective.ctorParameters = () => [
|
||||
* { type: ViewContainerRef, },
|
||||
* { type: TemplateRef, },
|
||||
* { type: IterableDiffers, },
|
||||
* { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
|
||||
* ];
|
||||
* ```
|
||||
*/
|
||||
protected getConstructorDecorators(classSymbol: ts.Symbol): (Map<string, ts.Expression>|null)[] {
|
||||
if (classSymbol.exports && classSymbol.exports.has(CONSTRUCTOR_PARAMS)) {
|
||||
const paramDecoratorsProperty =
|
||||
getPropertyValueFromSymbol(classSymbol.exports.get(CONSTRUCTOR_PARAMS) !);
|
||||
if (paramDecoratorsProperty && ts.isArrowFunction(paramDecoratorsProperty)) {
|
||||
if (ts.isArrayLiteralExpression(paramDecoratorsProperty.body)) {
|
||||
return paramDecoratorsProperty.body.elements.map(
|
||||
element =>
|
||||
ts.isObjectLiteralExpression(element) ? reflectObjectLiteral(element) : null);
|
||||
}
|
||||
}
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The arguments of a decorator are held in the `args` property of its declaration object.
|
||||
*/
|
||||
function getDecoratorArgs(node: ts.ObjectLiteralExpression): ts.Expression[] {
|
||||
const argsProperty = node.properties.filter(ts.isPropertyAssignment)
|
||||
.find(property => getNameText(property.name) === 'args');
|
||||
const argsExpression = argsProperty && argsProperty.initializer;
|
||||
return argsExpression && ts.isArrayLiteralExpression(argsExpression) ?
|
||||
Array.from(argsExpression.elements) :
|
||||
[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper method to extract the value of a property given the property's "symbol",
|
||||
* which is actually the symbol of the identifier of the property.
|
||||
*/
|
||||
export function getPropertyValueFromSymbol(propSymbol: ts.Symbol): ts.Expression|undefined {
|
||||
const propIdentifier = propSymbol.valueDeclaration;
|
||||
const parent = propIdentifier && propIdentifier.parent;
|
||||
return parent && ts.isBinaryExpression(parent) ? parent.right : undefined;
|
||||
}
|
||||
|
||||
function removeFromMap<T>(map: Map<string, T>, key: ts.__String): T|undefined {
|
||||
const mapKey = key as string;
|
||||
const value = map.get(mapKey);
|
||||
if (value !== undefined) {
|
||||
map.delete(mapKey);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function isPropertyAccess(node: ts.Node): node is ts.PropertyAccessExpression&
|
||||
{parent: ts.BinaryExpression} {
|
||||
return !!node.parent && ts.isBinaryExpression(node.parent) && ts.isPropertyAccessExpression(node);
|
||||
}
|
||||
|
||||
function isThisAssignment(node: ts.Declaration): node is ts.BinaryExpression&
|
||||
{left: ts.PropertyAccessExpression} {
|
||||
return ts.isBinaryExpression(node) && ts.isPropertyAccessExpression(node.left) &&
|
||||
node.left.expression.kind === ts.SyntaxKind.ThisKeyword;
|
||||
}
|
||||
|
||||
function isNamedDeclaration(node: ts.Declaration): node is ts.NamedDeclaration {
|
||||
return !!(node as any).name;
|
||||
}
|
||||
|
||||
|
||||
function isClassMemberType(node: ts.Declaration): node is ts.ClassElement|
|
||||
ts.PropertyAccessExpression|ts.BinaryExpression {
|
||||
return ts.isClassElement(node) || isPropertyAccess(node) || ts.isBinaryExpression(node);
|
||||
}
|
137
packages/compiler-cli/src/ngcc/src/host/esm5_host.ts
Normal file
137
packages/compiler-cli/src/ngcc/src/host/esm5_host.ts
Normal file
@ -0,0 +1,137 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import * as ts from 'typescript';
|
||||
import {ClassMember, ClassMemberKind, Decorator} from '../../../ngtsc/host';
|
||||
import {reflectObjectLiteral} from '../../../ngtsc/metadata';
|
||||
import {CONSTRUCTOR_PARAMS, Esm2015ReflectionHost, getPropertyValueFromSymbol} from './esm2015_host';
|
||||
|
||||
/**
|
||||
* ESM5 packages contain ECMAScript IIFE functions that act like classes. For example:
|
||||
*
|
||||
* ```
|
||||
* var CommonModule = (function () {
|
||||
* function CommonModule() {
|
||||
* }
|
||||
* CommonModule.decorators = [ ... ];
|
||||
* ```
|
||||
*
|
||||
* * "Classes" are decorated if they have a static property called `decorators`.
|
||||
* * Members are decorated if there is a matching key on a static property
|
||||
* called `propDecorators`.
|
||||
* * Constructor parameters decorators are found on an object returned from
|
||||
* a static method called `ctorParameters`.
|
||||
*
|
||||
*/
|
||||
export class Esm5ReflectionHost extends Esm2015ReflectionHost {
|
||||
constructor(checker: ts.TypeChecker) { super(checker); }
|
||||
|
||||
/**
|
||||
* Check whether the given declaration node actually represents a class.
|
||||
*/
|
||||
isClass(node: ts.Declaration): boolean { return !!this.getClassSymbol(node); }
|
||||
|
||||
/**
|
||||
* In ESM5 the implementation of a class is a function expression that is hidden inside an IIFE.
|
||||
* So we need to dig around inside to get hold of the "class" symbol.
|
||||
* @param declaration the top level declaration that represents an exported class.
|
||||
*/
|
||||
getClassSymbol(declaration: ts.Declaration): ts.Symbol|undefined {
|
||||
if (ts.isVariableDeclaration(declaration)) {
|
||||
const iifeBody = getIifeBody(declaration);
|
||||
if (iifeBody) {
|
||||
const innerClassIdentifier = getReturnIdentifier(iifeBody);
|
||||
if (innerClassIdentifier) {
|
||||
return this.checker.getSymbolAtLocation(innerClassIdentifier);
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the declarations of the constructor parameters of a class identified by its symbol.
|
||||
* In ESM5 there is no "class" so the constructor that we want is actually the declaration
|
||||
* function itself.
|
||||
*/
|
||||
protected getConstructorParameterDeclarations(classSymbol: ts.Symbol): ts.ParameterDeclaration[] {
|
||||
const constructor = classSymbol.valueDeclaration as ts.FunctionDeclaration;
|
||||
if (constructor && constructor.parameters) {
|
||||
return Array.from(constructor.parameters);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructors parameter decorators are declared in the body of static method of the constructor
|
||||
* function in ES5. Note that unlike ESM2105 this is a function expression rather than an arrow
|
||||
* function:
|
||||
*
|
||||
* ```
|
||||
* SomeDirective.ctorParameters = function() { return [
|
||||
* { type: ViewContainerRef, },
|
||||
* { type: TemplateRef, },
|
||||
* { type: IterableDiffers, },
|
||||
* { type: undefined, decorators: [{ type: Inject, args: [INJECTED_TOKEN,] },] },
|
||||
* ]; };
|
||||
* ```
|
||||
*/
|
||||
protected getConstructorDecorators(classSymbol: ts.Symbol): (Map<string, ts.Expression>|null)[] {
|
||||
const declaration = classSymbol.exports && classSymbol.exports.get(CONSTRUCTOR_PARAMS);
|
||||
const paramDecoratorsProperty = declaration && getPropertyValueFromSymbol(declaration);
|
||||
const returnStatement = getReturnStatement(paramDecoratorsProperty);
|
||||
const expression = returnStatement && returnStatement.expression;
|
||||
return expression && ts.isArrayLiteralExpression(expression) ?
|
||||
expression.elements.map(reflectArrayElement) :
|
||||
[];
|
||||
}
|
||||
|
||||
protected reflectMember(symbol: ts.Symbol, decorators?: Decorator[], isStatic?: boolean):
|
||||
ClassMember|null {
|
||||
const member = super.reflectMember(symbol, decorators, isStatic);
|
||||
if (member && member.kind === ClassMemberKind.Method && member.isStatic && member.node &&
|
||||
ts.isPropertyAccessExpression(member.node) && member.node.parent &&
|
||||
ts.isBinaryExpression(member.node.parent) &&
|
||||
ts.isFunctionExpression(member.node.parent.right)) {
|
||||
// Recompute the implementation for this member:
|
||||
// ES5 static methods are variable declarations so the declaration is actually the
|
||||
// initializer of the variable assignment
|
||||
member.implementation = member.node.parent.right;
|
||||
}
|
||||
return member;
|
||||
}
|
||||
}
|
||||
|
||||
function getIifeBody(declaration: ts.VariableDeclaration): ts.Block|undefined {
|
||||
if (!declaration.initializer || !ts.isParenthesizedExpression(declaration.initializer)) {
|
||||
return undefined;
|
||||
}
|
||||
const call = declaration.initializer;
|
||||
return ts.isCallExpression(call.expression) &&
|
||||
ts.isFunctionExpression(call.expression.expression) ?
|
||||
call.expression.expression.body :
|
||||
undefined;
|
||||
}
|
||||
|
||||
function getReturnIdentifier(body: ts.Block): ts.Identifier|undefined {
|
||||
const returnStatement = body.statements.find(ts.isReturnStatement);
|
||||
return returnStatement && returnStatement.expression &&
|
||||
ts.isIdentifier(returnStatement.expression) ?
|
||||
returnStatement.expression :
|
||||
undefined;
|
||||
}
|
||||
|
||||
function getReturnStatement(declaration: ts.Expression | undefined): ts.ReturnStatement|undefined {
|
||||
return declaration && ts.isFunctionExpression(declaration) ?
|
||||
declaration.body.statements.find(ts.isReturnStatement) :
|
||||
undefined;
|
||||
}
|
||||
|
||||
function reflectArrayElement(element: ts.Expression) {
|
||||
return ts.isObjectLiteralExpression(element) ? reflectObjectLiteral(element) : null;
|
||||
}
|
16
packages/compiler-cli/src/ngcc/src/host/ngcc_host.ts
Normal file
16
packages/compiler-cli/src/ngcc/src/host/ngcc_host.ts
Normal file
@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import * as ts from 'typescript';
|
||||
import {ReflectionHost} from '../../../ngtsc/host';
|
||||
|
||||
/**
|
||||
* A reflection host that has extra methods for looking at non-Typescript package formats
|
||||
*/
|
||||
export interface NgccReflectionHost extends ReflectionHost {
|
||||
getClassSymbol(declaration: ts.Declaration): ts.Symbol|undefined;
|
||||
}
|
21
packages/compiler-cli/src/ngcc/src/main.ts
Normal file
21
packages/compiler-cli/src/ngcc/src/main.ts
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {resolve} from 'path';
|
||||
import {PackageTransformer} from './transform/package_transformer';
|
||||
|
||||
export function mainNgcc(args: string[]): number {
|
||||
const packagePath = resolve(args[0]);
|
||||
|
||||
// TODO: find all the package tyoes to transform
|
||||
// TODO: error/warning logging/handling etc
|
||||
|
||||
const transformer = new PackageTransformer();
|
||||
transformer.transform(packagePath, 'fesm2015');
|
||||
|
||||
return 0;
|
||||
}
|
54
packages/compiler-cli/src/ngcc/src/parsing/esm2015_parser.ts
Normal file
54
packages/compiler-cli/src/ngcc/src/parsing/esm2015_parser.ts
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import * as ts from 'typescript';
|
||||
|
||||
import {NgccReflectionHost} from '../host/ngcc_host';
|
||||
import {getOriginalSymbol, isDefined} from '../utils';
|
||||
|
||||
import {FileParser} from './file_parser';
|
||||
import {ParsedClass} from './parsed_class';
|
||||
import {ParsedFile} from './parsed_file';
|
||||
|
||||
export class Esm2015FileParser implements FileParser {
|
||||
checker = this.program.getTypeChecker();
|
||||
|
||||
constructor(protected program: ts.Program, protected host: NgccReflectionHost) {}
|
||||
|
||||
parseFile(file: ts.SourceFile): ParsedFile[] {
|
||||
const moduleSymbol = this.checker.getSymbolAtLocation(file);
|
||||
const map = new Map<ts.SourceFile, ParsedFile>();
|
||||
if (moduleSymbol) {
|
||||
const exportClasses = this.checker.getExportsOfModule(moduleSymbol)
|
||||
.map(getOriginalSymbol(this.checker))
|
||||
.filter(exportSymbol => exportSymbol.flags & ts.SymbolFlags.Class);
|
||||
|
||||
const classDeclarations = exportClasses.map(exportSymbol => exportSymbol.valueDeclaration)
|
||||
.filter(isDefined)
|
||||
.filter(ts.isClassDeclaration);
|
||||
|
||||
const decoratedClasses =
|
||||
classDeclarations
|
||||
.map(declaration => {
|
||||
const decorators = this.host.getDecoratorsOfDeclaration(declaration);
|
||||
return decorators && declaration.name &&
|
||||
new ParsedClass(declaration.name.text, declaration, decorators);
|
||||
})
|
||||
.filter(isDefined);
|
||||
|
||||
decoratedClasses.forEach(clazz => {
|
||||
const file = clazz.declaration.getSourceFile();
|
||||
if (!map.has(file)) {
|
||||
map.set(file, new ParsedFile(file));
|
||||
}
|
||||
map.get(file) !.decoratedClasses.push(clazz);
|
||||
});
|
||||
}
|
||||
return Array.from(map.values());
|
||||
}
|
||||
}
|
59
packages/compiler-cli/src/ngcc/src/parsing/esm5_parser.ts
Normal file
59
packages/compiler-cli/src/ngcc/src/parsing/esm5_parser.ts
Normal file
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import * as ts from 'typescript';
|
||||
|
||||
import {NgccReflectionHost} from '../host/ngcc_host';
|
||||
import {getNameText, getOriginalSymbol, isDefined} from '../utils';
|
||||
|
||||
import {FileParser} from './file_parser';
|
||||
import {ParsedClass} from './parsed_class';
|
||||
import {ParsedFile} from './parsed_file';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Parses ESM5 package files for decoratrs classes.
|
||||
* ESM5 "classes" are actually functions wrapped by and returned
|
||||
* from an IFEE.
|
||||
*/
|
||||
export class Esm5FileParser implements FileParser {
|
||||
checker = this.program.getTypeChecker();
|
||||
|
||||
constructor(protected program: ts.Program, protected host: NgccReflectionHost) {}
|
||||
|
||||
parseFile(file: ts.SourceFile): ParsedFile[] {
|
||||
const moduleSymbol = this.checker.getSymbolAtLocation(file);
|
||||
const map = new Map<ts.SourceFile, ParsedFile>();
|
||||
const getParsedClass = (declaration: ts.VariableDeclaration) => {
|
||||
const decorators = this.host.getDecoratorsOfDeclaration(declaration);
|
||||
if (decorators) {
|
||||
return new ParsedClass(getNameText(declaration.name), declaration, decorators);
|
||||
}
|
||||
};
|
||||
|
||||
if (moduleSymbol) {
|
||||
const classDeclarations = this.checker.getExportsOfModule(moduleSymbol)
|
||||
.map(getOriginalSymbol(this.checker))
|
||||
.map(exportSymbol => exportSymbol.valueDeclaration)
|
||||
.filter(isDefined)
|
||||
.filter(ts.isVariableDeclaration);
|
||||
|
||||
const decoratedClasses = classDeclarations.map(getParsedClass).filter(isDefined);
|
||||
|
||||
decoratedClasses.forEach(clazz => {
|
||||
const file = clazz.declaration.getSourceFile();
|
||||
if (!map.has(file)) {
|
||||
map.set(file, new ParsedFile(file));
|
||||
}
|
||||
map.get(file) !.decoratedClasses.push(clazz);
|
||||
});
|
||||
}
|
||||
return Array.from(map.values());
|
||||
}
|
||||
}
|
35
packages/compiler-cli/src/ngcc/src/parsing/file_parser.ts
Normal file
35
packages/compiler-cli/src/ngcc/src/parsing/file_parser.ts
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import * as ts from 'typescript';
|
||||
import {ParsedFile} from './parsed_file';
|
||||
|
||||
/**
|
||||
* Classes that implement this interface can parse a file in a package to
|
||||
* find the "declarations" (representing exported classes), that are decorated with core
|
||||
* decorators, such as `@Component`, `@Injectable`, etc.
|
||||
*
|
||||
* Identifying classes can be different depending upon the format of the source file.
|
||||
*
|
||||
* For example:
|
||||
*
|
||||
* - ES2015 files contain `class Xxxx {...}` style declarations
|
||||
* - ES5 files contain `var Xxxx = (function () { function Xxxx() { ... }; return Xxxx; })();` style
|
||||
* declarations
|
||||
* - UMD have similar declarations to ES5 files but the whole thing is wrapped in IIFE module
|
||||
* wrapper
|
||||
* function.
|
||||
*/
|
||||
export interface FileParser {
|
||||
/**
|
||||
* Parse a file to identify the decorated classes.
|
||||
*
|
||||
* @param file The the entry point file for identifying classes to process.
|
||||
* @returns A `ParsedFiles` collection that holds the decorated classes and import information.
|
||||
*/
|
||||
parseFile(file: ts.SourceFile): ParsedFile[];
|
||||
}
|
26
packages/compiler-cli/src/ngcc/src/parsing/parsed_class.ts
Normal file
26
packages/compiler-cli/src/ngcc/src/parsing/parsed_class.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import * as ts from 'typescript';
|
||||
import {Decorator} from '../../../ngtsc/host';
|
||||
|
||||
/**
|
||||
* A simple container that holds the details of a decorated class that has been
|
||||
* parsed out of a package.
|
||||
*/
|
||||
export class ParsedClass {
|
||||
/**
|
||||
* Initialize a `DecoratedClass` that was found by parsing a package.
|
||||
* @param name The name of the class that has been found. This is mostly used
|
||||
* for informational purposes.
|
||||
* @param declaration The TypeScript AST node where this class is declared
|
||||
* @param decorators The collection of decorators that have been found on this class.
|
||||
*/
|
||||
constructor(
|
||||
public name: string, public declaration: ts.Declaration, public decorators: Decorator[], ) {}
|
||||
}
|
23
packages/compiler-cli/src/ngcc/src/parsing/parsed_file.ts
Normal file
23
packages/compiler-cli/src/ngcc/src/parsing/parsed_file.ts
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import * as ts from 'typescript';
|
||||
import {ParsedClass} from './parsed_class';
|
||||
|
||||
/**
|
||||
* Information about a source file that has been parsed to
|
||||
* extract all the decorated exported classes.
|
||||
*/
|
||||
export class ParsedFile {
|
||||
/**
|
||||
* The decorated exported classes that have been parsed out
|
||||
* from the file.
|
||||
*/
|
||||
public decoratedClasses: ParsedClass[] = [];
|
||||
constructor(public sourceFile: ts.SourceFile) {}
|
||||
}
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user