build: migrate examples to use rules_js (#61652)

Migrate examples to use ng_project and ts_project for building

PR Close #61652
This commit is contained in:
Joey Perrott 2025-05-23 16:25:04 +00:00 committed by Jessica Janiuk
parent 9e1cd49662
commit 6fea9c88cc
24 changed files with 259 additions and 131 deletions

View file

@ -1,10 +1,38 @@
load("//tools:defaults2.bzl", "ts_config")
package(default_visibility = ["//visibility:public"])
exports_files([
"index.html",
"tsconfig-e2e.json",
])
ts_config(
name = "tsconfig_build",
src = "tsconfig.json",
deps = [
"//packages:tsconfig_build",
],
)
ts_config(
name = "tsconfig_test",
src = "tsconfig-test.json",
deps = [
":tsconfig_build",
"//:node_modules/@types/jasmine",
],
)
ts_config(
name = "tsconfig_e2e",
src = "tsconfig-e2e.json",
deps = [
":tsconfig_test",
"//:node_modules/@types/jasminewd2",
"//:node_modules/@types/node",
],
)
filegroup(
name = "files_for_docgen",
srcs = [

View file

@ -1,34 +1,39 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "esbuild", "http_server", "protractor_web_test_suite")
load("//tools:defaults2.bzl", "ng_project", "ts_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "common_examples",
srcs = glob(
["**/*.ts"],
exclude = ["**/*_spec.ts"],
),
deps = [
"//packages/common",
"//packages/core",
interop_deps = [
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/router",
"//packages/zone.js/lib",
"@npm//rxjs",
],
deps = [
"//:node_modules/rxjs",
"//packages/common:common_rjs",
"//packages/core:core_rjs",
"//packages/router:router_rjs",
],
)
ts_library(
ts_project(
name = "common_tests_lib",
testonly = True,
srcs = glob(["**/*_spec.ts"]),
tsconfig = "//packages/examples:tsconfig-e2e.json",
deps = [
"//packages/examples/test-utils",
interop_deps = [
"//packages/private/testing",
"@npm//@types/jasminewd2",
"@npm//protractor",
],
tsconfig = "//packages/examples:tsconfig_e2e",
deps = [
"//:node_modules/@types/jasminewd2",
"//:node_modules/protractor",
"//packages/examples/test-utils:test-utils_rjs",
],
)

View file

@ -1,8 +1,9 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "jasmine_node_test", "ng_module", "protractor_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "esbuild", "http_server", "jasmine_node_test", "protractor_web_test_suite")
load("//tools:defaults2.bzl", "ng_project", "ts_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "core_examples",
srcs = glob(
["**/*.ts"],
@ -11,20 +12,22 @@ ng_module(
"**/*_howto.ts",
],
),
deps = [
"//packages/animations",
"//packages/core",
"//packages/forms",
interop_deps = [
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/platform-browser/animations",
"//packages/router",
"//packages/zone.js/lib",
"@npm//rxjs",
],
deps = [
"//:node_modules/rxjs",
"//packages/animations:animations_rjs",
"//packages/core:core_rjs",
"//packages/forms:forms_rjs",
"//packages/router:router_rjs",
],
)
ts_library(
ts_project(
name = "core_tests_lib",
testonly = True,
srcs = glob(
@ -32,20 +35,20 @@ ts_library(
exclude = ["**/e2e_test/*"],
),
deps = [
"//packages/core",
"//packages/core/testing",
"//packages/core:core_rjs",
"//packages/core/testing:testing_rjs",
],
)
ts_library(
ts_project(
name = "core_e2e_tests_lib",
testonly = True,
srcs = glob(["**/e2e_test/*_spec.ts"]),
tsconfig = "//packages/examples:tsconfig-e2e.json",
tsconfig = "//packages/examples:tsconfig_e2e",
deps = [
"//packages/examples/test-utils",
"@npm//@types/jasminewd2",
"@npm//protractor",
"//:node_modules/@types/jasminewd2",
"//:node_modules/protractor",
"//packages/examples/test-utils:test-utils_rjs",
],
)

View file

@ -19,7 +19,7 @@ export class Pane {
@Component({
selector: 'tab',
template: ` <div>pane: {{ pane?.id }}</div> `,
template: ` <div>pane: {{ pane.id }}</div> `,
standalone: false,
})
export class Tab {

View file

@ -1,19 +1,19 @@
load("//tools:defaults.bzl", "ng_module")
load("//tools:defaults2.bzl", "ng_project")
package(default_visibility = ["//visibility:public"])
# Note: The `forward_ref` example tests are built through this `ng_module` sub-target.
# Note: The `forward_ref` example tests are built through this `ng_project` sub-target.
# This is done so that DI decorator/type metadata is processed manually by the compiler
# ahead of time. We cannot rely on the official TypeScript decorator downlevel emit (for JIT),
# as the output is not compatible with `forwardRef` and ES2015+. More details here:
# https://github.com/angular/angular/commit/323651bd38909b0f4226bcb6c8f5abafa91cf9d9.
# https://github.com/microsoft/TypeScript/issues/27519.
ng_module(
ng_project(
name = "forward_ref_tests_lib",
testonly = True,
srcs = ["forward_ref_spec.ts"],
visibility = ["//packages/examples/core:__pkg__"],
deps = ["//packages/core"],
deps = ["//packages/core:core_rjs"],
)
filegroup(

View file

@ -1,17 +1,17 @@
load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
load("//tools:defaults.bzl", "jasmine_node_test")
load("//tools:defaults2.bzl", "ts_project")
package(default_visibility = ["//visibility:public"])
ts_library(
ts_project(
name = "fake_async_lib",
testonly = True,
srcs = [
"example_spec.ts",
"fake_async.ts",
],
deps = [
interop_deps = [
"//packages/core/testing",
"@npm//@types/jasmine",
"@npm//@types/node",
],
)

View file

@ -1,34 +1,39 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "esbuild", "http_server", "protractor_web_test_suite")
load("//tools:defaults2.bzl", "ng_project", "ts_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "forms_examples",
srcs = glob(
["**/*.ts"],
exclude = ["**/*_spec.ts"],
),
deps = [
"//packages/core",
"//packages/forms",
interop_deps = [
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/router",
"//packages/zone.js/lib",
"@npm//rxjs",
],
deps = [
"//:node_modules/rxjs",
"//packages/core:core_rjs",
"//packages/forms:forms_rjs",
"//packages/router:router_rjs",
],
)
ts_library(
ts_project(
name = "forms_e2e_tests_lib",
testonly = True,
srcs = glob(["**/e2e_test/*_spec.ts"]),
tsconfig = "//packages/examples:tsconfig-e2e.json",
deps = [
"//packages/examples/test-utils",
interop_deps = [
"//packages/private/testing",
"@npm//@types/jasminewd2",
"@npm//protractor",
],
tsconfig = "//packages/examples:tsconfig_e2e",
deps = [
"//:node_modules/@types/jasminewd2",
"//:node_modules/protractor",
"//packages/examples/test-utils:test-utils_rjs",
],
)

View file

@ -1,16 +1,18 @@
load("//tools:defaults.bzl", "ng_module")
load("//tools:defaults2.bzl", "ng_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "platform_browser_examples",
srcs = glob(["**/*.ts"]),
deps = [
interop_deps = [
"//packages/compiler",
"//packages/core",
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
],
deps = [
"//packages/core:core_rjs",
],
)
filegroup(

View file

@ -1,16 +1,18 @@
load("//tools:defaults.bzl", "ng_module")
load("//tools:defaults2.bzl", "ng_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "router",
srcs = glob(
["**/*.ts"],
),
deps = [
"//packages/core",
interop_deps = [
"//packages/platform-browser",
"//packages/router",
],
deps = [
"//packages/core:core_rjs",
"//packages/router:router_rjs",
],
)

View file

@ -1,19 +1,22 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module")
load("//tools:defaults.bzl", "esbuild", "http_server")
load("//tools:defaults2.bzl", "ng_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "router_activated_route_examples",
srcs = glob(
["**/*.ts"],
),
deps = [
"//packages/core",
"//packages/platform-browser",
interop_deps = [
"//packages/platform-browser-dynamic",
"//packages/router",
"//packages/zone.js/lib",
"@npm//rxjs",
"//packages/platform-browser",
],
deps = [
"//:node_modules/rxjs",
"//packages/core:core_rjs",
"//packages/router:router_rjs",
],
)

View file

@ -1,17 +1,18 @@
load("//tools:defaults.bzl", "jasmine_node_test", "karma_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "jasmine_node_test", "karma_web_test_suite")
load("//tools:defaults2.bzl", "ts_project")
package(default_visibility = ["//visibility:public"])
ts_library(
ts_project(
name = "test_lib",
testonly = True,
srcs = glob(["**/*.spec.ts"]),
deps = [
"//packages/common",
"//packages/core",
"//packages/core/testing",
"//packages/router",
"//packages/router/testing",
"//packages/common:common_rjs",
"//packages/core:core_rjs",
"//packages/core/testing:testing_rjs",
"//packages/router:router_rjs",
"//packages/router/testing:testing_rjs",
],
)

View file

@ -1,32 +1,37 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "esbuild", "http_server", "protractor_web_test_suite")
load("//tools:defaults2.bzl", "ng_project", "ts_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "sw_push_examples",
srcs = glob(
["**/*.ts"],
exclude = ["**/*_spec.ts"],
),
deps = [
"//packages/core",
interop_deps = [
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/service-worker",
"//packages/zone.js/lib",
],
deps = [
"//packages/core:core_rjs",
"//packages/service-worker:service-worker_rjs",
],
)
ts_library(
ts_project(
name = "sw_push_e2e_tests_lib",
testonly = True,
srcs = glob(["**/e2e_test/*_spec.ts"]),
tsconfig = "//packages/examples:tsconfig-e2e.json",
deps = [
"//packages/examples/test-utils",
interop_deps = [
"//packages/private/testing",
"@npm//@types/jasminewd2",
"@npm//protractor",
],
tsconfig = "//packages/examples:tsconfig_e2e",
deps = [
"//:node_modules/@types/jasminewd2",
"//:node_modules/protractor",
"//packages/examples/test-utils:test-utils_rjs",
],
)

View file

@ -1,32 +1,37 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "esbuild", "http_server", "protractor_web_test_suite")
load("//tools:defaults2.bzl", "ng_project", "ts_project")
package(default_visibility = ["//visibility:public"])
ng_module(
ng_project(
name = "sw_registration_options_examples",
srcs = glob(
["**/*.ts"],
exclude = ["**/*_spec.ts"],
),
deps = [
"//packages/core",
interop_deps = [
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/service-worker",
"//packages/zone.js/lib",
],
deps = [
"//packages/core:core_rjs",
"//packages/service-worker:service-worker_rjs",
],
)
ts_library(
ts_project(
name = "sw_registration_options_e2e_tests_lib",
testonly = True,
srcs = glob(["**/e2e_test/*_spec.ts"]),
tsconfig = "//packages/examples:tsconfig-e2e.json",
deps = [
"//packages/examples/test-utils",
interop_deps = [
"//packages/private/testing",
"@npm//@types/jasminewd2",
"@npm//protractor",
],
tsconfig = "//packages/examples:tsconfig_e2e",
deps = [
"//:node_modules/@types/jasminewd2",
"//:node_modules/protractor",
"//packages/examples/test-utils:test-utils_rjs",
],
)

View file

@ -1,12 +1,12 @@
load("//tools:defaults.bzl", "ts_library")
load("//tools:defaults2.bzl", "ts_project")
package(default_visibility = ["//visibility:public"])
ts_library(
ts_project(
name = "test-utils",
srcs = ["index.ts"],
deps = [
"@npm//@types/selenium-webdriver",
"//:node_modules/@types/selenium-webdriver",
],
)

View file

@ -1,14 +1,14 @@
load("//tools:defaults.bzl", "ts_library")
load("//tools:defaults2.bzl", "ts_project")
package(default_visibility = ["//visibility:public"])
ts_library(
ts_project(
name = "testing_examples",
testonly = True,
srcs = glob(["**/*.ts"]),
tsconfig = "//packages:tsconfig-test",
deps = [
"@npm//@types/jasmine",
"@npm//@types/node",
"//:node_modules/@types/jasmine",
"//:node_modules/@types/node",
],
)

View file

@ -1,6 +1,6 @@
{
"extends": "./tsconfig-test.json",
"compilerOptions": {
"lib": ["es2015"],
"types": ["node", "jasminewd2"]
}
}

View file

@ -0,0 +1,6 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": ["jasmine"]
}
}

View file

@ -0,0 +1,3 @@
{
"extends": "../tsconfig-build.json"
}

View file

@ -1,7 +1,29 @@
load("//tools:defaults2.bzl", "ts_config")
package(default_visibility = ["//visibility:public"])
exports_files([
"tsconfig-build.json",
"tsconfig.json",
"start-server.js",
"index.html",
])
ts_config(
name = "tsconfig_build",
src = "tsconfig.json",
deps = [
"//:node_modules/@types/angular",
"//:node_modules/@types/jasmine",
"//:node_modules/tslib",
],
)
ts_config(
name = "tsconfig_e2e",
src = "tsconfig-e2e.json",
deps = [
":tsconfig_build",
"//:node_modules/@types/jasminewd2",
"//:node_modules/@types/node",
],
)

View file

@ -1,7 +0,0 @@
{
"compilerOptions": {
"importHelpers": true,
"lib": ["dom", "es2015"],
"types": ["angular"]
}
}

View file

@ -0,0 +1,7 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"lib": ["es2015"],
"types": ["node", "jasminewd2"]
}
}

View file

@ -0,0 +1,14 @@
{
"compilerOptions": {
"lib": ["dom", "es2015"],
"types": ["angular", "jasmine"],
"declaration": true,
"sourceMap": true,
"paths": {
"@angular/*": ["../../*/index"],
},
"experimentalDecorators": true,
"target": "es2015",
"moduleResolution": "node",
}
}

View file

@ -1,4 +1,5 @@
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
load("//tools:defaults.bzl", "esbuild", "http_server", "protractor_web_test_suite")
load("//tools:defaults2.bzl", "ng_project", "ts_project")
"""
Macro that can be used to create the Bazel targets for an "upgrade" example. Since the
@ -8,33 +9,53 @@ load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_
"""
def create_upgrade_example_targets(name, srcs, e2e_srcs, entry_point, assets = []):
ng_module(
#ng_module(
# name = "%s_sources" % name,
# srcs = srcs,
# deps = [
# "@npm//@types/angular",
# "@npm//@types/jasmine",
# "//packages/core",
# "//packages/platform-browser",
# "//packages/upgrade/static",
# "//packages/core/testing",
# "//packages/upgrade/static/testing",
# ],
# tsconfig = "//packages/examples/upgrade:tsconfig.json",
#)
ng_project(
name = "%s_sources" % name,
srcs = srcs,
deps = [
"@npm//@types/angular",
"@npm//@types/jasmine",
"//packages/core",
interop_deps = [
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/upgrade/static",
"//packages/core/testing",
"//packages/upgrade/static/testing",
],
tsconfig = "//packages/examples/upgrade:tsconfig-build.json",
deps = [
"//:node_modules/@types/angular",
"//:node_modules/@types/jasmine",
"//:node_modules/tslib",
"//packages/core:core_rjs",
"//packages/core/testing:testing_rjs",
"//packages/upgrade/static:static_rjs",
"//packages/upgrade/static/testing:testing_rjs",
],
tsconfig = "//packages/examples/upgrade:tsconfig_build",
)
ts_library(
ts_project(
name = "%s_e2e_lib" % name,
srcs = e2e_srcs,
testonly = True,
deps = [
"@npm//@types/jasminewd2",
"@npm//protractor",
"//packages/examples/test-utils",
interop_deps = [
"//packages/private/testing",
],
tsconfig = "//packages/examples:tsconfig-e2e.json",
deps = [
"//:node_modules/@types/jasminewd2",
"//:node_modules/protractor",
"//packages/examples/test-utils:test-utils_rjs",
],
tsconfig = "//packages/examples/upgrade:tsconfig_e2e",
)
esbuild(

View file

@ -34,6 +34,9 @@ def _determine_tsconfig(testonly):
if native.package_name().startswith("packages/common/locales/generate-locales-tool"):
return "//packages:tsconfig_test" if testonly else "//packages/common/locales/generate-locales-tool:tsconfig_build"
if native.package_name().startswith("packages/examples"):
return "//packages/examples:tsconfig_test" if testonly else "//packages/examples:tsconfig_build"
if native.package_name().startswith("packages"):
return "//packages:tsconfig_test" if testonly else "//packages:tsconfig_build"