Individual module for each single component? about angular-bazel-example HOT 14 CLOSED

The error is occurring because the //src/hello-world:hello-world ng_module lists hello-world.component.ts in its srcs attribute in the build file. At build time for the //src/hello-world:hello-world ng_module, it can't determine the module for that component. The solution would be to move the hello-world.component.ts src to the ng_module of the module that actually declares it, rather than the hello-world module. One way to fix this would be to declare a ts_library containing just the hello-world component, and add it as a dep into the //src:src ng_module (while also removing hello-world.component.ts from the hello-world ng_module srcs.)

from angular-bazel-example.

@pshields What about html and scss files?
How can we add them to BUILD file without ng_module( ... ) ?
As I understood, ts_library doesn't have assets field.

ERROR: /home/webdevelopland/ABC/src/BUILD.bazel:5:1: Compiling Angular templates (ngc) //src:src failed (Exit 1)
: Unexpected value 'HelloWorldComponent in /home/webdevelopland/.cache/bazel/_bazel_locked/3e27f732521f9c121de2d9b874a4ec7f/bazel-sandbox/7524418710340864357/execroot/abc/bazel-out/k8-fast
build/bin/src/hello-world/hello-world.component.d.ts' declared by the module 'AppModule in /home/webdevelopland/.cache/bazel/_bazel_locked/3e27f732521f9c121de2d9b874a4ec7f/bazel-sandbox/7524418710340864357/execroot/abc/src/angular.module.ts'. Please add a @Pipe/@Directive/@Component annotation.
: 'hello-world' is not a known element:
1. If 'hello-world' is an Angular component, then verify that it is part of this module.
2. If 'hello-world' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<hello-world></hello-world>")

I tried to add them to //src/BUILD.bazel

But I got just an ERROR again:

ERROR: /home/webdevelopland/ABC/src/BUILD.bazel:8:14: Label '//src:hello-world/hello-world.component.html' crosses boundary of subpackage 'src/hello-world' (perhaps you meant to put the colon here: '//src/hello-world:hello-world.component.html'?)
ERROR: error loading package 'src': Package 'src' contains errors
Error running Bazel exit status 7

from angular-bazel-example.

Since the hello-world dir contains a BUILD file, it becomes a separate Bazel "package", so you need to access hello-world.component.html as a target in that package instead of listing it directly as a src.

You can add something like this to hello-world/BUILD:

// Styles and template for hello-world component
filegroup(
    name = "assets",
    srcs = [
      ":hello-world-styles",
      "hello-world.component.html"
    ]
)

then in your src ngmodule, point to the new assets target (assets = ["//src/hello-world:assets"]).

from angular-bazel-example.

@pshields What I do wrong?
hello-world/BUILD:

package(default_visibility = ["//visibility:public"])

load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")

sass_binary(
    name = "hello-world-styles",
    src = "hello-world.component.scss",
    deps = [
        "//src/shared:colors",
        "//src/shared:fonts"
    ],
)

ts_library(
    name = "hello-world",
    srcs = [
        "hello-world.component.ts"
    ],
    tsconfig = "//src:tsconfig.json",
    deps = [
        "//src/services",
        "@rxjs"
    ]
)

filegroup(
    name = "assets",
    srcs = [
      ":hello-world-styles",
      "hello-world.component.html"
    ]
)

//src/BUILD:

ng_module(
    name = "src",
    srcs = glob(["*.ts"]),
    tsconfig = ":tsconfig.json",
    assets = ["//src/hello-world:assets"],
    deps = [
        "//src/hello-world",
        "//src/services"
    ]
)

# ...

Error:

ERROR: /home/webdevelopland/ABC/src/BUILD.bazel:5:1: Compiling Angular templates (ngc) //src:src failed (Exit 1)
: Unexpected value 'HelloWorldComponent in /home/webdevelopland/.cache/bazel/_bazel_locked/3e27f732521f9c121de2d9b874a4ec7f/bazel-sandbox/9179799737918059617/execroot/abc/bazel-out/k8-fastbuild/bin/src/hello-world/hello-world.component.d.ts' declared by the module 'AppModule in /home/webdevelopland/.cache/bazel/_bazel_locked/3e27f732521f9c121de2d9b874a4ec7f/bazel-sandbox/9179799737918059617/execroot/abc/src/angular.module.ts'. Please add a @Pipe/@Directive/@Component annotation.
: 'hello-world' is not a known element:
1. If 'hello-world' is an Angular component, then verify that it is part of this module.
2. If 'hello-world' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<hello-world></hello-world>")

from angular-bazel-example.

That problem might be that the selector is hello-world-app, not hello-world.

Here is a commit where I got it building in the way I was imagining: pshields@b08f6be

from angular-bazel-example.

@pshields Thank you so much for your work!
I added filegroup( ... ) to your example and it's launched!

But... I'm not sure that's optimal way.

1. hello-world.component.ts is situated in src. If we have 100 components, will all they are situated in src?
   I tried to replace the component file to somewhere, but the app just doesn't want to work in this way.
2. We still have empty hello-world.module.ts without any sense. Looks like a crutch.

from angular-bazel-example.

@webdevelopland yeah, I agree that that's not the optimal project structure. I just wanted to explain how it's possible to move the component to other directories. You can specify the components wherever you want, just make sure they're declared in the correct NgModules and that the Bazel rules reflect the dependencies correctly. You could even delete HelloWorldModule in my example since it's not being used anymore. And you can put more than one component in a directory or ng_module if you want.

Bazel is pretty flexible about where all of the files live, but keep in mind that if you declare your component in a separate Bazel package than the module, there is some overheard as described earlier to model the dependencies correctly.

Here's one way to potentially do it:

- foo_module/
  - BUILD (ng_module "foo_module" declared here)
  - component_a/
    - BUILD (ts_library, sass_binary, assets filegroup declared here)
    - component.ts
    - component.html
    - component.scss
  - component_b/
    - BUILD (ts_library, sass_binary, assets filegroup declared here)
    - component.ts
    - component.html
    - component.scss

(Imagine a similar structure for the other modules, which would be sibling directories to foo_module.)

In that example, since each component is in its own Bazel package, you have to remember to add each components' ts_library target to the ng_module's deps, and add the each components' assets target to the ng_module's assets list.

from angular-bazel-example.

@pshields I found a way to create component without extra module:
example-for-pshields@ d5848ed

But the problem is there should be no BUILD file in the folder with the component.
If to add at least empty BUILD.bazel file, then the error comes:

ERROR: /home/webdevelopland/angular-bazel-example/src/BUILD.bazel:7:12: Label '//src:hello-world/hello-world.component.ts' crosses boundary of subpackage 'src/hello-world' (perhaps you meant to put the colon here: '//src/hello-world:hello-world.component.ts'?)
ERROR: error loading package 'src': Package 'src' contains errors
Error running Bazel exit status 7

ts_library doesn't fix the issue. I tried over 9000 variations and no success.
I guess a component has to be added to ng_module src.

from angular-bazel-example.

One more example which actually works:
example-for-pshields@ 8742d8b

This time html & scss files are provided. deps to other directories too.
But it still looks dully:

- hello-world/
  - component/
    - hello-world.component.ts
  - build/
    - BUILD.bazel
    - hello-world.component.html
    - hello-world.component.scss

BUILD file just can't be situated with component or in parent folder to it. I don't know what's wrong here.
@pshields Do you have any idea?

from angular-bazel-example.

Sorry you're running into trouble on this. I think we're running into a bug. I tried putting together an example like I described previously and I got a build error about Unexpected value 'ComponentA[...]' declared by the module 'FooModule[...]'. Please add a @Pipe/@Directive/@Component annotation. It looks to me like the decorator is getting stripped out before the ng_module target is built. I've logged #93.

For what it's worth, I spent a few weeks trying to build my project with Bazel, but after running into several issues, I decided to stick with a known-working build system (Angular CLI) until the Bazel path is more well-trodden. I'm a fan of Bazel, but the Angular integration is still so preliminary that there are lots of little issues like these keeping developers from being productive quickly. Of course I'm still grateful for all of the work @alexeagle and others are doing on this project, and I'm look forward to switching my Angular projects to Bazel in the future.

from angular-bazel-example.

Thanks @pshields for helping users out, I really appreciate that!

@webdevelopland as I said in #93, the srcs of a ts_library should never import from '@angular/*' - as soon as you have such an import, you should make it an ng_module rule. That's true even if there isn't an @NgModule-decorated class in the sources. ng_module rule really just means "run the Angular compiler on this so that the decorator metadata is available later in the build".

Filed bazelbuild/rules_typescript#153 to make that guidance available in the place you need it (the output of the tool you used in error)

Please feel free to file issues for other times when a better error message would have gotten you un-stuck. Ideally, tell me what mistake you made and what the error should have said that would have explained it.

from angular-bazel-example.

Yeah, I was wrong about ts_library being the right approach - sorry @webdevelopland. Still, we need to resolve whether or not it's working intended that ng_module fails due to lack of an immediate Angular module declaring the component. If it is working as intended, that could make directory layout difficult, since it would prevent per-component Bazel packages unless you were wiling to add an NgModule for each component.

from angular-bazel-example.

@alexeagle what does '@angular/*' mean? It looks like node_module, but components aren't situated in node_modules. Did you mean we can't to add angular classes with decorators by ts_library?
But what about services? They have decorators too & it works with ts_library.

@alexeagle Do you have any ideas related to the issue?
We still don't have a good way to create components without an extra module.
For some reason, ABC crashes if a component is situated with BUILD.bazel file, which doesn't describe ng_module of the component.
87#issuecomment-366754346

from angular-bazel-example.

I think the remaining work to resolve this is in #93
please re-open if there's still an issue.

from angular-bazel-example.