Vendor Splitting Working except ngtools not creating bundles

[JohnGalt1717]

@MarkPieszak I have vendor splitting working with awesome-typescript right now. It works great and REALLY speeds up dev and even production deploys.
The problem is that @ngtools doesn't create the lazy loaded chunks. It expects them, it thinks they should be there but it never builds them.

I've simplified everything as well and would love to do a pull request to help you out with this if I can get this one issue resolved.

(I'm trying to attach my updated webpack files)

[JohnGalt1717]

(Rename this with .zip extension)

Webpack.pdf

Basically these go in the root and there is nothing else required.

I have put the ts.xxx.config files in a Typescript folder instead of the Client folder but otherwise they're identical. I also have a vendor.ts where you put all of your imports (standard ES 6 imports). It assumes that they're in the root too. Here's a sample of part of mine:

import '@angular/animations';
import '@angular/common';
import '@angular/core';
import '@angular/forms';
import '@angular/http';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/platform-server';
import '@angular/router';
import '@ng-bootstrap/ng-bootstrap';
import '@ngx-translate/core';
import '@ngx-translate/http-loader';
import 'event-source-polyfill'; //Not sure if this is really needed
import 'rxjs';
import 'zone.js';
import 'bootstrap/dist/css/bootstrap.min.css';

Once in you can use these two commands:
webpack --config webpack.config.vendor.js
webpack --progress --color

The first you run to generate the vendor stuff, the second to generate the rest of the stuff.

I've also got updates to the .csproj that automatically runs npm install, and each of those on first build as part of the build process and updated Package.json to have the right calls in it to do it as well with nice commands.

You'll see my commented out rules for @ngtools. If you comment out the awesome-typescript and put in @ngtools and the aotplugin lines again you can see the behavior if you have a lazy loaded section in your routes. (make sure you clear your dist folders before running it)

Finally, I think it's already doing it but I can't be sure. I would really love to have the vendor.js file generated in production then scan the main-xxx.js and all chunks and then strip out everything that isn't used in the vendor.js file for the actual site as it could really cut a lot of crap out.

It may be doing this but if not I'd like to figure out how to get it to work (roll up or something?) I don't have anything that needs to be tree shaked in my main site, but the vendor file sure has a ton of crap that isn't needed.

Also with AOT I think a bunch of vendor stuff from angular probably aren't needed so we can remove those too.

Didn't want to waste time porting it to your repo code unless this is useful and you haven't got a better way, but if that works, I will happily do so once this bug is fixed!

[JohnGalt1717]

Looks like this is related to this bug: angular/angular-cli#4431

[peterdobson]

HI @JohnGalt1717! Great work in getting as far as you have. Am excited at the prospect of speeding up the dev builds because it is really hindering development and deployment on my side. I tried doing what you suggested above,. Initially I had errors due to angular-router-loader and source-map-loader not being installed so installed them. Then i got errors specific to my environment (bootstrap-sass) which I manged to solve, but finally hit a brick wall with external "vendor_…":1 Uncaught ReferenceError: vendor_........ is not defined errors. I was a bit unclear as to which imports to include in vendor.ts , so did a bit of trial and error there, but to no avail.

Any pearls of wisdom you might be able to offer would be greatly appreciated!

[MarkPieszak]

Hey @JohnGalt1717 I'll take a look, thanks for looking into this one!
What were the problems you ran into so far?
Ngtools is able to handle creating lazy loaded routes etc, not sure why that issue came up.

[JohnGalt1717]

The only issue is ngtools not generating the bundles if WebDll plugin is used. Otherwise it works fine as is.

I'd rather have ngtools/webpack create css files for the app and then one for each bundle as well automatically and have it watch for changes to the source for HMR though instead of it being embedded in the .js files that are generated. The reason why is that by having the root app.css file generated and loaded you won't get white/bad looking pages while it's loading content from the .js file. But this is perfect world.

So if you can point me to where I'm going wrong with ng/tools in my config files I posted and look at the bug that I linked to and see if it's related and how to fix it, then with that one fix in this could be done and working.

[hheexx]

I have the same problem.
Probably related to angular/angular-cli#4431

But I don't have workaround.
If I remove ContextReplacementPlugin, things don't work.

[JohnGalt1717]

hahaha. If it wasn't so frustrating I'd laugh.

So I created a production webpack file that uses ngtools and doesn't vendor split for production and just put a conditional in my cshtml file for the vendor.js and .css load..

Except no matter how large I set the memory size for node it fails as soon as it hits 2 gig of memory and won't compile as a result (and it takes > 20 minutes to do so) There's literally 1000s of complaints about this online and dozens of bugs under angular about running out of memory.

So STILL no AOT and tree shaking is still BAD compared to rollup (even on small tests where It doesn't run out of memory)

Why is it so hard to create a linker and compiler for javascript when MS has it down to 50x the size of code will compile in less than 20 seconds and even a rebuild is maybe a minute?

[MarkPieszak]

Do you have a private repo or something I could look at to see why yours is taking so long?

[JohnGalt1717]

What's your email? I'll send you a zip of it (or we're on vsts for our git repo)

[JohnGalt1717]

HI @MarkPieszak did you have a chance to look at the code I sent?

[consigliory]

@MarkPieszak any news about vendor split? I'm not sure where to ask but is it still not possible to split libs?!

[JohnGalt1717]

@consigliory @MarkPieszak I believe I'm right in saying that Vendor split can't work with AOT until such time as @ngtools supports dllplugin etc. There are a ton of tickets about this.

And then of course there are all of the java heap memory issues that are plaguing webpack and Angular with @ngtools as well that need to be fixed before all of this works reliably. Hopefully these will be actually worked on and addressed. Sadly the bugs in the @angular repos don't seem to be being worked on even though this is major blocker stuff.

[MarkPieszak]

Spoke with a few of the guys, and they're aware of the webpack & heap memory AoT issues that can arise from larger apps, so I'm hoping in v5 that's coming soon some of them might be better. AoT speed is supposed to be increased! I'll try to find out more about other stuff.

@consigliory I have an hour right now so I'm trying to port some stuff over, I'll get back to you. Not sure I'll be able to get it in that quickly.

[JohnGalt1717]

Thanks for all of your hard work @MarkPieszak !