16

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.

screenshot of <code>app.module.client.ts</code> and <code>app.module.server.ts</code>

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:

full ASP.NET Core Angular template

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:

<code>app.module.client.ts</code> and <code>app.module.server.ts</code> code side-by-side

NetherGranite
  • 1,940
  • 1
  • 14
  • 42

1 Answers1

4

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.

Peter Harrison
  • 59
  • 4
  • 2
    Ah, okay. What about usage? When you declare a component for example, should it go in the client, server, or shared? What about providers? Imports? Would a good rule of thumb be to just put everything into shared? Is there a case in which one should specifically put something in one file and not in the other? – NetherGranite Jun 28 '17 at 16:06
  • 1
    I've found that if I try to add reference to a service to be used by components have to add such references into providers at both app.module.server and app.module.client. I was trying to follow https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103 (see my comment at the bottom) and had to add references to the sample services in aforementioned files. – danfer Jul 25 '17 at 22:32
  • 1
    What I ended up doing is to set at app.module.shared.ts the import of services and add them into shared's provider, than, at app.module.server and app.module.client just add references to sharedConfig.providers at providers section of the @NgModule of each one of the server and client files. This way, if need to add new service have no to do at each one of the files, just in shared. Tested with 2 different services and worked ok – danfer Jul 26 '17 at 20:15