Skip to content
This repository was archived by the owner on Apr 4, 2025. It is now read-only.

Commit b70b49c

Browse files
gregmagolangregmagolan
authored
Add example of how to use an npm commonjs package like date-fns in ts_devserver & ts_web_test_suite (#343)
* Add example of how to use an npm commonjs package like date-fns in ts_devserver & ts_web_test_suite * Add comments and issue link for commonjs support
1 parent 3430e32 commit b70b49c

6 files changed

Lines changed: 867 additions & 16 deletions

File tree

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@angular/platform-browser-dynamic": "8.0.0-beta.10",
1919
"@angular/router": "8.0.0-beta.10",
2020
"@ngrx/store": "7.4.0",
21+
"date-fns": "^1.30.1",
2122
"rxjs": "6.4.0",
2223
"systemjs": "0.21.6",
2324
"tslib": "1.9.3",
@@ -35,9 +36,11 @@
3536
"@bazel/karma": "0.27.9",
3637
"@types/jasmine": "3.3.12",
3738
"@types/node": "6.14.4",
39+
"browserify": "^16.2.3",
3840
"clang-format": "1.2.4",
3941
"core-js": "2.6.5",
4042
"husky": "0.14.3",
43+
"named-amd": "^1.0.0",
4144
"protractor": "6.0.0",
4245
"typescript": "3.3.3333"
4346
},
@@ -48,7 +51,9 @@
4851
"e2e": "bazel test //e2e:all",
4952
"test": "bazel test //src/...",
5053
"benchmark": "ibazel-benchmark-runner //src:devserver src/hello-world/hello-world.component.ts --url=http://localhost:5432",
51-
"postinstall": "ngc -p angular-metadata.tsconfig.json",
54+
"postinstall": "ngc -p angular-metadata.tsconfig.json && yarn browserify-date-fns",
55+
"// browserify-date-fns": "for ts_devserver & ts_web_test_suite, create named UMD bundle of date-fns npm package with AMD name 'date-fns' and global name browserifyDateFns",
56+
"browserify-date-fns": "browserify -p [ named-amd --name date-fns ] node_modules/date-fns/index.js -s browserifyDateFns -o node_modules/date-fns/date-fns.umd.js",
5257
"bazel:format": "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-actions,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,out-of-order-load,output-group,package-name,package-on-top,positional-args,redefined-variable,repository-name,same-origin-load,string-iteration,unsorted-dict-items,unused-variable",
5358
"bazel:lint": "yarn bazel:format --lint=warn",
5459
"bazel:lint-fix": "yarn bazel:format --lint=fix",

‎src/BUILD.bazel‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ _ROOT_DIRS = [
6060

6161
# This devserver is written in Go and is super-fast.
6262
# It doesn't run any bundler or code splitter. Instead, it concatenates
63-
# UMD JavaScript code on-the-fly in-memory.
63+
# named UMD and named AMD JavaScript code on-the-fly in-memory.
6464
# This scales really well for massive codebases.
6565
ts_devserver(
6666
name = "devserver",
@@ -121,6 +121,11 @@ ts_devserver(
121121
"@npm//node_modules/@angular/material:list/typings/index.ngfactory.js",
122122
"@npm//node_modules/@angular/material:sidenav/typings/index.ngfactory.js",
123123
"@npm//node_modules/@angular/material:toolbar/typings/index.ngfactory.js",
124+
# We are manaully adding a browserify generated named UMD date-fns bundle here that
125+
# was generated in our package.json postinstall step. This is a temporary work-around
126+
# to get commonjs modules & npm packages working with ts_devserver. A more ergonomic
127+
# solution is planned for Angular v8. See https://github.com/bazelbuild/rules_nodejs/issues/646.
128+
"@npm//node_modules/date-fns:date-fns.umd.js",
124129
],
125130
# Serve these files in addition to the JavaScript bundle
126131
# The corresponding <script> or <link> tags will be injected into the index_html

‎src/hello-world/BUILD.bazel‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ ng_module(
3434
"@npm//@angular/core",
3535
"@npm//@angular/forms",
3636
"@npm//@angular/router",
37+
"@npm//date-fns",
3738
],
3839
)
3940

@@ -118,6 +119,11 @@ ts_web_test_suite(
118119
"@npm//node_modules/@angular/router:bundles/router.umd.js",
119120
"@npm//node_modules/@angular/router:router.ngfactory.js",
120121
"@npm//node_modules/@angular/router:router.ngsummary.js",
122+
# We are manaully adding a browserify generated named UMD date-fns bundle here that
123+
# was generated in our package.json postinstall step. This is a temporary work-around
124+
# to get commonjs modules & npm packages working with ts_web_test_suite. A more ergonomic
125+
# solution is planned for Angular v8. See https://github.com/bazelbuild/rules_nodejs/issues/646.
126+
"@npm//node_modules/date-fns:date-fns.umd.js",
121127
"@npm//node_modules/tslib:tslib.js",
122128
],
123129
# do not sort

‎src/hello-world/hello-world.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ <h1>Home</h1>
77

88
<mat-card-content>
99
<mat-form-field><input matInput [(ngModel)]="name"/></mat-form-field>
10+
<p>Today is {{ date }}</p>
1011
</mat-card-content>
1112

1213
<mat-card-footer>

‎src/hello-world/hello-world.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import {Component, NgModule} from '@angular/core';
1+
import {Component} from '@angular/core';
2+
import {format} from 'date-fns'
3+
24
import {msg} from '../lib/file';
35

46
@Component({
@@ -8,4 +10,5 @@ import {msg} from '../lib/file';
810
})
911
export class HelloWorldComponent {
1012
name: string = msg;
13+
date: string = format(new Date(), 'MMMM D, YYYY');
1114
}

0 commit comments

Comments
 (0)