group lazy modules in console when doing ng serve

[elvisbegovic]

Versions

all

REPRO

• create more than 50 - 100 lazyload module
• run using ng serve
• You will have many number of lines in your console see example: https://gist.github.com/istiti/6b73e021896021048f6f1f9b372da5f9

Observed behavior

I think this is a very ergonomics problem to see so many output in console which have scroll:
And in many IDE your console takes often 25% of the height

In fact problem will come when you have an error which not break your "ng serve" and you edit many times a file , the cli rebuild many times and you have sometimes error at the begining of you console, you can't see it quickly, you need scroll the console to read it just because of numberous lines chunk {name.module} name.module.chunk.js () 58.7 kB [rendered]

You can see error here :

Desired behavior

I think CLI should NOT show these NOT important informations (on big project with many lazy module) because your console isn't clean and not ergonomics, not easy to use, to see if error happends.

I think these lazymodule chunk should still be here only with --verbose flag.
And if you run ng s just output the minimum informations maxmimum of 7 or 10 lines and maybe regroup lazymodule in one lines, something like :

RESULT SHOULD BE

What you think ?

[filipesilva]

I agree it's not very useful to show the bundles every time on rebuild and that it can make it hard to see errors.

If someone wants to take a look, the file where we show stats is https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/utilities/stats.ts. But remember that we'd need to do it differently for initial builds (show all) than rebuilds (show less).

[elvisbegovic]

will do it, can you please tell me how from this statsToString() method I can check if it’s initial build or rebuild?

Do you even want this behavior:
Initial build: show all
Rebuild : show less
for ˋng s —verboseˋ

And how/what should this grouped line displayed in console

Thanks

[elvisbegovic]

can you please tell here, what would you mean by "show less" do you meaning grouping all lazy modules ( number of files + total size ) somehitng like :

If yes can you just write the line that console must display ?

OR a lot easier first build console must show all then only write in console something like : "rebuild finish !"

cc/ @filipesilva @hansl

[filipesilva]

@istiti I don't think there is a good way to check if it is a initial build. Maybe what you can do is call it differently if using ng build or ng serve. That sounds like an easier approach since they are different commands and you can just add a flag to the stats function.

Regarding how to show less, that really is an open question... I think your approach of showing the number of lazy modules and the total size is pretty good. @hansl what do you think?

[elvisbegovic]

Thanks @Taha-Di-Nero , let team accept or not, imho your approach is a little bit radical. I would too go with empty return BUT showing newly added lazymodule because they are considered as « first time builded»

I mean for existing and edited files return ‘ ‘ but if durning serve you add new lazyload module and add it in a routing show them in console after rebuild.

What do you think?

[filipesilva]

I brought this up with the team yesterday and they think it's a good idea.

@istiti and @Taha-Di-Nero what do you think of showing only bundles that changed? For instance if you add a new lazy loaded chunk it would show up. But if you edit something that changes your main chunk that one would show as well. This is easy to determine because chunks that change show rendered in stats.

[elvisbegovic]

This is exactly what I mean. +1

Cc @filipesilva

[filipesilva]

What do you think of the fix in #8875?