WIP: Example of using @auth0/angular-jwt npm package

[gregmagolan]

Example of usage of @auth0/angular-jwt for issue #291.

This is a WIP. #291 was based on an older version of this example when angular/angular was still build from source. I've based this example on the latest. The error observed in #291 is not seen here but there are a few other issues with the @auth0/angular-jwt npm package that need resolving before it can be used with Bazel.

---

1. There is an rxjs deep import that breaks bundling.

ERROR: /Users/greg/google/angular-bazel-example/src/BUILD.bazel:146:1: Bundling JavaScript src/bundle_chunks_es2015 [rollup] failed (Exit 1) rollup failed: error executing command bazel-out/host/bin/external/build_bazel_rules_nodejs/internal/rollup/rollup --config bazel-out/darwin-fastbuild/bin/src/_bundle.rollup.conf.js --output.dir ... (remaining 3 argument(s) skipped)

Use --sandbox_debug to see verbose messages from the sandbox
[!] Error: 'from' is not exported by bazel-out/darwin-fastbuild/bin/src/bundle.es6/external/npm/node_modules/rxjs/internal/observable/from.js
https://rollupjs.org/guide/en#error-name-is-not-exported-by-module-
bazel-out/darwin-fastbuild/bin/src/bundle.es6/external/npm/node_modules/@auth0/angular-jwt/src/jwt.interceptor.js (4:9)
2: import { JwtHelperService } from './jwthelper.service';
3: import { JWT_OPTIONS } from './jwtoptions.token';
4: import { from } from "rxjs/internal/observable/from";
            ^
5: import { mergeMap } from 'rxjs/operators';
6: import { parse } from 'url';
Error: 'from' is not exported by bazel-out/darwin-fastbuild/bin/src/bundle.es6/external/npm/node_modules/rxjs/internal/observable/from.js

Not 100% why rollup_bundle is failing but in any case the import needs to be changed to: import { from } from "rxjs" which may require updating to a newer rxjs. The deep import wouldn't work in devmode anyway.

---

2. @auth0/angular-jwt package.json main points to an unnamed UMD bundle: "main": "bundles/core.umd.js",:

define&&define.amd?define(["@angular/core","@angular/common/http","rxjs/operators","rxjs/internal/observable/from"]

bundles/core.umd.js gets automatically picked up by ts_devserver as the npm package looks like its in APF (angular package format). However, because the UMD bundle is not named it breaks devmode at runtime:

Uncaught Error: Mismatched anonymous define() module: function(t,e,r,n){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},r.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return...

@kyliau I think we should update the check on APF to check if the umd.js file is named-AMD or named-UMD.

// cc @alexeagle @mgechev

[alexeagle]

moving this repo to rules_nodejs in bazel-contrib/rules_nodejs#1124
please reopen pull requests there