Unable to import library from node_modules about angular-bazel-example HOT 16 CLOSED

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.

from angular-bazel-example.

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.

from angular-bazel-example.

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!

from angular-bazel-example.

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

from angular-bazel-example.

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

from angular-bazel-example.

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

from angular-bazel-example.

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

from angular-bazel-example.

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.

from angular-bazel-example.

Hi @alexeagle hope the integration work is progressing well?

from angular-bazel-example.

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

from angular-bazel-example.

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

from angular-bazel-example.

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.

from angular-bazel-example.

@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?

from angular-bazel-example.

@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.

from angular-bazel-example.

@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.

from angular-bazel-example.

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

from angular-bazel-example.