Bazel: ng test with third-party lib shipped as AMD module

[cexbrayat]

🐞 bug report

Affected Package

The issue is caused by package @angular/bazel

Is this a regression?

No

Description

When starting a new project with the Bazel schematic, and adding a third party lib like Moment.js, ng test doesn't find the library.

🔬 Minimal Reproduction

A full repro can be find here: https://github.com/cexbrayat/bazel-moment

It can be manually reproduce by creating a project with:

npm i -g @angular/baze@next
ng new bazel-moment --defaults --collection=@angular/bazel
cd bazel-moment
yarn add moment
ng g p from-now

and update the generated pipe to look like:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment_ from 'moment';
const moment = moment_;

@Pipe({
  name: 'fromNow'
})
export class FromNowPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return moment(value).fromNow();
  }

}

and use it in app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  {{ date | fromNow }}
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  date = '2019-05-05';
}

Create a require.config.js file with:

require.config({
  paths: {
    'moment': 'npm/node_modules/moment/min/moment.min'
  }
});

Update the BUILD.bazel file:

ng_module(
    name = "src",
    // ...
    deps = [
        "@npm//@angular/core",
        "@npm//@angular/platform-browser",
        "@npm//@angular/router",
        "@npm//@types",
        "@npm//rxjs",
+        "@npm//moment",
    ],
)

ts_devserver(
    // ...
    data = [
        "favicon.ico",
+        "@npm//node_modules/moment:min/moment.min.js",
    ],
    index_html = "index.html",
    deps = [
+      ":require.config.js",
      ":src",
    ],
)

Then run ng serve: it works.

Now update the pipe test:

import { FromNowPipe } from './from-now.pipe';
import * as moment_ from 'moment';
const moment = moment_;

describe('FromNowPipe', () => {
  it('should transform the input', () => {
    const pipe = new FromNowPipe();
    const date = '2012-05-05T08:02:00Z';
    const transformed = pipe.transform(date);
    expect(transformed).toBe(moment(date).fromNow());
  });
});

And run ng test.
This will fail with:

05 05 2019 15:09:14.374:INFO [HeadlessChrome 69.0.3497 (Mac OS X 10.14.4)]: Connected on socket lInpcQAp_bdRcmqoAAAA with id 66364350
HeadlessChrome 69.0.3497 (Mac OS X 10.14.4) ERROR: 'There is no timestamp for moment.js!'
05 05 2019 15:09:14.751:WARN [web-server]: 404: moment.js

I was hoping to fix it the same way used for ts_devserver:

ts_web_test_suite(
    name = "test",
    srcs = [
        "@npm//node_modules/tslib:tslib.js",
+        "@npm//node_modules/moment:min/moment.min.js",
    ],
    runtime_deps = [
        ":initialize_testbed",
    ],
    # do not sort
    bootstrap = [
        "@npm//node_modules/zone.js:dist/zone-testing-bundle.js",
        "@npm//node_modules/reflect-metadata:Reflect.js",
    ],
    browsers = [
        "@io_bazel_rules_webtesting//browsers:chromium-local",
    ],
    static_files = [
+        "@npm//node_modules/moment:min/moment.min.js",
    ],
    web_test_data = [
+        "@npm//node_modules/moment:min/moment.min.js",
    ],
    data = [
+        "@npm//node_modules/moment:min/moment.min.js",
    ],
    deps = [
+        ":require.config.js",
        ":rxjs_umd_modules",
        ":test_lib",
        "@npm//karma-jasmine",
    ],
)

but moment.js still can't be find (it now uses the require.config.js as expected, but the lib is not served despite adding it to static_files, data, web_test_data and srcs).

There is maybe a simple configuration that escapes me, but maybe this is an issue.

🔥 Exception or Error

05 05 2019 16:40:36.545:INFO [HeadlessChrome 69.0.3497 (Mac OS X 10.14.4)]: Connected on socket iPin-gPdb1-AmvgbAAAA with id 92183745
HeadlessChrome 69.0.3497 (Mac OS X 10.14.4) ERROR: 'There is no timestamp for npm/node_modules/moment/min/moment.min.js!'

05 05 2019 16:40:36.928:WARN [web-server]: 404: /npm/node_modules/moment/min/moment.min.js

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.0-rc.2
Node: 11.11.0
OS: darwin x64
Angular: 8.0.0-rc.2
... animations, bazel, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-rc.2
@angular-devkit/build-angular     0.800.0-rc.2
@angular-devkit/build-optimizer   0.800.0-rc.2
@angular-devkit/build-webpack     0.800.0-rc.2
@angular-devkit/core              8.0.0-rc.2
@angular-devkit/schematics        8.0.0-rc.2
@ngtools/webpack                  8.0.0-rc.2
@schematics/angular               8.0.0-rc.2
@schematics/update                0.800.0-rc.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

cc @kyliau as we talked about it on Slack.

[Toxicable]

This is the underlying issue here: bazel-contrib/rules_nodejs#646

[kyliau]

bazel-contrib/rules_nodejs#646 would potentially solve this. Keeping a close eye on the PR and will rerun the repro here once the PR lands.

[kyliau]

Also related to this: bazel-contrib/rules_nodejs#436

[Serginho]

@cexbrayat Did you achieve this?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}