Unable to import library from node_modules

[mattem]

One of our apps uses @angular/material, but due to angular/components#9502 we can't currently build this with Bazel. A newer app is attempting to use VMware's Clarity.

I get different errors when trying to reproduce this, it seems that the ng_module rule doesn't include ngfactory.js files as action inputs.

Error: Could not resolve ./clr-angular.ngfactory from /private/var/tmp/_bazel_matt/33fa3ed25498f03fdeb092569b0649b6/sandbox/darwin-sandbox/5/execroot/haystack/node_modules/@clr/angular/clr-angular.d.ts

Changing ng_module.bzl to include them allows the app to build, but causes the devserver to not be able to find the file, as I guess there is now a requirement for it to be served.
What is the right way to import libraries using the ng_module rules? The example repo shows the use of ngrx, but this doesn't have references to the ngfactory as part of the ngsummary.

Not sure if I should be opening issue against this repo or the angular one, happy to make an issue over there if needed.

[alexeagle]

This will get easier when we switch over to the Ivy compiler, which no longer uses summary and factory files.

In the meantime our plan is to make this more similar to what we do internally at Google, to reduce the combinations of things that need to work together. Internally we build Angular from source in Bazel rather than depend on a binary distribution. @gregmagolan has a couple of PRs out to make Material work against Angular built from source, then we'll recommend that user apps do this as well.

Note that more generally, in the NPM ecosystem there are a bunch of issues with projects shipping their compiled artifacts (eg. different users want different down-leveled language targets). If all TS projects had BUILD files, you could imagine a world where it's more typical to build your dependencies from source.

[johnbendi]

@alexeagle is @gregmagolan pull requests something we can play with right now while waiting on the Ivy compiler integration?

[alexeagle]

It would be challenging to patch together Greg's work, I'd advise to wait another week or two for that to land.

[mattem]

Are there plans or work going on to bring that experience to other @angular/* projects, as I've run into similar issues with flex-layout.

[johnbendi]

Hi @alexeagle hope the integration work is progressing well?

[PalanQu]

It would be challenging to patch together Greg's work, I'd advise to wait another week or two for that to land.

Material + Angular + Bazel has been our dream for a while. Excited to know you guys (from Google) are working on it. No rush, but what progress/track can we expect of this cause. Asking because we need to plan our company policy accordingly with it - we use Angular + Bazel @alexeagle
Thanks a lot for your help!

[alexeagle]

This repo now demonstrates building Angular from sources. I think the next step to close this issue is we should also use material components in this example.
/cc @gregmagolan

[mattem]

I gave this a quick shot, but there must be more to it

Added a reference to the material2 repo

http_archive(
    name = "material",
    url = "https://github.com/angular/material2/archive/6.4.7.zip",
    strip_prefix = "material2-6.4.7",
    sha256 = "bf85cc4040a359e0e5a16ec395a96d26eb48934df8919895c81a2a0d85f16299",
)

added button lib to the dependency list

deps = [
        "//src/hello-world",
        "//src/todos",
        "@material//src/lib/button",
        "@angular//packages/core",
        "@angular//packages/common",
        "@angular//packages/router",
    ],

But get issues compiling

bazel build --verbose_failures //src
INFO: Analysed target //src:src (0 packages loaded).
INFO: Found 1 target...
ERROR: /private/var/tmp/_bazel_matt/67baa97fab7c0f2e70cf839a768c7b6d/external/material/src/cdk/bidi/BUILD.bazel:6:1: Compiling Angular templates (ngc) @material//src/cdk/bidi:bidi failed (Exit 1): ngc-wrapped failed: error executing command
  (cd /private/var/tmp/_bazel_matt/67baa97fab7c0f2e70cf839a768c7b6d/execroot/angular_bazel_example && \
  exec env - \
  bazel-out/host/bin/external/angular/packages/bazel/src/ngc-wrapped/ngc-wrapped '--node_options=--expose-gc' @@bazel-out/darwin-fastbuild/bin/external/material/src/cdk/bidi/bidi_es5_tsconfig.json)
external/material/src/cdk/bidi/dir-document-token.ts(9,24): error TS2307: Cannot find module '@angular/common'.

Target //src:src failed to build
INFO: Elapsed time: 1.444s, Critical Path: 0.74s
INFO: 0 processes.
FAILED: Build did NOT complete successfully

[alexeagle]

Yeah I'm not surprised it has errors, fixing those is the remaining work for this issue

[mattem]

@alexeagle If there are parts the community can do, I'd be happy to contribute.

[mattem]

Out of interest I did some more poking around, see if I could get something to build. So far I've managed to get it to compile, by referencing a local material2 repo, building parts with angular from source, can successfully run bazel build //src/lib/button.

However, when I then reference this in this example project, although it compiles, there are anonymous defines in the public_index.js files that are generated, but these are only present when compiled by the reference from the example project, they are not anonymous when built in the material2 repo.

example:
angular-bazel-example/dist/bin/external/material/src/cdk/a11y/a11y_public_index.js:

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "@angular/cdk/a11y"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    tslib_1.__exportStar(require("@angular/cdk/a11y"), exports);
});

material2/dist/bin/src/cdk/a11y/a11y_public_index.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("@angular/cdk/a11y/a11y_public_index", ["require", "exports", "tslib", "@angular/cdk/a11y"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    tslib_1.__exportStar(require("@angular/cdk/a11y"), exports);
});

Hit a bit of a brick wall working out why these would be different.

[mattem]

I managed to spend a little time on this the other day and have the example app in this repo using a mat-button, building Angular Material from source.

[alexeagle]

@mattem that's awesome, I was working on that yesterday but didn't get it working. Do you have a PR on angular/material2 showing what you had to change?

[mattem]

@alexeagle I've opened two PRs angular/components#13109 and #201

It's by no means complete, I was starting to look at loading of the theme CSS.

I also wasn't really able to get to the bottom of the issue I posted above, however the issue seems to be that the typescript rules in @bazel/typescript don't add the public_api.ts files to a list somewhere, meaning in compiler_host.ts#300 it will return undefined, resulting in an anonymous define. For this to work, I simply commented that line out until I found the root cause.

[mattem]

@gregmagolan @alexeagle Awesome to see Angular Material now working with Bazel. What's the roadmap for other Angular projects, specifically Flex Layout. Once that's available we can start moving our build process for our larger applications over to Bazel 😄 As always, happy to contribute when I have time.

[alexeagle]

We just decided a couple days ago to prioritize getting the angular compiler fixes needed so that we can have normal dependencies on distributions rather than build deps from source.
Anyway this particular issue is fixed