gregmagolan · Apr 2, 2019 · Apr 2, 2019 · Apr 2, 2019
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
         "@angular/platform-browser-dynamic": "8.0.0-beta.10",
         "@angular/router": "8.0.0-beta.10",
         "@ngrx/store": "7.4.0",
+        "date-fns": "^1.30.1",
         "rxjs": "6.4.0",
         "systemjs": "0.21.6",
         "tslib": "1.9.3",
@@ -35,9 +36,11 @@
         "@bazel/karma": "0.27.9",
         "@types/jasmine": "3.3.12",
         "@types/node": "6.14.4",
+        "browserify": "^16.2.3",
         "clang-format": "1.2.4",
         "core-js": "2.6.5",
         "husky": "0.14.3",
+        "named-amd": "^1.0.0",
         "protractor": "6.0.0",
         "typescript": "3.3.3333"
     },
@@ -48,7 +51,9 @@
         "e2e": "bazel test //e2e:all",
         "test": "bazel test //src/...",
         "benchmark": "ibazel-benchmark-runner //src:devserver src/hello-world/hello-world.component.ts --url=http://localhost:5432",
-        "postinstall": "ngc -p angular-metadata.tsconfig.json",
+        "postinstall": "ngc -p angular-metadata.tsconfig.json && yarn browserify-date-fns",
+        "// 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",
+        "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",
         "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",
         "bazel:lint": "yarn bazel:format --lint=warn",
         "bazel:lint-fix": "yarn bazel:format --lint=fix",

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

diff --git a/src/hello-world/BUILD.bazel b/src/hello-world/BUILD.bazel
@@ -34,6 +34,7 @@ ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/router",
+        "@npm//date-fns",
     ],
 )
 
@@ -118,6 +119,11 @@ ts_web_test_suite(
         "@npm//node_modules/@angular/router:bundles/router.umd.js",
         "@npm//node_modules/@angular/router:router.ngfactory.js",
         "@npm//node_modules/@angular/router:router.ngsummary.js",
+        # We are manaully adding a browserify generated named UMD date-fns bundle here that
+        # was generated in our package.json postinstall step. This is a temporary work-around
+        # to get commonjs modules & npm packages working with ts_web_test_suite. A more ergonomic
+        # solution is planned for Angular v8. See https://github.com/bazelbuild/rules_nodejs/issues/646.
+        "@npm//node_modules/date-fns:date-fns.umd.js",
         "@npm//node_modules/tslib:tslib.js",
     ],
     # do not sort

diff --git a/src/hello-world/hello-world.component.html b/src/hello-world/hello-world.component.html
@@ -7,6 +7,7 @@ <h1>Home</h1>
 
   <mat-card-content>
     <mat-form-field><input matInput [(ngModel)]="name"/></mat-form-field>
+    <p>Today is {{ date }}</p>
   </mat-card-content>
 
   <mat-card-footer>

diff --git a/src/hello-world/hello-world.component.ts b/src/hello-world/hello-world.component.ts
@@ -1,4 +1,6 @@
-import {Component, NgModule} from '@angular/core';
+import {Component} from '@angular/core';
+import {format} from 'date-fns'
+
 import {msg} from '../lib/file';
 
 @Component({
@@ -8,4 +10,5 @@ import {msg} from '../lib/file';
 })
 export class HelloWorldComponent {
   name: string = msg;
+  date: string = format(new Date(), 'MMMM D, YYYY');
 }