Angular 2: Getting Started with a Visual Studio 2015 ASP.NET 4.x Project
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!
Ammar Khan — May 12, 2016 @ 4:59 am
Hi,
I am having issue with rxjs package inside Visual Studio. Angular RC 1 support rxjs beta 6 but when I updated my package from beta 2 to beta 6, none of the rxjs operator seems to be available.
https://i.imgsafe.org/8d39765.png
Please suggest
deborahk — May 12, 2016 @ 10:19 am
The instructions here were tested with Beta 15. When you updated to Angular RC 1, did you update all of the starter files (index.html, systemjs.config.js, package.json, typings.json, etc)?
Ammar Khan — May 12, 2016 @ 11:32 am
Yes, I updated all of them as instructed on angular.io.
I know this is beyond the scope of this post, but it would be great and highly appreciated if you can give this a try.
deborahk — May 12, 2016 @ 2:47 pm
This sounds like it matches your issue: https://github.com/Microsoft/TypeScript/issues/8518
Ammar Khan — May 17, 2016 @ 3:18 am
Yes, that works. Thanks so much for finding out 🙂
M.Tariq — May 17, 2016 @ 5:10 am
Thanks a lot for sharing.
Solved me the “Property ‘map’ does not exist.” problem.
Mark J. Caplin — May 17, 2016 @ 10:23 am
the following is what is needed in the project file to make MSBUILD work in Visual Studio
SpoofTypeScriptModuleResolution;
$(CompileTypeScriptDependsOn)
$(TypeScriptBuildConfigurations.Replace(‘–moduleResolution NodeJs’, ‘–moduleResolution node’))
Brian — June 3, 2016 @ 8:13 am
I began with new install of VS2015 (Pro) with Update 2 (on a machine with VS2013 in place), and all available updates, and added the TypeScript 1.8 package.
I’m plagued with error messages, including some devilishly misleading ones, mostly amounting to conflicts between VS2013 and VS2015 and their respective interference with common MSBuild settings, paths, etc.,
Eventually have a working example. I say ‘working’ because the app fires up in my browser and I can navigate and see new content rendered, despite VS2015 declaring that the build failed with 28 errors, most of which are “Cannot find module ‘@angular/xxx’.” when the IDE has apparently successfully found and parsed them to provide intellisense.
In a learning environment, it’s hard enough to make sure you understand why things work when they work and why they don’t when they don’t. It’s unfeasibly hard when things say they’re not working and then work, or say they’re working and then don’t!
Here’s hoping this project helps me implement my app with Angular2 + TypeScript at the front and WebApi an Azure Active Directly at the back.
deborahk — June 3, 2016 @ 11:45 am
I concur. As of now, I recommend learning Angular 2 with VS Code (or some other editor) because using VS 2015 is just too confusing. It’s hard to know when you’ve done something wrong vs it’s not giving you correct results. One of the biggest problems I ran into is that I would change the code and see no changes when running. I’d delete the .js files and the code would not recompile. Or it would recompile but still not show the changes. I understand that Microsoft is aware of some of these issues and I hope to see improvements soon.
Charles — June 23, 2016 @ 9:32 pm
Unfortunately, I am having an issue with visual studio complaining about the tsconfig.json file. I get the following error:
“Build: Unknown extension for file: ‘C:\Angular2\Angular2-GettingStarted-master\Angular2-GettingStarted-master\APM – Start VS 2015 ASP 4x\APMSolution\APM\tsconfig.json’. Only .ts and .d.ts extensions are allowed.”
This error has been plaguing me for a while now. If you have any suggestions of how to fix it, I would greatly appreciate it. I am very stuck.
deborahk — June 30, 2016 @ 9:43 am
Select the tsconfig.json file in Solution Explorer and view the properties. What is the Build Action set to? It should be set to “Content”. Sounds like yours may be set to “Compile”?
Lazaro — July 2, 2016 @ 5:22 pm
It worked for me.
The app.component.ts file is not in APM – Start\app folder. I took it from APM – Start VS 2015 ASP 4x\APMSolution\APM\app folder.
I downloaded the ZIP from Github on 07/02/2016.
Thank you @deborahkurata
Lazaro — July 3, 2016 @ 9:05 am
Hi,
The package.json in angular.io quickstart have some differences with your and I am curious to know why.
The properties about angular in “dependencies” object, they name them “@angular/…..” and in your package.json there is only “angular2”.
deborahk — July 6, 2016 @ 8:27 am
The course is set up to work with Angular 2 Beta 15 or below. The Angular team changed the import packages in the RC … along with changes to the router. See this blog post for more information on the changes: http://blogs.msmvps.com/deborahk/angular-2-getting-started-problem-solver/
As soon as the changes to Angular 2 slow down (hopefully later this month) I’ll be doing an update to this course.