ASP.NET Core Angular Template: app.module.client vs. app.module.server

Question

Microsoft provides a fantastic template for developing Angular (not AngularJS) in ASP.NET Core as outlined in their article "Building Single Page Applications on ASP.NET Core with JavaScriptServices".

While it's very straightforward, there is one portion of the template that caught me off guard: instead of there simply being an app.module.ts file, there are both an app.module.client.ts and an app.module.server.ts.

I failed to find anything that explains this on the web. Does anyone have any idea why there are these two separate files for the app module, what their specific uses are, how to use them, etc.?

If it helps at all, here is what the full template looks like:

I should note that ClientApp/app/models and ClientApp/app/services are two folders I added for my own purposes; they are not part of the template. Also, app.module.shared.ts is actually very straight-forward and just prevents having to write some code twice, so don't worry about it.

Here is what the two files look like:

Answer 1

Let me start by prefacing that I'm not 100% on the accuracy of this statement, but since nobody else seems to have answered, I'll give it a shot.

Microsoft SPA with Angular 2 utilized Angular Universal to do the AOT rendering. It has now been upgraded to use Angular 4, which doesn't use Angular Universal. My thought is that it instead broke up the app.module.ts into a client and server file to help with AOT rendering.

The app.module.shared.ts file is actually just a global constant that is used by app.module.client.ts and app.module.server.ts. Because it all gets rendered into a couple js files during publication, it doesn't really matter that they split up the app.module file.