Skip to content

Commit 642d009

Browse files
devversiondevversion
committed
refactor: switch packages/examples to ESM-compatible http server (angular#48521)
* Switches all examples to use dev-infra's canonical ESM-compatible `http_server`. * Uses ESBuild for bundling ESM into a single file, compared to having to load hundreds of individual ESM files in the browser (potential source of flakiness & slowness). PR Close angular#48521
1 parent c841da8 commit 642d009

File tree

26 files changed

+142
-114
lines changed

26 files changed

+142
-114
lines changed

‎packages/examples/common/BUILD.bazel‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
load("//tools:defaults.bzl", "ng_module", "protractor_web_test_suite", "ts_devserver", "ts_library")
1+
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
22

33
package(default_visibility = ["//visibility:public"])
44

@@ -15,6 +15,7 @@ ng_module(
1515
"//packages/platform-browser",
1616
"//packages/platform-browser-dynamic",
1717
"//packages/router",
18+
"//packages/zone.js/lib",
1819
"@npm//rxjs",
1920
],
2021
)
@@ -32,18 +33,17 @@ ts_library(
3233
],
3334
)
3435

35-
ts_devserver(
36+
esbuild(
37+
name = "app_bundle",
38+
entry_point = ":main.ts",
39+
deps = [":common_examples"],
40+
)
41+
42+
http_server(
3643
name = "devserver",
44+
srcs = ["//packages/examples:index.html"],
3745
additional_root_paths = ["angular/packages/examples"],
38-
bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
39-
entry_module = "@angular/examples/common/main",
40-
port = 4200,
41-
scripts = [
42-
"@npm//:node_modules/tslib/tslib.js",
43-
"//tools/rxjs:rxjs_umd_modules",
44-
],
45-
static_files = ["//packages/examples:index.html"],
46-
deps = [":common_examples"],
46+
deps = [":app_bundle"],
4747
)
4848

4949
protractor_web_test_suite(

‎packages/examples/common/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import 'zone.js/lib/browser/rollup-main';
10+
911
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
1012

1113
import {TestsAppModule} from './test_module';

‎packages/examples/common/start-server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const protractorUtils = require('@bazel/protractor/protractor-utils');
1010
const protractor = require('protractor');
1111

1212
module.exports = async function(config) {
13-
const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
13+
const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []);
1414
const serverUrl = `http://localhost:${port}`;
1515

1616
protractor.browser.baseUrl = serverUrl;

‎packages/examples/core/BUILD.bazel‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
load("//tools:defaults.bzl", "jasmine_node_test", "ng_module", "protractor_web_test_suite", "ts_devserver", "ts_library")
1+
load("//tools:defaults.bzl", "esbuild", "http_server", "jasmine_node_test", "ng_module", "protractor_web_test_suite", "ts_library")
22

33
package(default_visibility = ["//visibility:public"])
44

@@ -20,6 +20,7 @@ ng_module(
2020
"//packages/platform-browser-dynamic",
2121
"//packages/platform-browser/animations",
2222
"//packages/router",
23+
"//packages/zone.js/lib",
2324
"@npm//rxjs",
2425
],
2526
)
@@ -49,21 +50,17 @@ ts_library(
4950
],
5051
)
5152

52-
ts_devserver(
53+
esbuild(
54+
name = "app_bundle",
55+
entry_point = ":main.ts",
56+
deps = [":core_examples"],
57+
)
58+
59+
http_server(
5360
name = "devserver",
61+
srcs = ["//packages/examples:index.html"],
5462
additional_root_paths = ["angular/packages/examples"],
55-
bootstrap = [
56-
"//packages/zone.js/bundles:zone.umd.js",
57-
"//packages/zone.js/bundles:task-tracking.umd.js",
58-
],
59-
entry_module = "@angular/examples/core/main",
60-
port = 4200,
61-
scripts = [
62-
"@npm//:node_modules/tslib/tslib.js",
63-
"//tools/rxjs:rxjs_umd_modules",
64-
],
65-
static_files = ["//packages/examples:index.html"],
66-
deps = [":core_examples"],
63+
deps = [":app_bundle"],
6764
)
6865

6966
protractor_web_test_suite(

‎packages/examples/core/main.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import 'zone.js/lib/browser/rollup-main';
10+
import 'zone.js/lib/zone-spec/task-tracking';
11+
12+
// okd
13+
914
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
1015

1116
import {TestsAppModule} from './test_module';

‎packages/examples/core/start-server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const protractorUtils = require('@bazel/protractor/protractor-utils');
1010
const protractor = require('protractor');
1111

1212
module.exports = async function(config) {
13-
const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
13+
const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []);
1414
const serverUrl = `http://localhost:${port}`;
1515

1616
protractor.browser.baseUrl = serverUrl;

‎packages/examples/forms/BUILD.bazel‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
load("//tools:defaults.bzl", "ng_module", "protractor_web_test_suite", "ts_devserver", "ts_library")
1+
load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
22

33
package(default_visibility = ["//visibility:public"])
44

@@ -15,6 +15,7 @@ ng_module(
1515
"//packages/platform-browser",
1616
"//packages/platform-browser-dynamic",
1717
"//packages/router",
18+
"//packages/zone.js/lib",
1819
"@npm//rxjs",
1920
],
2021
)
@@ -32,18 +33,17 @@ ts_library(
3233
],
3334
)
3435

35-
ts_devserver(
36+
esbuild(
37+
name = "app_bundle",
38+
entry_point = ":main.ts",
39+
deps = [":forms_examples"],
40+
)
41+
42+
http_server(
3643
name = "devserver",
44+
srcs = ["//packages/examples:index.html"],
3745
additional_root_paths = ["angular/packages/examples"],
38-
bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
39-
entry_module = "@angular/examples/forms/main",
40-
port = 4200,
41-
scripts = [
42-
"@npm//:node_modules/tslib/tslib.js",
43-
"//tools/rxjs:rxjs_umd_modules",
44-
],
45-
static_files = ["//packages/examples:index.html"],
46-
deps = [":forms_examples"],
46+
deps = [":app_bundle"],
4747
)
4848

4949
protractor_web_test_suite(

‎packages/examples/forms/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import 'zone.js/lib/browser/rollup-main';
10+
911
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
1012

1113
import {TestsAppModule} from './test_module';

‎packages/examples/forms/start-server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const protractorUtils = require('@bazel/protractor/protractor-utils');
1010
const protractor = require('protractor');
1111

1212
module.exports = async function(config) {
13-
const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
13+
const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []);
1414
const serverUrl = `http://localhost:${port}`;
1515

1616
protractor.browser.baseUrl = serverUrl;

‎packages/examples/index.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Angular Examples</title>
6-
<base href="/">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Angular Examples</title>
6+
<base href="/" />
77

8-
<!-- Prevent the browser from requesting any favicon. This could throw off the console
8+
<!-- Prevent the browser from requesting any favicon. This could throw off the console
99
output checks. -->
10-
<link rel="icon" href="data:,">
11-
</head>
12-
<body>
13-
<example-app>Loading...</example-app>
14-
15-
<!--load location for ts_devserver-->
16-
<script src="/app_bundle.js"></script>
17-
</body>
10+
<link rel="icon" href="data:," />
11+
</head>
12+
<body>
13+
<example-app>Loading...</example-app>
14+
<script src="/app_bundle.js"></script>
15+
</body>
1816
</html>

0 commit comments

Comments
 (0)