ASP.NET Core 2.1 & Angular 7(+) Advanced Starter - PWA & Server-side prerendering (for Angular SEO)!

---

<br> <p align="center"> <a href="https://trilon.io" target="_blank"> <img width="500" height="auto" src="https://trilon.io/trilon-logo-clear.png" alt="Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training"> </a> </p> <h3 align="center"> Made with :heart: by <a href="https://trilon.io">Trilon.io</a></h3>

---

Harness the power of Angular 7+, ASP.NET Core 2.1, now with SEO !

Angular SEO in action:

<p align="center"> <img src="./docs/angular2-seo.png" alt="ASP.NET Core Angular7 SEO" title="ASP.NET Core Angular7 SEO"> </p>

Angular Universal Application Architecture

<p align="center"> <img src="./docs/architecture.png" alt="ASP.NET Core 2.1 Angular 7+ Starter" title="ASP.NET Core 2.1 Angular 7+ Starter"> </p>

What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net

This repository is maintained by Trilon.io and the Angular Universal team and is meant to be an advanced starter for both ASP.NET Core 2.1 using Angular 7.0+, not only for the client-side, but to be rendered on the server for instant application paints (Note: If you don't need SSR read here on how to disable it).

This 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).

This utilizes all the latest standards, no gulp, no bower, no typings, no manually "building" anything. NPM, Webpack and .NET handle everything for you!

Join us on Gitter

Table of Contents

• Features
• Getting Started
• Deployment
• Upcoming Features
• Application Structure
• Gotchas
• FAQ
• Special Thanks
• License
• Trilon - Consulting & Training

---

Features:

These are just some of the features found in this starter!

• ASP.NET 2.1 - VS2017 support now!

  • Azure delpoyment straight from VS2017
  • Built in docker support through VS2017
  • RestAPI (WebAPI) integration
  • SQL Database CRUD demo
  • Swagger WebAPI documentation when running in development mode
  • SignalR Chat demo! (Thanks to @hakonamatata)

• Angular 7.0.0 :

  • PWA (Progressive Web App)
  • (Minimal) Angular-CLI integration
    • This is to be used mainly for Generating Components/Services/etc.
    • Usage examples:
      • ng g c components/example-component
      • ng g s shared/some-service
  • Featuring Server-side rendering (Platform-Server, aka: "Universal")
    • Faster initial paints, SEO (Search-engine optimization w Title/Meta/Link tags), social media link-previews, etc
  • i18n internationalization support (via/ ngx-translate)
  • Baked in best-practices (follows Angular style guide)
  • Bootstrap3 (with ngx-bootstrap) - (can be rendered on the server!)
    • Can be easily replaced with bootstrap4 (3 is provided for browser support)
    • Bootstrap using SCSS / SASS for easy theming / styling!

• Webpack build system (Webpack 4)

  • HMR : Hot Module Reloading/Replacement
  • Production builds w/ AoT Compilation

• Testing frameworks

  • Unit testing with Jest (Going back to Karma soon)

• Productivity

  • Typescript 2
  • Codelyzer (for Real-time static code analysis)
    • VSCode & Atom provide real-time analysis out of the box.

• ASP.NET Core 2.1

  • Integration with NodeJS to provide pre-rendering, as well as any other Node module asset you want to use.

• Azure

  • Microsoft Application Insights setup (for MVC & Web API routing)
  • Client-side Angular Application Insights integration
    • If you're using Azure simply install npm i -S @markpieszak/ng-application-insights as a dependencies.
    • Note: Make sure only the Browser makes these calls (usage info here)
    • More information here: - https://github.com/MarkPieszak/angular-application-insights

      // Add the Module to your imports 
      ApplicationInsightsModule.forRoot({
        instrumentationKey: 'Your-Application-Insights-instrumentationKey'
      })
    

• Docker

  • Built in Visual Studio F5 Debugging support
  • Uses the very light weight microsoft/dotnet image
  • Currently limited to Linux image as there is a bug with running nodejs in a container on Windows.

---

---

Getting Started?

• Make sure you have at least Node 8.11.1 or higher (w/ npm 5+) installed!
• This repository uses ASP.Net Core 2.1, which has a hard requirement on .NET Core Runtime 2.1 and .NET Core SDK 2.1. Please install these items from here

Visual Studio 2017

Make sure you have .NET Core 2.1 installed and/or VS2017 15.3. VS2017 will automatically install all the neccessary npm & .NET dependencies when you open the project.

Simply push F5 to start debugging !

Docker-Support: Change the startup project to docker-compose and press F5

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.

Visual Studio Code

Note: Make sure you have the C# extension & .NET Core Debugger installed.

The project comes with the configured Launch.json files to let you just push F5 to start the project.

# cd into the directory you cloned the project into
npm install && npm run build:dev && dotnet restore
# or yarn install

If you're running the project from command line with dotnet run make sure you set your environment variables to Development (otherwise things like HMR might not work).

# on Windows:
set ASPNETCORE_ENVIRONMENT=Development
# on Mac/Linux
export ASPNETCORE_ENVIRONMENT=Development 

Upcoming Features:

• Clean API / structure / simplify application
• Refactor to latest RxJs pipeable syntax
• Attempt to integrate with Angular-CLI fully

---

---

Deployment

Dotnet publish

Using dotnet publish, when it's finished place the generated folder onto your server and use IIS to fire everything up.

Heroku

<a href="https://dashboard.heroku.com/new?template=https://github.com/MarkPieszak/aspnetcore-angular2-universal.git"> <img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy on Heroku"> </a>

Azure

git remote add azure https://your-user-name@my-angular2-site.scm.azurewebsites.net:443/my-angular2-site.git
                     // ^ get this from Azure (Web App Overview section - Git clone url)

git push --set-upstream azure master 

Application Structure:

Note: This application has WebAPI (our REST API) setup inside the same project, but of course all of this could be abstracted out into a completely separate project('s) ideally. .NET Core things are all done in the same project for simplicity's sake.

Root level files

Here we have the usual suspects found at the root level.

Front-end oriented files:

• package.json - NPM project dependencies & scripts
• .tsconfig - TypeScript configuration (here we setup PATHs as well)
• webpack - configuration files (modular bundling + so much more)
• karma - configuration files (unit testing)
• protractor - config files (e2e testing)
• tslint - TypeScript code linting rules

/ClientApp/ - Everything Angular

Let's take a look at how this is structured so we can make some sense of it all!

With Angular Universal, we need to split our applicatoin logic per platform so if we look inside this folder, you'll see the 2 root files, that branch the entire logic for browser & server respectively.

• Boot.Browser.ts - This file starts up the entire Angular application for the Client/browser platform.

Here we setup a few things, client Angular bootstrapping.

You'll barely need to touch this file, but something to note, this is the file where you would import libraries that you only want being used in the Browser. (Just know that you'd have to provide a mock implementation for the Server when doing that).

• Boot.Server.ts - This file is where Angular platform-server serializes the Angular application itself on the .NET server within a very quick Node process, and renders it a string. This is what causes that initial fast paint of the entire application to the Browser, and helps us get all our SEO goodness :sparkles:

---

Notice the folder structure here in ./ClientApp/ :

+ /ClientApp/

+   /app/
    App NgModule - our Root NgModule (you'll insert Components/etc here most often)
    AppComponent / App Routes / global css styles

    * Notice that we have 2 dividing NgModules:
        app.module.browser & app.module.server
    You'll almost always be using the common app.module, but these 2 are used to split up platform logic
    for situations where you need to use Dependency Injection / etc, between platforms.

Note: You could use whatever folder conventions you'd like, I prefer to split up things in terms of whether they are re-usable 
     "components" or routeable / page-like components that group together and organize entire sections.
++ > ++ > /components/ 
          Here are a