Skip to content

Commit 1162048

Browse files
devversionjelbourn
authored andcommitted
build: serve dev-app with bazel (#16829)
* Serves the dev-app with Bazel using `ts_devserver` (windows compatible since bazelbuild/rules_typescript@4155687) * Serves dev-app with AOT mode. * ibazel can be used for watch-mode and live-reloading Currently due to limitations within the `ts_devserver` rule, livereloading with ibazel is not working. Manual reloading still works.
1 parent 9661530 commit 1162048

17 files changed

+277
-1253
lines changed

.circleci/config.yml

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -257,21 +257,6 @@ jobs:
257257

258258
- run: ./scripts/circleci/run-saucelabs-tests.sh
259259

260-
# -----------------------------------------------------------------------------------------
261-
# Job that builds the dev-app with AOT. In order to speed up this job, the release output
262-
# from the workspace storage will be attached to this job.
263-
# -----------------------------------------------------------------------------------------
264-
build_devapp_aot:
265-
<<: *job_defaults
266-
steps:
267-
- *checkout_code
268-
- *restore_cache
269-
- *yarn_download
270-
- *yarn_install
271-
- *attach_release_output
272-
273-
- run: yarn gulp ci:aot
274-
275260
# -------------------------------------------------------------------------
276261
# Job that pre-render's the universal app with `@angular/platform-server`.
277262
# This verifies that Angular Material can be rendered within Node.
@@ -548,10 +533,6 @@ workflows:
548533
jobs:
549534
- build_release_packages:
550535
filters: *ignore_presubmit_branch_filter
551-
- build_devapp_aot:
552-
filters: *ignore_presubmit_branch_filter
553-
requires:
554-
- build_release_packages
555536
- publish_snapshots:
556537
filters: *publish_branches_filter
557538
requires:

package.json

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
"build": "gulp build-release-packages",
1818
"bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable",
1919
"bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
20-
"dev-app": "gulp serve:devapp",
20+
"dev-app": "bazel run //src/dev-app:devserver",
2121
"test": "bazel test //src/... --test_tag_filters=-e2e,-browser:firefox-local --build_tag_filters=-browser:firefox-local --build_tests_only",
2222
"test-firefox": "bazel test //src/... --test_tag_filters=-e2e,-browser:chromium-local --build_tag_filters=-browser:chromium-local --build_tests_only",
2323
"lint": "gulp lint && yarn -s bazel:format-lint",
2424
"e2e": "bazel test //src/... --test_tag_filters=e2e",
25-
"deploy": "gulp deploy:devapp",
25+
"deploy": "echo 'Not supported yet. Tracked with COMP-230'",
2626
"webdriver-manager": "webdriver-manager",
2727
"breaking-changes": "gulp breaking-changes",
2828
"gulp": "gulp",
@@ -75,7 +75,6 @@
7575
"@firebase/app-types": "^0.3.2",
7676
"@octokit/rest": "^16.28.7",
7777
"@schematics/angular": "^8.2.1",
78-
"@types/browser-sync": "^0.0.42",
7978
"@types/chalk": "^0.4.31",
8079
"@types/fs-extra": "^4.0.3",
8180
"@types/glob": "^5.0.33",
@@ -93,7 +92,6 @@
9392
"@types/run-sequence": "^0.0.29",
9493
"autoprefixer": "^6.7.6",
9594
"axe-webdriverjs": "^1.1.1",
96-
"browser-sync": "^2.26.3",
9795
"chalk": "^1.1.3",
9896
"clang-format": "^1.2.4",
9997
"codelyzer": "^5.1.0",
@@ -114,7 +112,6 @@
114112
"gulp-util": "^3.0.8",
115113
"hammerjs": "^2.0.8",
116114
"highlight.js": "^9.11.0",
117-
"http-rewrite-middleware": "^0.1.6",
118115
"husky": "^1.3.1",
119116
"inquirer": "^6.2.0",
120117
"jasmine-core": "^3.3.0",

src/dev-app/BUILD.bazel

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package(default_visibility = ["//visibility:public"])
22

33
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
4+
load("@npm_bazel_typescript//:defs.bzl", "ts_devserver")
45
load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "GOOGLE_MAPS_TARGETS", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
56
load("//tools:defaults.bzl", "ng_module")
67
load("//tools:sass_generate_binaries.bzl", "sass_generate_binaries")
@@ -27,7 +28,10 @@ ng_module(
2728
"system-rxjs-operators.ts",
2829
],
2930
),
30-
assets = glob(["**/*.html"]) + [
31+
assets = glob(
32+
["**/*.html"],
33+
exclude = ["index.html"],
34+
) + [
3135
":dev_app_scss",
3236
":theme",
3337
],
@@ -63,3 +67,58 @@ sass_binary(
6367
"//src/material/core:all_themes",
6468
] + MATERIAL_EXPERIMENTAL_SCSS_LIBS,
6569
)
70+
71+
ts_devserver(
72+
name = "devserver",
73+
additional_root_paths = [
74+
"npm/node_modules",
75+
],
76+
port = 4200,
77+
static_files = [
78+
":theme",
79+
"@npm//:node_modules/@material/animation/dist/mdc.animation.js",
80+
"@npm//:node_modules/@material/auto-init/dist/mdc.autoInit.js",
81+
"@npm//:node_modules/@material/base/dist/mdc.base.js",
82+
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
83+
"@npm//:node_modules/@material/chips/dist/mdc.chips.js",
84+
"@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
85+
"@npm//:node_modules/@material/dom/dist/mdc.dom.js",
86+
"@npm//:node_modules/@material/drawer/dist/mdc.drawer.js",
87+
"@npm//:node_modules/@material/floating-label/dist/mdc.floatingLabel.js",
88+
"@npm//:node_modules/@material/form-field/dist/mdc.formField.js",
89+
"@npm//:node_modules/@material/grid-list/dist/mdc.gridList.js",
90+
"@npm//:node_modules/@material/icon-button/dist/mdc.iconButton.js",
91+
"@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js",
92+
"@npm//:node_modules/@material/linear-progress/dist/mdc.linearProgress.js",
93+
"@npm//:node_modules/@material/list/dist/mdc.list.js",
94+
"@npm//:node_modules/@material/menu-surface/dist/mdc.menuSurface.js",
95+
"@npm//:node_modules/@material/menu/dist/mdc.menu.js",
96+
"@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js",
97+
"@npm//:node_modules/@material/radio/dist/mdc.radio.js",
98+
"@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
99+
"@npm//:node_modules/@material/select/dist/mdc.select.js",
100+
"@npm//:node_modules/@material/slider/dist/mdc.slider.js",
101+
"@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js",
102+
"@npm//:node_modules/@material/switch/dist/mdc.switch.js",
103+
"@npm//:node_modules/@material/tab-bar/dist/mdc.tabBar.js",
104+
"@npm//:node_modules/@material/tab-indicator/dist/mdc.tabIndicator.js",
105+
"@npm//:node_modules/@material/tab-scroller/dist/mdc.tabScroller.js",
106+
"@npm//:node_modules/@material/tab/dist/mdc.tab.js",
107+
"@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
108+
"@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
109+
"@npm//:node_modules/@webcomponents/custom-elements/custom-elements.min.js",
110+
"@npm//:node_modules/core-js/client/core.js",
111+
"@npm//:node_modules/hammerjs/hammer.min.js",
112+
"@npm//:node_modules/moment/min/moment-with-locales.min.js",
113+
"@npm//:node_modules/rxjs/bundles/rxjs.umd.min.js",
114+
"@npm//:node_modules/systemjs/dist/system.js",
115+
"@npm//:node_modules/zone.js/dist/zone.js",
116+
"@npm//material-components-web",
117+
"index.html",
118+
"system-config.js",
119+
"system-rxjs-operators.js",
120+
],
121+
deps = [
122+
":dev-app",
123+
],
124+
)

src/dev-app/index.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,24 @@
1616
window.customElements.forcePolyfill = true;
1717
}
1818
</script>
19-
<script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
19+
<script src="@webcomponents/custom-elements/custom-elements.min.js"></script>
2020

2121
<!-- FontAwesome for mat-icon demo. -->
2222
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
2323
</head>
2424
<body>
2525
<dev-app>Loading...</dev-app>
26+
</body>
27+
<script src="core-js/client/core.js"></script>
28+
<script src="zone.js/dist/zone.js"></script>
29+
<script src="hammerjs/hammer.min.js"></script>
2630

27-
<script src="node_modules/core-js/client/core.js"></script>
28-
<script src="node_modules/systemjs/dist/system.src.js"></script>
29-
<script src="node_modules/zone.js/dist/zone.js"></script>
30-
<script src="node_modules/hammerjs/hammer.min.js"></script>
31+
<script src="systemjs/dist/system.js"></script>
32+
<script src="system-config.js"></script>
33+
<script>
34+
// Workaround until https://github.com/angular/components/issues/13883 has been addressed.
35+
var module = {id: ''};
3136

32-
<script>
33-
System.import('system-config.js').then(function () {
34-
System.import('main');
35-
}).catch(console.error.bind(console));
36-
</script>
37-
</body>
37+
System.import('main').catch(console.error.bind(console));
38+
</script>
3839
</html>

src/dev-app/main-aot.ts

Lines changed: 0 additions & 16 deletions
This file was deleted.

src/dev-app/main.ts

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

9-
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
10-
import {MainModule} from './main-module';
9+
/**
10+
* This is the main entry-point for the AOT compilation. File will be used to test AOT support.
11+
*/
12+
13+
import {platformBrowser} from '@angular/platform-browser';
14+
import {MainModuleNgFactory} from './main-module.ngfactory';
1115

12-
platformBrowserDynamic().bootstrapModule(MainModule);
16+
platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);

src/dev-app/system-config.js

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
const CDK_PACKAGES = [
10+
'a11y',
11+
'accordion',
12+
'bidi',
13+
'coercion',
14+
'collections',
15+
'drag-drop',
16+
'keycodes',
17+
'layout',
18+
'observers',
19+
'overlay',
20+
'platform',
21+
'portal',
22+
'scrolling',
23+
'stepper',
24+
'table',
25+
'text-field',
26+
'tree',
27+
];
28+
29+
const CDK_EXPERIMENTAL_PACKAGES = [
30+
'dialog',
31+
'popover-edit',
32+
'scrolling',
33+
];
34+
35+
const MATERIAL_PACKAGES = [
36+
'autocomplete', 'badge',
37+
'bottom-sheet', 'button',
38+
'button-toggle', 'card',
39+
'checkbox', 'chips',
40+
'core', 'datepicker',
41+
'dialog', 'divider',
42+
'expansion', 'form-field',
43+
'grid-list', 'icon',
44+
'input', 'list',
45+
'menu', 'paginator',
46+
'progress-bar', 'progress-spinner',
47+
'radio', 'select',
48+
'sidenav', 'slide-toggle',
49+
'slider', 'snack-bar',
50+
'sort', 'stepper',
51+
'table', 'tabs',
52+
'toolbar', 'tooltip',
53+
'tree',
54+
];
55+
56+
const GOOGLE_MAPS_PACKAGES = [
57+
'google-map',
58+
];
59+
60+
const MATERIAL_EXPERIMENTAL_PACKAGES = [
61+
'mdc-button',
62+
'mdc-card',
63+
'mdc-checkbox',
64+
'mdc-chips',
65+
'mdc-tabs',
66+
'mdc-helpers',
67+
'mdc-menu',
68+
'mdc-radio',
69+
'mdc-slide-toggle',
70+
'popover-edit',
71+
];
72+
73+
/** Bazel runfile path referring to the "src/" folder of the project. */
74+
const srcRunfilePath = 'angular_material/src';
75+
76+
/** Path mappings that will be registered in SystemJS. */
77+
const pathMapping = {};
78+
79+
/** Package configurations that will be used in SystemJS. */
80+
const packagesConfig = {};
81+
82+
// Configure all primary entry-points.
83+
configureEntryPoint('cdk');
84+
configureEntryPoint('cdk-experimental');
85+
configureEntryPoint('material');
86+
configureEntryPoint('material-experimental');
87+
configureEntryPoint('material-examples');
88+
configureEntryPoint('material-moment-adapter');
89+
90+
// Configure all secondary entry-points.
91+
CDK_PACKAGES.forEach(pkgName => configureEntryPoint('cdk', pkgName));
92+
CDK_EXPERIMENTAL_PACKAGES.forEach(pkgName => configureEntryPoint('cdk-experimental', pkgName));
93+
MATERIAL_EXPERIMENTAL_PACKAGES.forEach(
94+
pkgName => configureEntryPoint('material-experimental', pkgName));
95+
MATERIAL_PACKAGES.forEach(pkgName => configureEntryPoint('material', pkgName));
96+
GOOGLE_MAPS_PACKAGES.forEach(pkgName => configureEntryPoint('google-maps', pkgName));
97+
98+
/** Configures the specified package and its entry-point. */
99+
function configureEntryPoint(pkgName, entryPoint) {
100+
if (entryPoint === undefined) {
101+
pathMapping[`@angular/${pkgName}`] = `${srcRunfilePath}/${pkgName}`;
102+
packagesConfig[`${srcRunfilePath}/${pkgName}`] = {main: 'index.js'};
103+
} else {
104+
pathMapping[`@angular/${pkgName}/${entryPoint}`] = `${srcRunfilePath}/${pkgName}/${entryPoint}`;
105+
packagesConfig[`${srcRunfilePath}/${pkgName}/${entryPoint}`] = {main: 'index.js'};
106+
}
107+
}
108+
109+
// Configure the base path and map the different node packages.
110+
System.config({
111+
map: {
112+
'main': 'main.js',
113+
'tslib': 'tslib/tslib.js',
114+
'moment': 'moment/min/moment-with-locales.min.js',
115+
116+
'rxjs': 'rxjs/bundles/rxjs.umd.min.js',
117+
'rxjs/operators': 'system-rxjs-operators.js',
118+
119+
// MDC Web
120+
'@material/animation': '@material/animation/dist/mdc.animation.js',
121+
'@material/auto-init': '@material/auto-init/dist/mdc.autoInit.js',
122+
'@material/base': '@material/base/dist/mdc.base.js',
123+
'@material/checkbox': '@material/checkbox/dist/mdc.checkbox.js',
124+
'@material/chips': '@material/chips/dist/mdc.chips.js',
125+
'@material/dialog': '@material/dialog/dist/mdc.dialog.js',
126+
'@material/dom': '@material/dom/dist/mdc.dom.js',
127+
'@material/drawer': '@material/drawer/dist/mdc.drawer.js',
128+
'@material/floating-label': '@material/floating-label/dist/mdc.floatingLabel.js',
129+
'@material/form-field': '@material/form-field/dist/mdc.formField.js',
130+
'@material/grid-list': '@material/grid-list/dist/mdc.gridList.js',
131+
'@material/icon-button': '@material/icon-button/dist/mdc.iconButton.js',
132+
'@material/line-ripple': '@material/line-ripple/dist/mdc.lineRipple.js',
133+
'@material/linear-progress': '@material/linear-progress/dist/mdc.linearProgress.js',
134+
'@material/list': '@material/list/dist/mdc.list.js',
135+
'@material/menu': '@material/menu/dist/mdc.menu.js',
136+
'@material/menu-surface': '@material/menu-surface/dist/mdc.menuSurface.js',
137+
'@material/notched-outline': '@material/notched-outline/dist/mdc.notchedOutline.js',
138+
'@material/radio': '@material/radio/dist/mdc.radio.js',
139+
'@material/ripple': '@material/ripple/dist/mdc.ripple.js',
140+
'@material/select': '@material/select/dist/mdc.select.js',
141+
'@material/slider': '@material/slider/dist/mdc.slider.js',
142+
'@material/snackbar': '@material/snackbar/dist/mdc.snackbar.js',
143+
'@material/switch': '@material/switch/dist/mdc.switch.js',
144+
'@material/tab': '@material/tab/dist/mdc.tab.js',
145+
'@material/tab-bar': '@material/tab-bar/dist/mdc.tabBar.js',
146+
'@material/tab-indicator': '@material/tab-indicator/dist/mdc.tabIndicator.js',
147+
'@material/tab-scroller': '@material/tab-scroller/dist/mdc.tabScroller.js',
148+
'@material/text-field': '@material/textfield/dist/mdc.textfield.js',
149+
'@material/top-app-bar': '@material/top-app-bar/dist/mdc.topAppBar.js',
150+
151+
...pathMapping,
152+
},
153+
packages: {
154+
// Set the default extension for the root package, because otherwise the dev-app can't
155+
// be built within the production mode. Due to missing file extensions.
156+
'.': {defaultExtension: 'js'},
157+
158+
// Angular specific mappings.
159+
'@angular/core': {main: 'bundles/core.umd.js'},
160+
'@angular/common': {main: 'bundles/common.umd.js'},
161+
'@angular/common/http': {main: '../bundles/common-http.umd.js'},
162+
'@angular/compiler': {main: 'bundles/compiler.umd.js'},
163+
'@angular/forms': {main: 'bundles/forms.umd.js'},
164+
'@angular/animations': {main: 'bundles/animations.umd.js'},
165+
'@angular/elements': {main: 'bundles/elements.umd.js'},
166+
'@angular/router': {main: 'bundles/router.umd.js'},
167+
'@angular/animations/browser': {main: '../bundles/animations-browser.umd.js'},
168+
'@angular/platform-browser/animations': {main: '../bundles/platform-browser-animations.umd'},
169+
'@angular/platform-browser': {main: 'bundles/platform-browser.umd.js'},
170+
'@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
171+
172+
// Project specific configurations.
173+
...packagesConfig,
174+
}
175+
});

0 commit comments

Comments
 (0)