Angular5 and ASP.NET Core 2.0 cheat sheet

· Read in about 2 min · (231 words) ·

Couple of notes on setting up a project on Angular5 utilizing .NET Core 2.0 WebAPI.

Code organization

ProjectRootFolder
|
+.git
|
+-AngularProjectFolder
|
+-dotNetCoreProjectFolder
  |
  +-wwwroot

Project setup

  • Create project root folder with git repository:
    • mkdir ProjectRootFolder
    • cd ProjectRootFolder
    • git init
  • Create dotNet Core API application
    • dotnet new webapi -n ProjectWebApi
  • Create Angular 5 application
    • Assumes Angular5 CLI is available already (see https://angular.io/guide/quickstart)
    • ng new project-web-ui
    • Customize build output path in .angular-cli.json
    • Set outDir to ../ProjectWebApi/WWWRoot/

Angular 5 CLI commands

Running Angular5 and .NET Core 2.0 backend service localy during development

  • First create proxy.config.json file in the root of web site source code.

    {
      "/api": {
          "target": "http://localhost:56785",
          "secure": false
      }
    }
    • Update /api to a virtual folder which should be proxified
    • Update target to point to API
  • Run ng serve --proxy-config proxy.config.json

Running KARMA tests

  • ng test
    • When testing components it may require ng test --sourcemaps=false to avoid issues

Building Angular5 website which will be deployed to a virtual folder

  • ng build --base-href "/alx/"
    • alx is the virtual folder on the server (updates <base href/> tag inside the index.html)

Deployment