Components: Compilation issues when using Angular Material 5.0.x/5.1.0 in an Angular/Bazel app

[pshields]

Angular Material 5.1.0 (and 5.0.x) currently encounters compilation errors when consumed from an Angular/Bazel app.

An example error is Could not resolve ./index.ngfactory from [....]/angular_bazel_example/node_modules/@angular/material/button/typings/index.d.ts.

To reproduce, run bazel build //src from https://github.com/alexeagle/angular-bazel-example/pull/63 (small repro PR.)

I've confirmed that node_modules/@angular/material/button/typings/index.ngfactory.js is present, so I'm not sure why the import can't be resolved. The error is occurring in TsCompilerAotCompilerTypeCheckHostAdapter.fromSummaryFileName, which is defined in https://github.com/angular/angular/blob/5.2.x/packages/compiler-cli/src/transformers/compiler_host.ts. One guess I had is that the summary loader may be looking for a .ts file instead of a .js file, but I couldn't tell from looking at that file whether or not that is the case.

/cc @alexeagle @jelbourn

[jelbourn]

@alexeagle we probably need to do something extra to make our packages bazel-friendly. It probably makes the most sense to wait until the ng_package rule is ready and just use that.

[adamyi]

It appears that index.ngfactory.js is not present in Bazel's sandbox dir in my case.

$ ls -lah /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/bazel-sandbox/5702975849333547229/execroot/mpstar/node_modules/@angular/material/button/typings/
total 72
drwxr-xr-x  11 adamyi  wheel   374B Jan 29 22:04 .
drwxr-xr-x   7 adamyi  wheel   238B Jan 29 22:04 ..
lrwxr-xr-x   1 adamyi  wheel   144B Jan 29 22:04 button-module.d.ts -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/button-module.d.ts
lrwxr-xr-x   1 adamyi  wheel   154B Jan 29 22:04 button-module.ngsummary.json -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/button-module.ngsummary.json
lrwxr-xr-x   1 adamyi  wheel   137B Jan 29 22:04 button.d.ts -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/button.d.ts
lrwxr-xr-x   1 adamyi  wheel   147B Jan 29 22:04 button.ngsummary.json -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/button.ngsummary.json
lrwxr-xr-x   1 adamyi  wheel   136B Jan 29 22:04 index.d.ts -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/index.d.ts
lrwxr-xr-x   1 adamyi  wheel   145B Jan 29 22:04 index.metadata.json -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/index.metadata.json
lrwxr-xr-x   1 adamyi  wheel   146B Jan 29 22:04 index.ngsummary.json -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/index.ngsummary.json
lrwxr-xr-x   1 adamyi  wheel   141B Jan 29 22:04 public-api.d.ts -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/public-api.d.ts
lrwxr-xr-x   1 adamyi  wheel   151B Jan 29 22:04 public-api.ngsummary.json -> /private/var/tmp/_bazel_adamyi/c6ce702e3f48b85fcb41d85f1378ee2d/execroot/mpstar/node_modules/@angular/material/button/typings/public-api.ngsummary.json

$ ls -lah node_modules/@angular/material/button/typings/
total 240
drwxr-xr-x  13 adamyi  staff   442B Jan 29 22:04 .
drwxr-xr-x   7 adamyi  staff   238B Jan 29 21:54 ..
-rw-r--r--   1 adamyi  staff    41B Jan 18 08:38 button-module.d.ts
-rw-r--r--   1 adamyi  staff   187B Jan 29 21:54 button-module.ngsummary.json
-rw-r--r--   1 adamyi  staff   2.6K Jan 18 08:38 button.d.ts
-rw-r--r--   1 adamyi  staff   3.3K Jan 29 21:54 button.ngsummary.json
-rw-r--r--   1 adamyi  staff    78B Jan 18 08:38 index.d.ts
-rw-r--r--   1 adamyi  staff    18K Jan 18 08:38 index.metadata.json
-rw-r--r--   1 adamyi  staff    15K Jan 29 21:54 index.ngfactory.js
-rw-r--r--   1 adamyi  staff    25K Jan 29 22:04 index.ngsummary.json
-rw-r--r--   1 adamyi  staff   261B Jan 18 08:38 public-api.d.ts
-rw-r--r--   1 adamyi  staff   2.1K Jan 29 21:54 public-api.ngsummary.json

[adamyi]

https://github.com/angular/angular/blob/master/packages/bazel/src/ng_module.bzl#L195

This is fixed if I add *.ngfactory.js there (also in node_modules rule in Bazel file). However I don't know if this is the correct way to do this. If this is ok, I can send a PR there.

[adamyi]

In the bazel app, this has the same problem as https://github.com/alexeagle/angular-bazel-example/issues/56 for the devserver (but rollup and closure are fine). I think it's better to just use Bazel dependency to build material2.

[mattem]

I know this is a work in progress, but is there an update to this issue or anything that I could do to help out (or work around)?
This is the issue I am hitting while experimenting with Bazel building our application.

[jelbourn]

We're still in the process of making out own build setup use bazel. There are unfortunately still a lot of issues to iron out.

[yamxun]

Any updates on this with https://github.com/alexeagle/angular-bazel-example/wiki/Publishing-Libraries in place? Material is one crucial thing blocking my team to switch to Bazel.

[jelbourn]

We're still working on the bazel support overall

[alexeagle]

@yamxun I think Angular v6 is a likely timeframe for this to land (early April) but we can't promise anything. Of course Angular material is one of the first libraries we'll expect to have working.

[ewhauser]

Any update on this issue? This problem still exists in Angular 6.0.4.

[yamxun]

Any updates on this?

[angular-automatic-lock-bot[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._}