Right'in Code™

It's all about Right'in Code

Implementing a Successful Architecture for your Angular 2 Application Using Modules

The choices made when setting out to build an application can either contribute to the success or failure of a project.  Execution environment/platform, source control management, testing strategies, tools, languages, code organization, and software architecture are all key decisions at the beginning and throughout the development of a project. New frameworks like Angular 2 have little guidance or reference material to help you move down a successful path when setting out to build what would be considered a non-trivial application.

Currently, I am focused on acquiring an in-depth knowledge of Angular 2.  Having worked with Angular 1.x for the past couple of years, I am excited about the value that Angular 2 delivers.  I learn by doing, so I have set out to build a simple web application (Speaker Register) that allows conference speakers to create searchable profiles that are available to conference and meeting planners.  I have decided to use a SPA (Single-Page Application) architecture using Angular 2 and ASP.NET Web API hosted on ASP.NET 1.0 Core and .Net Core 1.0.  The application’s repo is located here:  https://github.com/rightincode/speakerregister  Feel free to follow along as the application evolves over the next several weeks.

Below is a high-level diagram of the current software architecture of the Angular 2 code:


Angular 2 applications are intended to be modular by organizing your code into modules.  Modules are blocks of code dedicated to a single purpose and inherently support re-use.  They consolidate components, directives, and pipes (angular concepts) into cohesive blocks of functionality focused on a feature area, workflow, or common collection of utilities (library).  Modules export something of value, for example, a class, function, value, service, and/or component.  The exported items can be imported by other modules. 

An Angular 2 application contains at least one module that is named the root module.  Angular 2 launches an application by bootstrapping the root module.  Additional modules, named feature modules or shared modules can be used to separate concerns and better organize an application.  An Angular 2 module is a class (a Typescript class in the case of the sample application) that is decorated with the @NgModule decorator function.  Let’s take a look at the modules in Speaker Register.


import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_PROVIDERS } from '@angular/http';

/* App Root */
import { AppComponent }  from './app.component';
import { PageNotFoundComponent } from './pagenotfound.component';
import './rxjs-operators';

/* Feature Modules */
import { SpeakerModule } from './speaker/speaker.module';
import { ConferenceModule } from './conference/conference.module';

/* Routing */
import { routing, appRouterProviders } from './app.routing';

    imports: [BrowserModule, ConferenceModule, SpeakerModule, routing],
    declarations: [AppComponent, PageNotFoundComponent],
    providers: [appRouterProviders, HTTP_PROVIDERS],
    bootstrap: [AppComponent]
export class AppModule { }

The AppModule is the root module of the Speaker Register application.  Lines 17-22 above is where Angular is instructed that the exported class AppModule is a module.  The @NgModule decorator function accepts an object that contains metadata (configuration information) that describes features of the module.

  • imports: (line 18) this is a list of modules who exposed assets (directives, pipes, etc.) are available to templates in this module. In the code above, BrowserModule is imported from the Angular library.  ConferenceModule and SpeakerModule are two other modules (feature modules) that contain specific functionality for those areas of the Speaker Register application.  (routing is beyond the scope of this post but will be covered later)
  • declarations: (line 19) this is a list of the components, directives, pipes, etc. that belong to this module. AppComponent (container component for the application) and PageNotFoundComponent belong to the root module
  • providers: (line 20) this is a list of injectable objects that are available in the injector of this module. (providers are beyond the scope of this post but will be covered later)
  • bootstrap: (line 21) the list of components that should be bootstrapped when this module is bootstrapped.  In the code above, AppModule is our root module and when it is bootstrapped, AppComponent (the container component for the application) is bootstrapped

When the application starts, AppModule gets bootstrapped. (starts executing)  AppModule imports several modules from the Angular libraries, imports two components (AppComponent and PageNotFoundComponent – we will cover those in a later post) that are a part of AppModule, loads two feature modules (SpeakerModule and ConferenceModule), and sets up routing. (we will cover routing in a later post)

Speaker Register also has two feature modules named SpeakerModule and ConferenceModule.  Both of these modules export classes that are decorated by the @NgModule function similar to the AppModule.  They contain only what is needed to implement the features of those parts of the application.  This allows for the separation of concerns between modules in the application. For example, the SpeakerModule is only concerned about the speaker functionality and exports an API to modules that import it.  It (SpeakerModule) can be updated independently without a negative impact to other modules as long as the API has not changed after the updates.  Take a look at the SpeakerModule and ConferenceModule in the source code: https://github.com/rightincode/speakerregister

The module in Angular 2 is a very powerful tool to help organize your code and build a codebase that is much easier to maintain.  In Speaker Register, we have made use of the module to create a software architecture designed to separate the concerns of specific areas within the application.  Add this tool (module) to your toolbox.  It will help you create a successful software architecture for your Angular 2 applications.

Keep Right’in Code!

Richard – @rightincode

Using Angular 2 RC5 with Visual Studio 2015 and ASP.NET Core 1.0

Lately, I have been spending time learning Angular 2.  During my study, I have seen many examples of setting up and getting started by using Visual Studio Code, WebStorm, and other excellent IDE’s.  I have also read several articles about setting up and using Angular 2 beta versions with Visual Studio 201x.  Since  I spend most of my time using Visual Studio 2015, this article will show you how to setup Angular 2 RC5 with Visual Studio 2015 and ASP.NET Core 1.0 on .NET Core 1.0.

Before you get stared, make sure you have Update 3 for Visual Studio 2015 installed and Preview 2 tooling for Microsoft .NET Core 1.0.  Once you have confirmed your installation, fire up Visual Studio 2015 and select “New Project” from the Start Page.  You will be presented with the dialog below:

New Project

Make sure you have selected the “ASP.NET Core Web Application (.NET Core)” option. Name the project and the solution, and set the location to whatever you would like.  Click “Ok” to continue.  Next you are presented with selecting what type of project template you would like to begin with.  Select “Empty”.  Authentication should be set to “No Authentication” and the “Host in the cloud” option should not be selected.  See the screenshot below:

Empty Template

Click “Ok” to continue.  After VS (Visual Studio) completes the setup you will be presented with the project readme HTML file in the editor.  If you take a look at Solution Explorer, your solution structure should look like the screenshot below:

Solution Explorer - Start

The next step in setting up ASP.NET Core 1.0 to serve Angular 2 RC5 is to configure your application to serve static files.  First, right-click on your web application in solution explorer and select “Manage NuGet Packages”.  In the NuGet Package Manager, enter “Microsoft.AspNetCore.StaticFiles” in the search window.  You will be presented with the screenshot below:

NuGet Package Manager

Make sure you have the latest stable version selected and click “Install”.  You may be asked permission to update your application as well as accept licensing terms.  Confirm to complete the installation and close the NuGet Package Manager Tab.  Finally edit the Startup.cs file in your solution.  It should look like the code below:

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace WebApplication1
    public class Startup
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app)

For a more in depth understanding of serving static files with ASP.NET Core 1.0, please visit here.

Now we are ready to begin setting up our environment for Angular 2 RC5.  “Right-click” on your web application project and select “Add” then “New Item”.  You will be presented with the dialog below:


Navigate to “Client-side” under .NET Core and then select “npm Configuration File” (package.json).  Click Add.  This file is used by NPM (Node Package Manager) to install required modules for our Angular 2 application.  You will be presented with the package.json file loaded in the editor.  Edit the package.json file to look like the code below:

  "version": "1.0.0",
  "name": "webapplication1",
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",

    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.15",
    "jquery": "^3.1.0",
    "bootstrap": "^3.3.6"
  "devDependencies": {
    "typescript": "^1.8.10",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "fs": "^0.0.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.1",
    "typings": "^0.8.1",
    "gulp-tsc": "^1.1.5"

Immediately after saving the package.json file, Visual Studio will begin downloading all the dependencies listed to a folder named “node_modules” in the directory where your web application is located. (If you would like a detail explanation of these settings, you can go here.)  In addition, you will probably receive an error message stating that npm was not able to resolve Typings dependencies due to a missing “typings.json” file.  Let’s create that file now.

“Right-click” on the web application and select “Add” then “New Item”.  Again select “Client-side” on the far left and then select “JavaScript File”.  Make sure you name the file “typings.json”.  Your screen should look like the screenshot below:


Click “Add” and you will be presented with the typings.json file in the editor.  Edit the typings.json file to look like the code below:

  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "node": "registry:dt/node#4.0.0+20160509154515"

Save the typings.json file.  If you would like an explanation of these settings, you can go here. Now if you switch to the project.json file and save it again, Visual Studio should complete the installation of the dependent modules without error.

Next we add a TypeScript JSON Configuration File. (tsconfig.json)  “Right-click” on the web application in Solution Explorer and select “Add” and then “New Item”.  Select “Client-side” on the left and “TypeScript JSON Configuration File”.  Your screen should look like the screenshot below:


Select “Add” and the tsconfig.json file will be loaded into the editor.  Edit the tsconfig.json to look like the code below:

  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "./wwwroot/scripts"
  "exclude": [

Save the file.  If you would like an explanation of these settings, you can go here.

We are going to use SystemJS to load our application and library modules.  To do so, we need to create a configuration file for SystemJS so that it can locate the code we need loaded.

Since ASP.NET Core 1.0 serves static files from the “wwwroot” folder, we are going to place the SystemJS configuration file in a folder named “scripts” under this folder.  “Right-click” on the wwwroot folder and select “Add” then “New Folder”.  Name the folder “scripts”.  Solution Explorer should look like the screenshot below:

Solution Explorer - scripts folder

Now add the SystemJS configuration file to the scripts folder by selecting “Right-click” on the script folder and selecting “Add” then “New Item”.  You will be presented with the dialog below:


Select “Client-side” on the left and “JavaScript File”.  Name the file “systemjs.config.js”.  Click “Add” and the “systemjs.config.js” file will be displayed in the editor.  Edit the “systemjs.config.js” file to look like the code below:

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'scripts',
        '@angular': 'libs/@angular',
        'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
        'rxjs': 'libs/rxjs'
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' }
    var ngPackageNames = [
    // Add package entries for angular packages
    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { main: './bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    var config = {
        map: map,
        packages: packages

If you are interested in the settings in the “systemjs.config.js” file, you can go here.

There is one final configuration step to complete and then we are ready to code our Angular 2 application.  As stated before, ASP.NET Core 1.0 serves static files from the wwwroot folder by default.  As a result, we need to move required library files from the node_modules folder to a location under the wwwroot folder.  In addition, if we would like to perform any debugging of the TypeScript code in our browser development tools, we need to have the original TypeScript files served from the server.  In order to accomplish this, we are going to use a gulp script to handle copying the files to their needed location.

“Right-click” on the web application and select “Add” then “New Item”.  Select “Gulp Configuration File”.  The dialog should look like the screenshot below:


Click “Add” and you will be presented with gulpfile.js in the editor.  Edit the gulpfile.js to look like the code below:

/// <binding AfterBuild='clearLibsDestinationFolder, clearAppDestinationFolder, moveToLibs' />
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');
var clean = require('gulp-clean');

var libsDestPath = './wwwroot/libs/';
var appDestPath = './wwwroot/app/';

//clear destination folders
    function () {
        return gulp.src(libsDestPath)

    function () {
        return gulp.src(appDestPath)

gulp.task('moveToLibs', function () {



    gulp.src(['node_modules/@angular/**/*'], { base: 'node_modules/@angular' })
    gulp.src(['node_modules/angular2-in-memory-web-api/**/*'], { base: 'node_modules/angular2-in-memory-web-api' })
    gulp.src(['node_modules/rxjs/**/*'], { base: 'node_modules/rxjs' })


    //copy typescript files for debugging purposes - would not deploy to production environment

The gulp file is configured to execute after a successful build of the solution once the Task Runner Explorer is setup.  From the VS menu, select “View”, “Other Windows”, and then “Task Runner Explorer”.   Click the “Refresh” button (top left, next to the application name) and Task Runner Explorer will read the gulp file.  You should see three(3) task: clearAppDestinationFolder, clearLibsDestinationFolder, and moveToLibs.  You should also see the number three(3) next to the “After Build” Bindings.  Now the gulp script will execute after a successfully build.

Okay, finally let’s code our Angular 2 application.

First step is to add an “index.html” file.  “Right-click” on the wwwroot folder and select “Add” then “New Item” and add an HTML file named “index.html”.  Edit the file to look like the code below:

<!DOCTYPE html>
    <title>Angular 2/ASP.NET Core 1.0 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="libs/css/bootstrap.css">

    <!-- 1. Load libraries -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap.min.js"></script>
    <script src="libs/zone.js"></script>
    <script src="libs/Reflect.js"></script>
    <script src="libs/system.src.js"></script>

    <!-- Polyfill(s) for older browsers -->
    <script src="libs/es6-shim.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="scripts/systemjs.config.js"></script>
      System.import('app').catch(function(err){ console.error(err); });
<h1>Hello world from ASP.NET Core 1.0 on .NET Core 1.0!</h1>

Now let’s add a new folder name “app” that will contain all of our TypeScript code for our Angular application.  “Right-click” on the web application project and select “Add” then “New Folder”.  Name the folder “app”.

The first TypeScript file we will add to the project is “main.ts”.  This is where our Angular 2 application starts up.  “Right-click” on the “app” folder and select “Add” then “New Item”.  Select “Client-side” on the left and in the center select “TypeScript File”.  Name the file “main.ts” and select “Add”.  “main.ts” should now be loaded in the editor and your solution should look similar to the screenshot below:


Edit the main.ts file to look like the code below:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';


Visual Studio will flag a few errors but that is okay for now.  They will be resolved when we add the remaining files.  Now let’s add a new TypeScript file to the app folder named “app.module.ts” and edit the file to contain the code below:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }

Finally, let’s add a third TypeScript file to the app folder named “app.component.ts” and edit the file to contain the code below:

import { Component } from '@angular/core';

    selector: 'my-app',
    template: '<h3>Angular 2 RC5 is running here!</h3>'

export class AppComponent { }

After adding the third TypeScript file, all of the Visual Studio errors should have been resolved.  Your solution should look similar to the screenshot below:

Final TypeScript

I will publish another blog post with more details about the three(3) TypeScript files we just added.  If you would like more information now, you can go here.

Okay, let’s build the application in Visual Studio.  The application should build successfully.  Now let’s launch the application and you should be greeted with the screenshot below:


We have an Angular 2 RC5 application served up from ASP.NET Core 1.0 on .NET Core 1.0 and built using Visual Studio 2015!  You can find a Visual Studio solution here.

I hope this post is helpful with getting started with Angular 2 development using Visual Studio 2015 and ASP.NET Core 1.0 on .NET Core 1.0.  Let me know if you have any questions.  Keep Right’in Code!

Richard - @rightincode

The Value of a Full-Stack Developer

Several days ago, a colleague of mine gave an excellent talk about Full-Stack developers.  There were several points he made that I thought were interesting:

  • The definition of “Full-Stack” has evolved over the years
  • Based on his definition, to maintain the skills necessary to be a Full-Stack developer is extremely difficult or impossible
  • Given the maintenance difficulty, it is probably not worth the effort to do what is necessary to maintain/become a Full-Stack developer

For the most part, I agree with his assessment of the role Full-Stack developer.  As with all ideas and concepts, there are counterpoints, different opinions, and other perspectives.

We agree that the definition of the role of Full-Stack developer has evolved over the years.  Early in my career, “the stack” consisted of very few parts.  If you knew HTML, JavaScript, CSS, a server-side language (PHP/VB.NET/C#), and SQL and could put it all together to build a web application, you would be considered a Full-Stack developer.  Today, using what is considered a modern approach to building a web application, you would add to the previous list of technologies several client-side JavaScript libraries, additional tools to manage those libraries and other assets (version management/minification/bundling/etc.), new data transport and security tools/techniques, and custom back-end API’s to respond to client-side requests.  If are planning to support mobile, you just added even more complexity to the stack.  This evolution has increased the complexity of successfully delivering a web application by many orders of magnitude.

10 years ago, keeping up with the technologies required to successfully build a web application was a fairly easy task.  The pace of change was something one could truly mange within a typical work week and acceptable work/life balance.  Of course this is a personal preference but the frame of reference for my statement is a 40 hour work week.  Fast forward to today.  The pace of change is incredible.  As an individual developer, keeping up with changes in the technologies that are a part of “the stack” are impossible.  My colleague and I agree on this point.  One cannot master all the technologies and still be productive.  If you tried, you would spend all your time learning, never building, and a reasonable work/life balance (again personal definition) could not be achieved.

So is it worth the effort to maintain/become (or attempt to become) a Full-Stack developer?  This is where my colleague and I disagree.  It is my personal belief that striving to become or maintaining your role as a Full-Stack developer is definitely worth it.  I don’t believe that one could master all the parts of today’s modern technology “stack”  but I do believe you are much more valuable to an organization seeking solid contributors.  As a hiring manager, I am never impressed by how “deep” your knowledge of a specific technology or part of “the stack”.  The tools and technologies change constantly.  What I’m looking for is your ability and enthusiasm to solve problems with the appropriate tools and technologies.  Your ability to fearlessly and with an open mind explore the leading-edge of our profession is also more valuable in my opinion.

The Full-Stack developer may or may not exist today because it is 100% based on your definition.  But it is my genuine belief when reviewing your career as a professional software developer, the broader your knowledge maximizes your value and minimizes your risk.  Define what Full-Stack developer is to you, set your limits on work/life balance, and go capitalize on the incredible career of a software developer.




CodeStock 2015 Recap

Once again, I had the privilege of attending CodeStock in Knoxville, TN. last weekend.  The CodeStock team really knows how to put on a great conference.  In 2014, there were about 450 attendees.  This year, 900 attendees!  Yes, doubled in one year!  That should give you a good indication of the popularity and the quality of the conference.  Also, the conference relocated to the Knoxville Convention Center and I must say, the facilities were great.

This year it was our pleasure as attendees to hear from keynote speaker Scott Hanselman, @shanselman. (hanselman.com)  If you haven’t had the please of hearing Scott live, add it to your bucket list.  It was an absolute treat and he is hilarious.  I have a little something extra to say about Scott but I will save that for later.

CodeStock’s sessions were broken down into five categories: Design, Development, Entrepreneur, IT Pro, and other.  I mainly work on Web projects, so I focused on the Design and Development categories. (Although, I did attend a couple of Entrepreneur sessions given by some folks I respect.)  Day one for me consisted of talks on Dependency Injection by James Bender, @JamesBender, AngularJs by Dave Baskin, @dfbaskin, ASP.NET vnext by Sam Basu, @samidip , and An Honest Look at a Successfully Software Consultant by Jim Christopher, @beefarino .  All great talks by some of the best presenters out there. Day two was more of the same, Diving into Angular 2.0 by Josh Carroll, @jwcarroll , Deep Dive into ASP.NET 5, Jeff Fritz, @csharpfritz , and Web Application Security by Steve Brownell.  Again all great presentations!

CodeStock is a jewel of a conference.  Great talks, great attendees, great team, great value, and great price!  I have attended this conference for the past three years and it has only improved year after year.  The CodeStock team has earned my respect and support and I plan to continue to attend.  If you are looking for a great return on your conference dollars, CodeStock is a conference you should have on your list.

One last thing.  I was sitting in one of the conference rooms waiting for the next talk, actually looking down at my laptop, and Scott Hanselman stopped by and said hello.  Of course, I was a quite surprised when he said “hey, we follow each other on twitter, right?”  I don’t send 100 tweets per day, barely 10 per week but he recognized me out of his 130k+ followers.  I thought that was incredible given his popularity and just the number of people he comes in contact with.  He and I shared a 10 min conversation.  During our chat, he asked me what I was working on and even offered some advice. (invaluable advice)  I’m writing this because I have “mad” (great) respect for someone of his caliber that is genuinely attentive to the community.  As I said earlier, if you haven’t heard Scott @shanselman (hanselman.com) speak live, add it to your bucket list.  It will be a real treat.