Start with VS Code, Angular2, Typescript & ASP.NET Core 1.0

Nowadays you hear a lot of new technologies around the web stuff and with this post I want to show you a get-starting-guide how to start with the following technologies in general. I want to show how to set up an environment where you can start programming ASP.NET and AngularJs 2.0. As I started I spent a lot of time setting up all my tools and stuff. If you want to save this time: Go ahead reading.

So I want to have an environment where I can build an Angular 2 web application with typescript, having an api where I can call to build with ASP.NET Core 1.0. We will also use Visual Studio Code to get the client-side programming going.

Lets start:

First thing to do is setting up our Visual Studio. Create a new application and choose the ASP.NET 5 Templates. I guess they will be renamed later 

You will get an empty solution with no dependencies so far. Lets go and add some: open up the “project.json” and add the dependencies like this:

1 2 3 4 5 6 7 8 9

"dependencies": {         "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",         "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",         "Microsoft.AspNet.Mvc": "6.0.0-rc1-final",         "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",         "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",         "Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",         "AutoMapper": "4.1.1"     },

What we are adding is MVC, because we will need it for setting up the API, some logging things and AutoMappers to map between our DTOs and our real Entities. We wont use it in this tutorial, but for a kickstart its good to have them.

Visual Studio should now go ahead and resolve, download and install these packages.

Now go on and add an “app”-Folder, a “js”-folder and a “css”-folder to the wwwroot-folder.

Everything in the wwwroot-folder is going to be served to the client. This is where our app lives. You can also build your application outside this folder and copy the relevant files in it via gulp etc. I am not doing this in this case because its easier to debug in the when launching. If you have a better approach I would love to hear it 

To get started with our web application we need an index.html. Lets add it and put nothing in it so far.

The Serverside/API

Lets get started with the serverside: To wire up everything we need to configure our application in the Startup.cs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

public class Startup { public Startup(IHostingEnvironment env) { var builder = new ConfigurationBuilder() .AddJsonFile("appsettings.json") .AddEnvironmentVariables(); Configuration = builder.Build(); }   public IConfigurationRoot Configuration { get; set; }   public void ConfigureServices(IServiceCollection services) { services.AddMvc(); }   // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory) { loggerFactory.AddConsole(Configuration.GetSection("Logging")); loggerFactory.AddDebug(); app.UseIISPlatformHandler();   app.UseStaticFiles();   app.UseMvc(); }   public static void Main(string[] args) => WebApplication.Run<Startup>(args); }

Because at the beginning of this page we are consuming an “appsettings.json” we should also create it. Create a new file called like this beside the Startup.cs and paste some logging information to it. You can add some informations you want to have in there later if you want. For the start, this should be okay.

1 2 3 4 5 6 7 8 9 10

{   "Logging": {     "IncludeScopes": false,     "LogLevel": {       "Default": "Verbose",       "System": "Information",       "Microsoft": "Information"     }   } }

Our application should now be able to start up. Just go to the commandline and type “dnx web” in it. This will start a webserver and serve all files in wwwroot.

Great so far! Now we can add a controller!

For this go ahead in the root of the project and add a folder “Controller” which wil hold all the controllers for us. Then you can add an standardcontroller for the first run.

I like to stay to IActionResult-Interface in my controllers. It just gives me a way I am used to and is clearer for me. You do not have to do this. The controller is just for demo purposes.

If we now run the server again with “dnx web” it will start and via Postman we can check if everything works correctly:

The Client

Great. So lets start clientside. What we need is an AngularJs 2.0 environment. For the tooling I made the best experiences using Visual Studio Code.

We already defined the wwwroot-Folder which holds every file which is transported to the client.

As we start developing AngularJs 2.0 we have to prepare our environment for working with Typescript. I already have an instruction how to start in a previous Blogpost Getting started with Visual Studio Code & Typescript. But lets cover some thing in short to get it customised for this AngularJs 2.0 case.

Lets add a file for configuring the typescript-options for our project: tsconfig.json to the root of our project.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{     "compilerOptions": {         "target": "es5",         "module": "commonjs",         "removeComments": true,         "emitDecoratorMetadata": true,         "experimentalDecorators": true,         "noEmitHelpers": false,         "sourceMap": true     },     "exclude": [         "node_modules"     ],     "compileOnSave": false,     "buildOnSave": false }

Adding Angular2

Normally you would add AngularJs 2 via the tsd-command. But in this case AngularJs 2 is served via npm. To get Angular2 we have to add a package.json to the root of our project.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

{     "name": "AspNet5Angular2Demo",     "version": "1.0.0",     "description": "",     "main": "wwwroot/index.html",     "author": "",     "license": "ISC",     "dependencies": {         "angular2": "2.0.0-beta.0",         "systemjs": "0.19.6",         "es6-promise": "^3.0.2",         "es6-shim": "^0.33.3",         "reflect-metadata": "0.1.2",         "rxjs": "5.0.0-beta.0",         "zone.js": "0.5.10"     },     "devDependencies": {         "typescript": "^1.7.3"     } }

or just type “npm init” to answer all questions and get an project.json file generated.

After this you can install AngularJs 2 and all other dependencies via “npm install” or visual Studio will do this for you automatically. Just just have to wait a few seconds. It will add a node_modules folder to your root application and copy all files, also the *.d.ts-files you need to develop with typescript.

Last thing to do is copying all your needed files into the “js”-folder you created on clientside.

(Ignore the jquery and signalr files I had addinitonally in the example, its for the next blogpost  )

Now go ahead in you index.html and link to the files in the client js folder:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<html>     <head>     <title>ASPNET5Angular2Demo</title>   </head>     <!-- 3. Display the application -->   <body>     <my-app>Loading...</my-app>   <!-- 1. Load libraries -->     <!-- IE required polyfills, in this exact order -->     <script src="js/es6-shim.min.js"></script>     <script src="js/system-polyfills.js"></script>       <script src="js/angular2-polyfills.js"></script>     <script src="js/system.src.js"></script>     <script src="js/Rx.js"></script>     <script src="js/angular2.dev.js"></script>       <!-- 2. Configure SystemJS -->     <script>       System.config({         packages: {                   app: {             defaultExtension: 'js'           }         }       });       System.import('app/boot')             .then(null, console.error.bind(console));     </script>   </body>   </html>

Finally…

We are done so far:

You can now go ahead and develop you application in Typescript and Angular2. You could start with the AngularJs 2 quickstart. All files you need should be there. Its important to add the boot.ts and application.ts to get an entry point and bootstrapping your application.

If you, like me, always forget to compile the typescript files: open a cmd in the app folder and just type “tsc -w”. This activates a typescript watcher using the tsconfig in the root of the project and will always compile the *.ts files into *.js files if there are some changes

Further steps:

You could now start using gulp/grunt to copy files to the locations automatically instead of doing it manually. Or you could start consuming the api using the http-Service like shown here or wait for one of my next blog-posts 

Angular 2 Beta 0 Starter Template on GitHub