angular icon indicating copy to clipboard operation
angular copied to clipboard

DartDevC produces too many outputs on Angular Apps

Open yury-yufimov opened this issue 5 years ago • 4 comments

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

yury-yufimov avatar Dec 12 '19 16:12 yury-yufimov

@jakemac53 @natebosch ping

DisDis avatar Dec 12 '19 16:12 DisDis

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 avatar Dec 12 '19 16:12 jakemac53

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

yury-yufimov avatar Dec 12 '19 17:12 yury-yufimov

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

jakemac53 avatar Dec 12 '19 17:12 jakemac53