Comments (8)
@pshields At the moment, the Module is the unit of compilation with Angular. The first party stuff that packages a bunch of components (Material) gathers small handfuls of closely related components into modules; this also seems to match the way components are most built and used in large apps, typically not one at a time but in small groups.
I can't speak for the future, whether some later re-factoring might make these ideas obsolete, but for the moment I don't think the design of Angular is aimed at the notion of having a bunch of free-floating components that you package up into modules at the point of use.
from angular-bazel-example.
ts_library
doesn't produce Angular metadata outputs, so we lose any information about the decorators. The only outputs are .js and .d.ts and these are both lossy with respect to the analysis needed by the angular compiler.
At google, we just mechanically change any ts_library
that depends on Angular into an ng_module
. That's easy for us to do, because Angular has to appear in the deps
. In open-source, you can depend on anything in node_modules without listing it in deps
but we could still have a check that fails compilation of a ts_library
if it sees an import {} from '@angular/*'
from angular-bazel-example.
Thanks Alex. There's a problem with turning the ts_library into an ng_module; if we do that, we get e.g. Cannot determine the module for class ComponentA
errors on the child ng_module targets (example repro), since the components aren't declared by an Angular module at that point. In that example, the //src/foo_module/component_a:component_a
ng_module contains only the component declaration for ComponentA
. FooModule, which declares ComponentA, is declared in the parent directory foo_module
's ng_module. This mirrors the original issue @webdevelopland ran into in #87. So is that a bug? Or is it impossible to define a component in one ng_module target and declare it as part of an Angular module in a separate ng_module target? That would seem to make it impossible to define per-component Bazel packages / BUILD rules, unless you give each component a corresponding NgModule that declares it.
from angular-bazel-example.
from angular-bazel-example.
We should do two things to close this:
- give an error when a
ts_library
uses an Angular decorator, it should have been anng_module
- an
ng_module
rule without an@NgModule
should error explaining that you can only compile one or more@NgModule
s, and need to re-organize your code so that every Bazel package has one
from angular-bazel-example.
Thanks Alex. I agree with those two AIs to make it easier for developers to catch this class of problem and learn how to fix it.
Longer-term, is there any chance of, say, an ng_component
rule that could allow for independent compilation of a component without knowing its module? Or would it be possible to modify ts_library to preserve the information needed by the Angular compiler?
The developer experience of not being able to have per-component build packages seems suboptimal. Defining "leaf node" component packages, and hooking them up in a parent ng_module, is a pattern I'd often want to use---especially while there is a need for other per-component build rules such as sass_binary.
from angular-bazel-example.
Currently the NgModule holds some of the context the compiler needs to resolve things like selectors in the component it compiles.
One of the goals with Ivy is that compilation of a component is local - this would mean NgModule becomes optional and the constraint we're discussing will go away. Targetted for Angular v7.
from angular-bazel-example.
moved to angular/angular#32652
from angular-bazel-example.
Related Issues (20)
- Remove need for rxjs_shims HOT 2
- breakage on latest master? HOT 2
- node option about rollup_bundle
- How to enable remote execution with language servers for `TypeScriptCompile` and `AngularTemplateCompile` actions HOT 3
- What is the current state of Converting an Angular CLI workspace? HOT 1
- Question: index.html and injected js HOT 3
- Question: Debugging on upgrade HOT 2
- question: Experimental Support for Ivy in Bazel? HOT 2
- cannot be named without a reference to '../../external/npm/node_modules/@angular/animations/animations' HOT 3
- Service Worker HOT 3
- Remove ngfactory deps HOT 4
- Multiple Node Projects Single WORKSPACE FILE HOT 8
- Already install @bazel/ibazel but still not running on window HOT 4
- Cannot find nodejs when running bazel run //src:devserver HOT 2
- Cannot import with module_name only with path HOT 1
- cannot import with path mappings from tsconfig.json HOT 3
- Bazel + Ivy (--define=compile=aot) fails with TS-966002 HOT 5
- Using Bazel in Application using Library HOT 1
- importHelpers breaks ng test HOT 1
- Bazel errors when building targets with rxjs deps HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-bazel-example.