1- # ASP.NET Core 2.0 & Angular 4 (+) advanced starter - with Server-side prerendering (for Angular SEO)!
1+ # ASP.NET Core 2.0 & Angular 4 (+) advanced starter - with Server-side prerendering (for Angular SEO)!
22
33<p align =" center " >
4- <img src="http://github.com/docs/architecture.png" alt="ASP.NET Core 2.0 Angular 2 + Starter" title="ASP.NET Core 2.0 Angular 2 + Starter">
4+ <img src="http://github.com/docs/architecture.png" alt="ASP.NET Core 2.0 Angular 4 + Starter" title="ASP.NET Core 2.0 Angular 4 + Starter">
55</p >
66
7- ### Harness the power of Angular 2 +, ASP.NET Core 2.0, now with SEO !
7+ ### Harness the power of Angular 4 +, ASP.NET Core 2.0, now with SEO !
88
99Angular SEO in action:
1010
1111<p align =" center " >
12- <img src =" ./docs/angular2-seo.png " alt =" ASP.NET Core Angular2 SEO " title =" ASP.NET Core Angular2 SEO " >
12+ <img src =" ./docs/angular2-seo.png " alt =" ASP.NET Core Angular4 SEO " title =" ASP.NET Core Angular4 SEO " >
1313</p >
1414
1515### What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net
1616
17- This repository is maintained by [ Angular Universal ] ( https://github.com/angular/universal ) and is meant to be an advanced starter
17+ This repository is maintained by [ Angular] ( https://github.com/angular/angular ) and is meant to be an advanced starter
1818for both ASP.NET Core 2.0 using Angular 4.0+, not only for the client-side, but to be rendered on the server for instant
19- application paints (Note: If you don't need Universal ( SSR) [ read here] ( #faq ) on how to disable it).
19+ application paints (Note: If you don't need SSR [ read here] ( #faq ) on how to disable it).
2020
2121This is meant to be a Feature-Rich Starter application containing all of the latest technologies, best build systems available, and include many real-world examples and libraries needed in todays Single Page Applications (SPAs).
2222
@@ -29,7 +29,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
2929* [ Deployment] ( #deployment )
3030* [ Upcoming Features] ( #upcoming-features )
3131* [ Application Structure] ( #application-structure )
32- * [ Universal Gotchas] ( #universal- gotchas )
32+ * [ Gotchas] ( #gotchas )
3333* [ FAQ] ( #faq---also-check-out-the-faq-issues-label )
3434* [ Special Thanks] ( #special-thanks )
3535* [ License] ( #license )
@@ -46,10 +46,10 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
4646 - RestAPI (WebAPI) integration
4747 - SQL Database CRUD demo
4848 - Swagger WebAPI documentation when running in development mode
49- - SignalR Chat demo! (Thanks to [ @hakonamatata ] ( https://github.com/hakonamatata )
49+ - SignalR Chat demo! (Thanks to [ @hakonamatata ] ( https://github.com/hakonamatata ) )
5050
5151- ** Angular 4.0.0** :
52- - Featuring Server-side rendering (Platform-Server (basically Angular Universal, but moved into Angular Core )
52+ - Featuring Server-side rendering (Platform-Server)
5353 - Faster initial paints, SEO (Search-engine optimization w Title/Meta/Link tags), social media link-previews, etc
5454 - i18n internationalization support (via/ ngx-translate)
5555 - Baked in best-practices (follows Angular style guide)
@@ -95,7 +95,9 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
9595
9696# Getting Started ?
9797
98- ** Make sure you have at least Node 6.x or higher (w / npm 3 + ) installed ! **
98+ - ** Make sure you have at least Node 6.x or higher (w / npm 3 + ) installed ! **
99+ - ** 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)**
100+
99101
100102### Visual Studio 2017
101103
@@ -261,7 +263,7 @@ The short-version is that we invoke that Node process, passing in our Request ob
261263A more detailed explanation can be found here : [ng - AspnetCore - Engine Readme ](https :// github.com/angular/universal/tree/master/modules/ng-aspnetcore-engine)
262264
263265` ` ` csharp
264- // Prerender / Serialize application (with Universal)
266+ // Prerender / Serialize application
265267var prerenderResult = await Prerenderer.RenderToString(
266268 /* all of our parameters / options / boot-server file / customData object goes here */
267269);
@@ -283,7 +285,7 @@ Take a look at the `_Layout.cshtml` file for example, notice how we let .NET han
283285 <head>
284286 <base href="/" />
285287 <!-- Title will be the one you set in your Angular application -->
286- <title>@ViewData["Title"] - AspNET.Core Angular 4.0.0 (+) Universal starter</title>
288+ <title>@ViewData["Title"] - AspNET.Core Angular 4.0.0 (+) starter</title>
287289
288290 <meta charset="utf-8" />
289291 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -320,9 +322,10 @@ Well now, your Client-side Angular will take over, and you'll have a fully funct
320322
321323----
322324
323- # Universal " Gotchas"
325+ # " Gotchas"
326+ - 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)
324327
325- > When building Universal components in Angular 2 there are a few things to keep in mind .
328+ > When building components in Angular 4 there are a few things to keep in mind .
326329
327330 - ** ` window ` ** , ** ` document ` ** , ** ` navigator ` ** , and other browser types - _do not exist on the server_ - so using them , or any library that uses them (jQuery for example ) will not work . You do have some options , if you truly need some of this functionality :
328331 - If you need to use them , consider limiting them to only your client and wrapping them situationally . You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server .
@@ -364,7 +367,7 @@ constructor(element: ElementRef, renderer: Renderer) {
364367
365368# FAQ - Also check out the [FAQ Issues label ](https :// github.com/MarkPieszak/aspnetcore-angular2-universal/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3Afaq)
366369
367- ### How can I disable Universal / SSR (Server - side rendering )?
370+ ### How can I disable SSR (Server - side rendering )?
368371
369372Simply comment out the logic within HomeController , and replace ` @Html.Raw(ViewData["SpaHtml"]) ` with just your applications root
370373AppComponent tag (" app" in our case ): ` <app></app> ` .
@@ -373,16 +376,16 @@ AppComponent tag ("app" in our case): `<app></app>`.
373376
374377### How do I have code run only in the Browser ?
375378
376- Check the [Universal Gotchas ](#universal - gotchas ) on how to use ` isPlatformBrowser() ` .
379+ Check the [Gotchas ](#gotchas ) on how to use ` isPlatformBrowser() ` .
377380
378381### How do I Material2 with this repo ?
379382
380- You ' ll either want to remove SSR for now, or wait as support should be coming to handle Universal/ platform-server rendering.
383+ You ' ll either want to remove SSR for now, or wait as support should be coming to handle platform-server rendering.
381384
382- ### How can I use jQuery and / or some jQuery plugins with Angular Universal ?
385+ ### How can I use jQuery and / or some jQuery plugins with this repo ?
383386
384387> Note : If at all possible , try to avoid using jQuery or libraries dependent on it , as there are
385- better , more abstract ways of dealing with the DOM in Angular (2 + ) such as using the Renderer , etc .
388+ better , more abstract ways of dealing with the DOM in Angular (4 + ) such as using the Renderer , etc .
386389
387390Yes , of course but there are a few things you need to setup before doing this . First , make sure jQuery
388391is included in webpack vendor file , and that you have a webpack Plugin setup for it . ` new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) `
0 commit comments