Angular 2Visual Studio Installfest

Kevin Hennessy – AIS @kevinmhennessy

Prerequisites – Visual Studio• Visual Studio 2015• Using Community Edition• Installed updates through the IDE• (OPTIONAL) Also installed .NET Core as part of .NET update

in IDE

Prerequisites - NodeJs• Install Node• If not installed

• Go to https://nodejs.org/en/download/ • Download Windows installer• Install• Current version is v4.5.0 (includes npm 2.15.9)

• Check versions• Open terminal window• Type node –v and npm –v• Make sure versions are at least

• node – 4.4.x to 5.x.x• npm – 3.x.x

Step 1: Download the QuickStart files• Download the Quick Start source from github. • https://github.com/angular/quickstart

• If you downloaded as a zip file, extract the files.

Step 2: Set up Visual Studio for TypeScript• Open Tools | Extensions and Updates.• Select Online in the tree on the left.• Search for TypeScript using the search box in the

upper right.• Select the most current available TypeScript version.• Download and install the package.• It was already installed for me

Step 3: Create Visual Studio ASP.NET project• In Visual Studio, select File | New | Project from the

menu.• In the template tree, select Templates | Visual C# (or

Visual Basic) | Web.• Select the ASP.NET Web Application template, give the

project a name, and click OK.• Select the desired ASP.NET 4.5.2 template and click OK• In this case, select the Empty template• Don’t select Azure options

Step 4: Copy QuickStart files to ASP.NET project folder

• Copy the QuickStart files we downloaded from github into the folder containing the .csproj file. (copy files in quickstart master file)

• Click the Show All Files button in Solution Explorer to reveal all of the hidden files in the project.

• Right-click on each folder/file to be included in the project and select Include in Project. Minimally, include the following folder/files:• app folder (answer No if asked to search for TypeScript Typings)• styles.css• index.html• package.json• tsconfig.json• systemjs.config.js• karma-test-shim.js• karma.conf.js• protractor.config.js

Step 5: Restore the required packages• Right-click on the package.json file in Solution Explorer and select

Restore Packages. • This uses npm to install all of the packages defined in the package.json file. It

may take some time.• If desired, open the Output window (View | Output) to watch the npm

commands execute.• Ignore the warnings.• When the restore is finished, a message should say: npm command

completed with exit code 0. I got installing packages complete message• Click the Refresh icon in Solution Explorer.• Do not include the node_modules folder in the project. Let it be a hidden

project folder.

Step 5 -ERROR?!!• An error such as "@angular/compiler is not in the npm registry"

suggests that Visual Studio 2015 is using an older version of npm. • SOLUTION: Update to the latest installed version of npm:• Tools | Options to open the Options dialog.• In the tree on the left, select Projects and Solutions | External Web

Tools.• On the right, move the $(PATH) entry above the $(DevEnvDir) entries.

This tells Visual Studio to use the external tools (such as npm) found in your path before using its own version of the external tools.

• Click OK to close the dialog.• Restart Visual Studio for this change to take effect.

Step 6: Edit the TypeScript config file• Add "compileOnSave": true to the TypeScript

configuration (tsconfig.json) file.

{ "compilerOptions": {

. . . }, "compileOnSave": true}

• After saving this change, exit Visual Studio (save the solution if prompted) and reopen it to reload the project.

Step 7: Build and run the app• Click the Run button or press F5 to build and run the

application.• This launches the default browser and runs the Quick

Start sample application.• Try editing any of the project files. Save and refresh

the browser to see the changes.• If you do not see the changes,

• Stop debugging. • Make sure you are highlighting the solution in the Solution Explorer.• Then Run again.

Extra Credit• Run tests• Install NPM Task Runner from Visual Studio Gallery

https://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941

• Open Task Runner Explorer • Click on test for Unit tests

• If you get an error re sync test– • update zone.js using command npm install zone.js• update karma.conf.js with the zone.js files at this gist -> https://git.io/v6jLT

• Click on e2e for e2e tests• Implement more interesting app• Replace app component with this: https://git.io/v6jUN • Replace stylesheet in index.html with this: https://git.io/v6jTf

ngModule• An Angular module is a class decorated with @NgModule

metadata. The metadata:• declare which components, directives and pipes belong to the

module.• make some of those classes public so that other component

templates can use them.• import other modules with the components, directives and pipes

needed by the components in this module.• provide services at the application level that any application

component can use.• Every Angular app has at least one module class, the root

module. We bootstrap that module to launch the application.

tsconfig.json• The typescript configuration file• “target”: “es5”, the TypeScript compiler will transpile our code to

es5.• “sourceMap”: true, TypeScript will generate map files for

debugging.• “emitDecoratorMetadata”: true and

“experimentalDecorators”: true, both need to be set true for our angular application to compile.

• “noImplicitAny”: true if you want all your types to be strongly typed; false if not.

From: https://olepetterdahlmann.com/2016/08/19/angular-2-startup-project-in-visual-studio-code-and-visual-studio/

package.jsonNPM Configuration fileScripts section

Install NPM Task Runner from Visual Studio Galleryhttps://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941 Interesting commands include install, start, test, e2e.

Packages sectionThe packages that we are using in the application – includes Angular, systemjs, rxJs, zone.jsInstall them by right clicking the file and selecting Restore Packages

Resources• Angular 2 site: angular.io • The Visual Studio 2015 Quickstart we used

angular.io/docs/ts/latest/cookbook/visual-studio-2015.html• A couple of other guides to using Visual Studio with

Angular 2 (not tested by me):• www.rightincode.com/post/2016/08/14/Using-Angular-2-RC5-

with-Visual-Studio-2015-and-ASPNET-Core-10 • olepetterdahlmann.com/2016/08/17/angular-2-in-visual-studi

o-2015/• https://

coryrylan.com/blog/angular-2-development-with-visual-studio-and-windows -- a little dated

www.packtpub.com/web-development/angular-2-example