Deborah's Developer MindScape

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options as outlined in this prior post. This post focuses on using Angular 2 with Visual Studio 2015 using a Web site instead of a Visual Studio project.

For this technique, we’ll cover how to set up and run the “Angular 2: Getting Started” files using the ‘Open Web Site’ feature of Visual Studio 2015.

1. Download the starter files from my GitHub repo: https://github.com/DeborahK/Angular2-GettingStarted

    If you are not familiar with using GitHub, just click on the “Download ZIP” button as shown below. Then unzip the files.

2. Copy the files from the ‘APM – Start’ folder to a folder that has no spaces.

NOTE: The full path to the project.json file must have no spaces for these steps to work.

3. Open Visual Studio 2015 and select: File | Open | Web Site.

4. Select the folder created in step #2.

    This opens the Angular application as a Web site and automatically installs all of the packages.

5. Open the Output window (View | Output) to watch the npm command execute. When it is finished, you should see something like this:

NOTE: There is an intentionally missing component (because we have not created it yet!). When running in VS Code, the application runs even though this component is missing. In Visual Studio 2015, the compile will fail and the application won’t run. To successfully compile the code, open main.ts and comment out the contents of this file. (Just be sure to uncomment them after we build the app.component.)

6. Open the Package Manager Console (View | Other Windows | Package Manager Console)

7. Type ‘npm start’ into the Package Manager Console.

NOTE: If there are any spaces in the path, the ‘npm start’ will not execute successfully.

This will launch your default browser and watch for changes. You can then edit any of the project files (AND SAVE!). The browser will then update automatically and reflect your changes.

NOTE: If the Package Manager Console does not appear to be in the correct directory for the ‘npm start’ command to work (it must be in the directory containing the package.json file), you can change the current path used by the Package Manager Console by typing this at the PM> prompt:

set-location -path .\APM -PassThru

This changes your current path to the APM subfolder. The -PassThur option displays the current path so you can confirm it.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code. Just be sure to follow steps 6 & 7 above each time you reopen the project to restart the script that watches for changes and refreshes the browser.

It would be great to hear from you on whether these steps worked for you. Follow me on twitter: @deborahkurata

Enjoy!

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options as outlined in this prior post. This post focuses on using Angular 2 with a Visual Studio 2015 TypeScript project.

For this technique, we’ll cover how to set up and run the “Angular 2: Getting Started” files using a TypeScript project in Visual Studio 2015.

1. Download the starter files from my GitHub repo: https://github.com/DeborahK/Angular2-GettingStarted

    If you are not familiar with using GitHub, just click on the “Download ZIP” button as shown below. Then unzip the files.

2. Open Visual Studio 2015 and create a new project: File | New | Project.

3. Select the TypeScript project template and name the project “APM” for Acme Product Management.

4. This creates several TypeScript sample files. Delete app.css, app.ts, and index.html.

5. In file explorer, open the cloned or unzipped `APM – Start` folder if you want to start with the project starter files. Open the `APM – Final` folder if you want to work with the final files from the course.

6. Copy all of the files from within the folder shown above (except the .vscode folder) to the APM project file you just created with Visual Studio.

7. Click the “Show All Files” button in the toolbar of Solution Explorer.

8. Select to include the api and app folders and the index.html, package.json, tsconfig.json, and typings.json files into the project. If desired, click “Show All Files” again to hide the remaining files.

9. Right-click on the package.json file and select: Restore Packages

10. Open the Output window (View | Output) to watch Visual Studio 2015 run npm and install Angular 2 and its dependencies.

So even through we are using a Visual Studio 2015 menu option (Restore Packages), Visual Studio is running the Node Package Manager (npm) to install all of the packages defined in the package.json file.

11. If npm finishes successfully, it should appear like this (see below) in the Output window.

12. Right-click on index.html and select Set As Start Page.

NOTE: There is an intentionally missing component (because we have not created it yet!). When running in VS Code, the application runs even though this file is missing. In Visual Studio 2015, the compile will fail and the application won’t run. To successfully compile the code, open main.ts and comment out the contents of this file. (Just be sure to uncomment them after we build the app.component.)

13. Press F5 to run and the application appears in the selected browser.

HOWEVER … you won’t be able to edit and continue. And if you edit and try to refresh the browser, you will most likely see a 404 message.

I have not yet figured out the magic required to provide edit and continue using Visual Studio 2015 directly … but you can get edit and continue if you stop debugging and run the application using a script instead of F5 following these additional steps:

14. Display the Package Manager Console (View | Other Windows | Package Manager Console).

15. Type `cd APM` in the Package Manager Console to change to the directory containing the APM project.

NOTE that if you used a different directory name for your project, type that instead. And if you have a space in the name, it will need to be enclosed in quotes: cd “APM – Start”

16. Type ‘npm start’ into the Package Manager Console.

This will launch your default browser and watch for changes. You can then edit any of the project files (AND SAVE!). The browser will then update automatically and reflect your changes.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code. Just be sure to follow steps 14-16 above each time you reopen the project to restart the script that watches for changes and refreshes the browser.

It would be great to hear from you on whether these steps worked for you. Follow me on twitter: @deborahkurata

Enjoy!

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options as outlined in this prior post. This post focuses on using Angular 2 with a Visual Studio 2015 ASP.NET 4.x project.

NOTE: If you don’t want to follow all of these steps, you can download the “Angular 2: Getting Started” starter files for an ASP.NET 4.x project in Visual Studio 2015 here: https://github.com/DeborahK/Angular2-GettingStarted and use the “APM – Start VS 2015 ASP 4x” folder. The only step required below is then Step #2, downloading and installing the latest TypeScript tools for Visual Studio 2015. When you first open the provided solution, the packages will install/update automatically.

To manually set up and run the “Angular 2: Getting Started” files using a ASP.NET 4.x project in Visual Studio 2015, follow these steps:

1. Download the Angular 2 starter files from my GitHub repo: https://github.com/DeborahK/Angular2-GettingStarted

    If you are not familiar with using GitHub, just click on the “Download ZIP” button as shown below. Then unzip the files.

2. Open Visual Studio 2015 and download the latest set of TypeScript tools for Visual Studio. Open Tools | Extensions and Updates and search for TypeScript. Select the latest TypeScript version (1.8.4 shown below). Then install the downloaded package.

3. Create a new project: File | New | Project, select the ASP.NET project template and name the project “APM” for Acme Product Management.

4. Select the desired ASP.NET 4.x template. I selected the empty template with no MVC, no authentication and no hosting.

5. Copy the files from the APM – Start folder that was downloaded from my GitHub repo (see Step #1) to the APM folder containing the APM.csproj folder.

6. Select the Show All Files button in Solution Explorer to show all of the files.

7. Right-click on each folder/file to be included in the project (as shown below) and select ‘Included in Project’.

NOTE: You may see a dialog that asks if you want to search for TypeScript Typings. Select ‘No’.

8. Right-click on packages.json and select ‘Restore Packages’. This uses npm to install all of the packages defined in the package.json file. (Similar to typing ‘npm install’ at a command line prompt.)

9. Open the Output window (View | Output) to watch the npm command execute. When it is finished, you should see something like this:

NOTE: If you are using Angular 2 RC or higher and see errors here, such as: “‘angular/compiler’ is not in the npm registry”, your Visual Studio 2015 is most likely using an older version of npm. To correct this. Use Tools | Options | Projects and Solutions | External Web Tools and move the $(PATH) entry above the $(DevEnvDir) entries as shown below.

10. Refreshing Solution Explorer, you should then see a node_modules and typings folders as hidden folders for the project.

11. There is one additional option in the tsconfig.json file that is not required when using VS Code or some of the other editors, but is required if using Visual Studio 2015. Add this line to the tsconfig.json file: “compileOnSave” = true and SAVE.

You may have better results at this point if you exit Visual Studio 2015 and reopen it.

12. Click the Run button or press F5 to run the application.

This will launch your default browser and run the application. You can then edit any of the project files (AND SAVE!). Then refresh the browser to see your changes. NOTE: The refresh only works when there is no routing path in the address bar.

13. If you see errors on compilation such as “Property ‘map’ does not exist on type ‘Observable<Response>’” or “Observable cannot be found”, then exit Visual Studio and follow the instructions here: https://github.com/Microsoft/TypeScript/issues/8518

This involves replacing your C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js file. NOTE: This requires admin privileges.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code.

It would be great to hear from you on whether these steps worked for you. Follow me on twitter: @deborahkurata

Enjoy!

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options.

• Do we use TypeScript? If so, do we use a TypeScript project in Visual Studio 2015?
• Do we use a simple “Web Site”?
• Do we use ASP.NET? If so, ASP.NET version 4.6 (current version) or ASP.NET Core 1.0 (previously known as ASP.NET version 5.0 and currently in beta)
• Do we use MVC? If so, MVC 5 (current version) or MVC 6 (currently in beta)?
• Do we use more JavaScript-ish tools such as npm? Or try to do everything with Visual Studio tools?
• Do we use the command line? Or try to do everything within the Visual Studio 2015 IDE?
• And so on …

The plan is to cover several of these options, starting with the most basic steps required to use Visual Studio 2015 with Angular 2.

Here are the links to the options covered so far:

• Angular 2: Getting Started with Visual Studio 2015 using a Web Site.
  • This is the easiest way to use Visual Studio 2015 with Angular 2.
• Angular 2: Getting Started with a Visual Studio 2015 TypeScript Project.
• Angular 2: Getting Started with a Visual Studio 2015 ASP.NET 4.x Project.

Enjoy!

It is sometimes difficult to find detailed step-by-step guidance for building an application using Angular and ASP.NET Web API. The Pluralsight course: “Angular Front to Back With Web API” covers the following topics from front to back:

• Retrieving Data
• CORS and Formatters
• Passing Parameters
• Using OData Queries
• Saving Data
• Action Results, Error Handling & Validation
• User Authentication & Authorization

(If you don’t have a Pluralsight membership, sign up for a free trial here.)

Here are some of the comments about the course from Twitter and the course discussion page:

Awesome WebAPI + Angular course!

Thanks for your great course, it helped me to understand how to establish different CURD action between front end and back end.

oh yea! Your course rocks too! Even a beginner can view this course and your other one and be successful.

Great course, it is really concise and to-the-point.

First of all I would like to congratulate you on publishing a fantastic set of courses on AngularJS Line of Business Apps and more so recently Angular Front to Back with Web API. I think what stands out for me is the way in which you provide holistic approach to delivering excellent technical content.

I Love your angularjs pluralsight courses. Learnt a lot and using at work.

Your classes on AngularJS on pluralsight is my reason am better than my peers, thanks

Thank you for building a .Net course F2B that uses (vm = this) and (controller as) syntax!!! You rock.

Enjoy!

My course on Visual Studio 2015 just went live today on Pluralsight: “Visual Studio 2015: A First Look at the IDE“.

(If you don’t have a Pluralsight membership, sign up for a free trial here.)

This course covers:

• Coding assistance with the new Light Bulb icon
• Renaming and refactoring enhancements
• Debugging improvements
• Layout customization features
• Touch gestures
• XAML Peek Definition
• Feedback changes
• CodeLens Enhancements

Enjoy!

In November of 2014, Microsoft announced that subscribers will receive a 12-month Pluralsight training benefit as part of its MSDN subscription. So if your New Year’s resolution was to update/enhance your development skills, this offer can help.

The number of courses included in this benefit depend on the type of MSDN subscription. As an example, my particular subscription includes 30 courses as shown below.

This set of course includes three of mine, as indicated above and described below.

Mastering Visual Studio 2013 focuses on the new features added to 2013 including Peek Definition, the enhanced scroll bar, Navigate To improvements, XAML editing enhancements, and CodeLen. This course is great if you are already using Visual Studio and want an update on the latest tools and editing features VS 2013 provides.

Visual Studio Data Tools for Developers is all about using SQL Server Data Tools (SSDT) in Visual Studio. This course is for you if you use SQL Server and Visual Studio and want to learn how to build database projects, check in database scripts, and easily deploy database changes using SSDT.

Defensive Coding in C# is for C# developers that want to write clean, maintainable, and testable code … and keep that code great even in the face of changing requirements, multiple developers, and the passing of time.

To activate your benefit:

1. Log into your MSDN account.
2. Select to activate your Pluralsight benefit:

Enjoy!

I am very excited to talk about AngularJS at the upcoming Visual Studio Live! conference in Washington DC!

The session is entitled “Build an Angular and Bootstrap Web Application in Visual Studio from the Ground Up“. It is aimed at intermediate level developers that are new to or just getting started with AngularJS. Because this *is* a Visual Studio conference, the sample application is built using a Visual Studio Web Site for the Angular application and ASP.NET Web API for the back-end Web service. (Though the talk only walks through the Angular code, not the Web API code … we only have 75 minutes!)

If you are looking for the code for this session, you can find it on github here.

If you are not familiar with github, just click the Download ZIP button in the bottom right to download a zip file containing the code.

If you are interested in more information about Angular, check out my latest Pluralsight course: “AngularJS Line of Business Applications”. The sample application for the course is built from scratch using WebStorm, but could be created using Visual Studio.

Enjoy!

Earlier this week I presented a preview of my two sessions for the Visual Studio Live! conference coming up in Washington DC on October 6-9, 2014. My two sessions at the conference are:

• New IDE and Editor Features in Visual Studio 2013
• Build an Angular and Bootstrap Web Application in Visual Studio from the Ground Up

In the preview, I outlined some of the new IDE and Editor features and then selected one to demonstrate.

I then provided an introduction to AngularJS, specifically what it is and why you may want to use it for development of client-side Web applications.

If you are interested, the recording of this preview presentation is posted here.

Enjoy!

Check out my Pluralsight courses!

Just a really big warning out there so you don’t share the same fate that I did!

I had been checking some of my Pluralsight course source files (code, PowerPoints, recordings, etc) into TFS. I was not checking in *all* of the files because some of them were quite large and it was taking 15-20 minutes to check in those files.

When working on code, it was difficult to see added files because under “Excluded Changes” I had “Detected: 782 add(s)”. With so many detected files, I often did not notice that my newest code files were excluded. The problem was that TFS was finding not only my project files but ALL of the Pluralsight course files (including the huge .wmv recordings) that were never checked in.

Now that I am starting my next course, I wanted to ensure that I could easily see what files should be checked in and which should not. So I looked up how to disconnect the older projects from a path so TFS would not longer report all of these additional adds.

It’s easy. Just right-click on the directory in Source Control Explorer and select Advanced | Remove Mapping. No warning message. Seemed easy enough until I looked at the output window:

Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\DefensiveCodingAbstract.docx
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\DefensiveCodingNotes.docx
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\AcmeCustomerManagement\AcmeCustomerManagement.sln

<Continuing on for several pages>

Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\module7-exceptions\module7-clip1.camproj
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\module7-exceptions\module7-clip2.camproj
Deleting C:\Users\Deb\Speaking\PluralSight\Defensive Coding in C#\module7-exceptions\module7-clip3.camproj

Yep. It deleted ALL of my files, including those I had never checked in. GONE!

BUMMER!

Hope I never have to update any of my past courses because all of the source files (recordings, etc) are just gone.

Thought I would share this experience with the hope that you won’t share the same fate.

P.S. Now for the rest of the story…

My friend Klaus came by the office today and told me about shadow copy.  Something I must have enabled early on because he found a copy of all of my files from Friday (before they were deleted by TFS on Monday). Hope to have all of the files back in place by the end of day. THANKS KLAUS!!