Angular 2 Beta, ASP.NET v.Next Release Candidate and TypeScript So Happy Together

It has been a while since I posted.  I have been busy working on a video for a publishing company on Angular 2 and, more importantly, very busy at work.  I decided to take on the video project as part of my own learning.  I do not want to spend too much time on setting up an environment, so I decided to write this post to remind me how to do it.  This is just steps by step environment setup guide using betas of both ASP.NET 5 (v. next) and Angular 2.  I am going to assume you setup Visual Studio 2015 and installed ASP.NET 5 RC.

Let’s get started. 

Start Visual Studio 2015 and create new project.  Use Empty ASP.NET 5 template.

SNAGHTML268de490

Now we need to enable static files support.

Open project.json file and under dependencies add static files package: 

"dependencies": {   "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",   "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",   "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
},

Then we need to enable static files in the application code.  We do so by editing Startup.cs and adding corresponding line to Configure method.

public void Configure(IApplicationBuilder app)
{     app.UseIISPlatformHandler();     app.UseStaticFiles();
}

Let’s add index.html page under wwwroot folder.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h2>ASP.NET 5 and Angular 2</h2> </body> </html>

Nothing fancy, but it is time to ensure that so far everything works.  Open up command prompt and navigate to your project folder.  Important to stress this, not solution, but project folder where your project.json file is located.  Let’s run dnx and start up web server.  Just type dnx web to run web command from project.json.  You should see something like the following:

SNAGHTML269755dd

Now let’s open the browser and navigate to localhost:5000/index.html.  We should see the phrase we put into index.html for testing.  So far so good.

image

Time to install all Angular 2 components.  Add new item to the project, NPM Configuration file.  This will create project.json.  Open it and let’s paste in all Angular 2 dependencies:

{   "version": "1.0.0",   "name": "ASP.NET",   "private": true,   "dependencies": {     "angular2": "2.0.0-beta.0",     "systemjs": "0.19.9",     "es6-promise": "3.0.2",     "es6-shim": "0.34.0",     "reflect-metadata": "0.1.2",     "rxjs": "5.0.0-beta.0",     "zone.js": "0.5.10"   },   "devDependencies": {   }
}

 

As soon as you save the file, you will see that Visual Studio starts restoring all the packages.  Give it a minute to make sure the message about restoring goes away.

I am going to put my application TypeScript files under app folder, not wwwroot.  I am going to keep all TypeScript files there.  Then I am going to copy them to wwwroot later.  Go ahead and add Main.ts TypeScript file to that folder.

image

Before we go further, let’s configure TypeScript.  Add new item to the project, at the root of the project, and pick TypeScript JSON Configuration File template.

 

SNAGHTML26a1299c

We need to add a few things to the file.  We need to enable decorators functionality.  We also are going to use systemjs for module loading.  We are going to use node style module resolution.  I also turn on noImplicitAny, but this is a personal preference.

{   "compilerOptions": {     "noImplicitAny": true,     "noEmitOnError": true,     "removeComments": false,     "sourceMap": true,     "target": "es5",     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "module": "system",     "moduleResolution": "node"   },   "exclude": [     "node_modules",     "wwwroot"   ]
}

 

We are going to import component from Angular 2 and create a simple component.  I am putting it into Man.ts

import {Component} from 'angular2/core'; @Component({ selector: 'app-shell', template: '<h1>Angular 2 Welcome page for {{name}}</h1>' }) export class Main { name: string; constructor() { this.name = "Sergey"; } }

So, let’s walk through this simple code.  We are importing Component decorator class.  We are adding it to our class, called Main.  Our class has just one property that we set in the constructor.  In the component decorator definition we are just telling Angular to find element with the tag of <app-shell> and replace it with the template.  Template string contains our property just to ensure that everything works and binds properly.

We need to start our app by using bootstrapping functionality from Angular 2.  Create new file called Boot.ts.

import {Main} from "./Main"; import {bootstrap} from 'angular2/platform/browser' bootstrap(Main);

In this file we are importing our own class, Main from Main module.  We are importing bootstrap component from Angular.  Finally, we are bootstrapping our Main class.

Now we need to adjust our index.html and add all needed Angular 2 scripts and system.js module loader code.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <app-shell><h2>Loading...</h2></app-shell> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js', } } }); System.import('app/boot') .then(console.log('started application'), console.log('Error occrred while starting application')); </script> </body> </html>

 

I found this code on Angular 2 getting started page.  You can see my app-shell element I am going to replace.  I am temporarily putting in Loading to let user know the page is being constructed.  Then I am  adding four required scripts.  Finally, I am configuring system.js.  I am telling it I have one package, called app, which is assumed to be in app folder under the root. I am telling it to use js extension by default.  I am telling it to use register style module loader.

Time to copy all the files over.  We are going to use gulp for this.  Let’s add another file to our project.

SNAGHTML26aebe6a

We need to install gulp.  Just open another command prompt and again navigate to the project’s root where project.json file is located.  Type npm install gulp.

Time to edit our gulpfile

/* This file in the main entry point for defining Gulp tasks and using Gulp plugins. Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 */ var gulp = require('gulp'); gulp.task('thirdparty', function () { gulp.src('./node_modules/angular2/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/angular2')); gulp.src('./node_modules/es6-promise/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/es6-promise')); gulp.src('./node_modules/zone.js/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/zone.js')); gulp.src('./node_modules/systemjs/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/systemjs')); gulp.src('./node_modules/reflect-metadata/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/reflect-metadata')); gulp.src('./node_modules/es6-shim/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/es6-shim')); gulp.src('./node_modules/rxjs/**/*.js') .pipe(gulp.dest('./wwwroot/node_modules/rxjs')); }); gulp.task('copy', function () { gulp.src('./app/**/*.*') .pipe(gulp.dest('./wwwroot/app')); }); gulp.task('watch', function () { gulp.watch('./app/**/*.js', ['copy']); }); gulp.task('default', ['thirdparty']);

Let’s walk through my tasks.  First task is thirdparty.  I am simply copying Angular 2 and its dependencies from node_modules folder to the same folder under wwwroot.

In the second task called copy I am copying my application files from app folder to wwwroot folder.  I do not need to compile them because Visual Studio does this for me automatically. You may need to pull up VS options page and look under Editor / TypeScript if compilation does not occur for your automatically.

The third task is watch task which will monitor my app folder and continuously copy the files to wwwroot.  Time to run gulp.  Since you already have folder pulled up, type gulp thirdparty.  This will copy Angular 2 stuff over.  Wait for that task to finish, then type gulp watch.  Now simply edit something on our Main.ts, like change the canned messages.  Then in Windows explorer make sure that the files got copied over.

We are ready to refresh the browser and see that everything worked!  You can download the sample app here.

Enjoy.

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *