@@ -59,7 +59,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
5959
6060- ** Webpack build system (Webpack 2)**
6161 - HMR : Hot Module Reloading/Replacement
62- - Production builds
62+ - Production builds w/ AoT Compilation
6363
6464- ** Testing frameworks**
6565 - Unit testing with Karma/Jasmine
@@ -106,7 +106,7 @@ VS2017 will automatically install all the neccessary npm & .NET dependencies whe
106106
107107Simply push F5 to start debugging !
108108
109- ** Note ** : If you get any errors after this such as ` module not found: main .server ` (or similar ), open up command line and run ` npm run build:dev ` to make sure all the assets have been properly built by Webpack .
109+ ** Note ** : If you get any errors after this such as ` module not found: boot .server ` (or similar ), open up command line and run ` npm run build:dev ` to make sure all the assets have been properly built by Webpack .
110110
111111### Visual Studio Code
112112
@@ -177,39 +177,39 @@ Here we have the *usual suspects* found at the root level.
177177- ` protractor ` - config files (e2e testing )
178178- ` tslint ` - TypeScript code linting rules
179179
180- ### / Client / - Everything Angular
180+ ### / ClientApp / - Everything Angular
181181
182182> Let ' s take a look at how this is structured so we can make some sense of it all!
183183
184- With Angular Universal , we need to split our applicatoin logic ** per platform ** so [if we look inside this folder ](./ Client ),
184+ With Angular Universal , we need to split our applicatoin logic ** per platform ** so [if we look inside this folder ](./ ClientApp ),
185185you ' ll see the 2 root files, that branch the entire logic for browser & server respectively.
186186
187- - [** Main .Browser .ts ** ](./ Client / main .browser .ts ) -
187+ - [** Boot .Browser .ts ** ](./ ClientApp / main .browser .ts ) -
188188This file starts up the entire Angular application for the Client / browser platform .
189189
190190Here we setup a few things , client Angular bootstrapping .
191191
192192You ' ll barely need to touch this file, but something to note, this is the file where you would import libraries that you **only** want
193193being used in the Browser . (Just know that you ' d have to provide a mock implementation for the Server when doing that).
194194
195- - [** Main - Server .ts ** ](./ Client / main .server .ts ) -
195+ - [** Boot . Server .ts ** ](./ ClientApp / boot .server .ts ) -
196196This file is where Angular _platform - server_ * serializes * the Angular application itself on the .NET server
197197within a very quick Node process , and renders it a string . This is what causes that initial fast paint
198198of the entire application to the Browser , and helps us get all our _SEO_ goodness :sparkles :
199199
200200-- -
201201
202- Notice the folder structure here in ` ./Client / ` :
202+ Notice the folder structure here in ` ./ClientApp / ` :
203203
204204` ` ` diff
205- + /Client /
205+ + /ClientApp /
206206
207207+ /app/
208208 App NgModule - our Root NgModule (you'll insert Components/etc here most often)
209209 AppComponent / App Routes / global css styles
210210
211211 * Notice that we have 2 dividing NgModules:
212- browser- app.module & server- app.module
212+ app.module.browser & app.module.server
213213 You'll almost always be using the common app.module, but these 2 are used to split up platform logic
214214 for situations where you need to use Dependency Injection / etc, between platforms.
215215
@@ -226,21 +226,21 @@ Note: You could use whatever folder conventions you'd like, I prefer to split up
226226` ` `
227227
228228When adding new features / components / etc to your application you ' ll be commonly adding things to the Root **NgModule** (located
229- in ` /Client /app/app.module.ts ` ), but why are there ** two ** other NgModules in this folder ?
229+ in ` /ClientApp /app/app.module.ts ` ), but why are there ** two ** other NgModules in this folder ?
230230
231231This is because we want to split our logic ** per Platform ** , but notice they both share the Common NgModule
232232named ` app.module.ts ` . When adding most things to your application , this is the only
233233place you ' ll have to add in your new Component / Directive / Pipe / etc. You' ll only occassional need to manually
234- add in the Platform specific things to either ` browser- app.module || server- app.module` .
234+ add in the Platform specific things to either ` app.module.browser || app.module.server ` .
235235
236236To illustrate this point with an example , you can see how we ' re using Dependency Injection to inject a `StorageService` that is different
237237for the Browser & Server .
238238
239239` ` ` typescript
240- // For the Browser (browser- app.module)
240+ // For the Browser (app.module.browser )
241241{ provide: StorageService, useClass: BrowserStorage }
242242
243- // For the Server (server- app.module)
243+ // For the Server (app.module.server )
244244{ provide: StorageService, useClass: ServerStorage }
245245` ` `
246246
@@ -258,14 +258,14 @@ Angular application gets serialized into a String, sent to the Browser, along wi
258258
259259-- -
260260
261- The short - version is that we invoke that Node process , passing in our Request object & invoke the ` boot- server ` file , and we get back a nice object that we pass into .NETs ` ViewData ` object , and sprinkle through out our ` Views/Shared/_Layout.cshtml ` and ` /Views/Home/index.cshtml ` files !
261+ The short - version is that we invoke that Node process , passing in our Request object & invoke the ` boot. server ` file , and we get back a nice object that we pass into .NETs ` ViewData ` object , and sprinkle through out our ` Views/Shared/_Layout.cshtml ` and ` /Views/Home/index.cshtml ` files !
262262
263263A more detailed explanation can be found here : [ng - AspnetCore - Engine Readme ](https :// github.com/angular/universal/tree/master/modules/ng-aspnetcore-engine)
264264
265265` ` ` csharp
266266// Prerender / Serialize application
267267var prerenderResult = await Prerenderer.RenderToString(
268- /* all of our parameters / options / boot- server file / customData object goes here */
268+ /* all of our parameters / options / boot. server file / customData object goes here */
269269);
270270
271271ViewData["SpaHtml"] = prerenderResult.Html;
@@ -323,6 +323,7 @@ Well now, your Client-side Angular will take over, and you'll have a fully funct
323323----
324324
325325# " Gotchas"
326+
326327- This repository uses ASP .Net Core 2.0 , which has a hard requirement on .NET Core Runtime 2.0 .0 and .NET Core SDK 2.0 .0. Please install these items from [here ](https :// github.com/dotnet/core/blob/master/release-notes/download-archives/2.0.0-download.md)
327328
328329> When building components in Angular 4 there are a few things to keep in mind .
@@ -372,7 +373,7 @@ constructor(element: ElementRef, renderer: Renderer) {
372373Simply comment out the logic within HomeController , and replace ` @Html.Raw(ViewData["SpaHtml"]) ` with just your applications root
373374AppComponent tag (" app" in our case ): ` <app></app> ` .
374375
375- > You could also remove any ` isPlatformBrowser/etc ` logic , and delete the boot - server , browser - app .module & server - app .module files , just make sure your ` boot-client ` file points to ` app.module ` .
376+ > You could also remove any ` isPlatformBrowser/etc ` logic , and delete the boot . server , app .module . browser & app .module . server files , just make sure your ` boot.browser ` file points to ` app.module ` .
376377
377378### How do I have code run only in the Browser ?
378379
@@ -433,6 +434,8 @@ Nothing's ever perfect, but please let me know by creating an issue (make sure t
433434
434435Copyright (c) 2016-2017 [Mark Pieszak](https://github.com/MarkPieszak)
435436
437+ ### Follow me online:
438+
436439Twitter: [@MarkPieszak](http://twitter.com/MarkPieszak) | Medium: [@MarkPieszak](https://medium.com/@MarkPieszak)
437440
438441----
0 commit comments