Updated to latest npm packages (Webpack 3, aspnet prerendering 3 etc.,).

Added bundle analyzer to visualize & investigate the modules client/browser bundle

@davidsekar are you sure commenting out resolve: { mainFields: ['main'] }, is the way to ensure server size bundles are created properly with Lazy loading? What about module-map-ngfactory-loader see this angular/universal#741 (comment)

@naveedahmed1 You can see the comments provided in the same thread.

angular/universal#741 (comment)

there are many ways to solve this. One as you mentioned is replacing NgModuleFactoryLoader but if you're using webpack you can simply include angular into your webpack bundle which allows webpack to replace the System.import symbol.

It works well with this PR, since we are using webpack... I can confirm that
lazy loaded routes are generated on ClientApp/dist as expected.

Further, refreshing the page from the lazy routes e.g., http://localhost:5000/lazy generates all the HTML/content on the server side without issues.

And what about the bundle size? the main-server is ~13mb rite? Which is huge and will defiantly have performance issues when deployed on server especially in case of heavy traffic websites.

Server bundle is really a non-optimized pack of all required files
e.g.,

1. It is not minified and has lot of comments

(function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// object to store loaded chunks
/******/ 	// "0" means "already loaded"
/******/ 	var installedChunks = {
/******/ 		1: 0
/******/ 	};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
....
/******/ 		};

2. Based on this repo, a production server bundle has complete 'ngx-bootstrap', 'angular', 'bootstrap.css'. in non-minified state. So it is expected to appear huge where as, when compiled to native code by node- V8 engine (comments and spaces doesn't matter any more).

Size really does matter in the network transfers on the client/browser side.

3. Server bundle has inline-source-maps enabled for source debugging.
   look for following base64 encoded sources (but this really doesn't affect the node script execution in any way, as they are are ignored)
   //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAgMDdlMjRlNmU3

This is great David thank you! Webpack 3.x and such were definitely much needed :)

I'll give this a test spin just to make sure it's all working!

Thank you so much @davidsekar for the explanation. Can you please confirm if tree shaking is applied on the server bundle? Another thing, can we use @angular-devkit/build-optimizer to further optimize bundles both client and server side bundles? If we compare the size of the client side bundles generated through this repo with the bundles generated through Angular CLI, there is a huge difference, in my case bundles generated through Angular CLI are ~4 Mb whereas through this repo, the generated bundles for client side are over 7 mb.

@naveedahmed1
Size of the server bundle doesn't mean anything as it will be compiled to native code.

But as per the request, to avoid confusion I've enabled webpack.optimize.UglifyJsPlugin() on server bundle too. This has reduced the bundle size Server bundle size uglified

@davidsekar sounds great! One more that if it could be added. Currently the names of the files chunks doesn't contain any hash. Angular CLI automatically appends hash with file name to avoid any stale content caching issue. Can this be enabled for this repo as well?

Minifying server bundle broke preboot init(). still checking...

For me its working perfectly, I don't have ngx-bootstrap but material2 instead.

1. I have disabled mangling and compression (unsafe) for the server bundle, as it causes issue for preboot to create replay events scripts.
   Now the bundle size is approx 2.9 MB, but this is fine considering everything works as expected.

@naveedahmed1 : Preboot error will happen if you have the latest code from this repository, introduced in following PR
#401

2. Duplicated Bootstrap css is now removed from the vendor bundle
   Bootstrap CSS duplicated #415

I've already implemented webpack config changes to add Hash values to lazy chunks in my project based on this repo (hashed names are only for production builds, as it caused issue with HMR in dev).

But I don't want those changes also to be bundled in this PR, as it causes issues for the repo maintainers to validate.

Can we merge this one in @davidsekar ? Sorry I've been away, unbelievably busy the past week+
TS 2.5 didn't cause any issues with 4.x?

Yeah good idea, I'll merge this in when you let me know we can do separate ones for any other great perf improvements!

@davidsekar ssr in my project is also inspired from this repo (latest version) but I don't see any issue with compression. There must be some external library most probably bootstrap lib that would be breaking.

@naveedahmed1 When mangling or compression is ON, I see following error
preboot uglifyplugin issue

So I think it is bit more safe this way. Thanks for your feedback and time checking this PR :)

@MarkPieszak All features along with Signalr chat system is working fine.

I just see following warning, which is related to unresolved parameters that may become an error in Angular 5

Warning: Can't resolve all parameters for SignalR in D:/OSP/aspnetcore-angular2-universal-fork/node_modules/ng2
-signalr/src/services/signalr.d.ts:

Excellent merged it for now, let's get latest and make sure everything works now just incase 🍻
Great work @davidsekar ! 👍

@davidsekar will this project not benefit from Webpack 3 scope hoisting?

https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

I didn't see it in the webpack config.

module.exports = { 
 plugins: [
 new webpack.optimize.ModuleConcatenationPlugin()
 ]
};

@davidsekar preboot doesn't work for me as well with enabled compress...

@KhalipskiSiarhei Please use the webpack config from master.

Unsafe Compression and mangling are disabled for main-server bundle to fix issue with preboot.
https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/ec03396a97aa6ff6f583678bca03057b369864a1/webpack.config.js#L83-L86

@jrmcdona
This PR was to fix the lazy load issue...

Yes, scope hoisting is awesome & should be incorporated through another PR