angular
angular copied to clipboard
DartDevC produces too many outputs on Angular Apps
Dart SDK Version: 2.4.0
AngularDart Version: 5.3.1
build_runner: 1.7.1
build_web_compilers: 2.5.1
I've created test repo for explanation: https://github.com/yury-yufimov/angular-ddc-example
We have several repositories, that have different angular components.
Due to https://dart.dev/tools/dartdevc/faq#how-are-the-modules-created , we create entrypoints for such components at /lib
So, let's compile out project via DartDevC (I use pub global run webdev serve
)
Expected results Generated *.ddc.js files at .dart_tool/build/generated/angular_ddc_example/ are
- web/demo_component/demo_component.ddc.js
- lib/my_button.ddc.js
Actual results
- web/demo_component/demo_component.css.shim.ddc.js
- lib/my_button.ddc.js
- lib/my_button.template.ddc.js
- lib/src/my_button/my_button.ddc.js
Why is it an issue? That repo is just a sample, but in real life we have projects where developer loads hundreds (even thousands sometimes!) of *.ddc.js files at start of application and 50-60% of them are .template.ddc.js, .css.shim.ddc.js or other files from /lib/src
NB1: some of compiled files from /lib/src in those projects are "shared modules" - them are reachable from several entry-points, so, it's not an angular's issue.
NB2: web/demo_component/demo_component.css.shim.ddc.js from example is not an issue. Only one module is compiled for all dart files in web folder. It can have name of any of them
Reason https://dart.dev/tools/dartdevc/faq#how-are-the-modules-created says "One module for each Dart file that’s under lib" Actually we have not 1, but 2 such files:
- lib/my_button.dart
- (generated) lib/my_button.template.dart
So, some files become reachable from several entrypoints and compiled to "shared modules".
Workaround
I've found, that you can reduce number of generated ddc modules. Your entrypoint must import .template.dart files for all sources, defining angular components/directives/pipes
Example: uncomment imports at
https://github.com/yury-yufimov/angular-ddc-example/blob/master/lib/my_button.dart
Compiled modules will be:
- web/demo_component/demo_component.css.shim.ddc.js
- lib/my_button.ddc.js
But I doubt that can easily be used and validated in production development - too many possibilities for mistakes
@jakemac53 @natebosch ping
Ya this is a result of how the .template.dart
files are used for dependency injection I believe.
I don't think we can avoid the lib/my_button.template.dart
file, which is ultimately what is causing this.
@jakemac53 , may be something like "add all generated .dart files to bundle/module of initial .dart file and compile to same .ddc.js" ? It can be and option for "build_web_compilers|entrypoint"
Builders can't tell if a file is generated or not - and exposing that would mean also taking it into account for invalidation etc (as a part of the digest for nodes).
It would also have to happen at the module level and be configured the same across all apps (at least for a given module), but that part would probably be fine (you could use global config).