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!
Srinivas — November 18, 2016 @ 7:00 am
Hi ,
i would like to deploy the application in IIS, but when i deploy that , its loading node_module from server its about 45MB , can i know whow to Minify,Bundle and zip the file to the extent that all the heavy loading gets eliminated.
deborahk — December 6, 2016 @ 11:23 am
You can use npm install –production to build just the files you need for deployment. Minification, bundling, and zipping really depend on the tools you want to use. For example, instructions for using WebPack are here:
https://angular.io/docs/ts/latest/guide/webpack.html
And using the AoT is here:
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#overview
Alpesh Patel — January 5, 2017 @ 3:29 am
How can i use angular 1.X.X with Angular 2?
Is there any possibility to use?
Alpesh Patel — January 5, 2017 @ 3:30 am
How can i use angular material 1.X.X with Angular2?
Is there any possibility to use?
mrFoster — January 7, 2017 @ 4:38 am
Thank you. It works exactly as it should, and that’s great!
Ravi Kumar Chendra — February 25, 2017 @ 7:24 am
Hi DeborahK,
Is it possible to provide an Setup instructions for Asp.net 5 and MVC6 with Angular 2 .
Regards
Ravi
deborahk — March 27, 2017 @ 1:59 pm
Have you seen this: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/
Brian Holland — March 19, 2017 @ 3:34 am
Hi Deborah,
I have setup everything as described.
There were some minor issues, like needing to have a couple extensions installed that were not listed in the instructions (NTVS and Node Task Runner), but I have the application running now.
However, the issue I am seeing is that VS2015 doesn’t recognize any of the css tags in the html files. I have blue squiggly lines everywhere. They all say “Unknown CSS class”.
Is there a way to get VS2015 to understand that these css classes are in the npm_modules\bootstrap directory?
I have another project where I created the application using a template, but I had the same issue. The only way I could solve the blue squiggly issue was to include the node_modules\bootstrap folder to the project. This seems like the wrong approach to have to include all the node_modules that you want intellisense for.
Any ideas on how I could solve this?
Thanks,
Brian
Brian Holland — March 21, 2017 @ 7:15 am
Nevermind… Realized this is an issue with Resharper. I had to disable it for all html files.
Chayan Maji — April 6, 2017 @ 8:59 pm
Hello
I followed exact same steps as mentioned above, there is no build error. But while I press the F5 button to run the application, I getting below error
‘iexplore.exe’ (Script): Loaded ‘Script Code (Windows Internet Explorer)’.
‘iexplore.exe’ (Script): Loaded ‘Sourcemap (http://localhost:61996/node_modules/core-js/client/shim.min.js)’.
Critical error was detected at line 590, column 36 in http://localhost:61996/node_modules/zone.js/dist/zone.js.
SCRIPT1010: Expected identifier
‘iexplore.exe’ (Script): Loaded ‘Sourcemap (http://localhost:61996/node_modules/reflect-metadata/Reflect.js)’.
Critical error was detected at line 503, column 26 in http://localhost:61996/node_modules/reflect-metadata/Reflect.js.
SCRIPT1010: Expected identifier
Critical error was detected at line 23, column 14 in http://localhost:61996/index.html.
SCRIPT1010: Expected identifier
The program ‘[14996] iexplore.exe’ has exited with code -1 (0xffffffff).
The program ‘[15028] iisexpress.exe’ has exited with code 0 (0x0).
Thanks
Chayan Maji
deborahk — April 6, 2017 @ 10:30 pm
These instructions are almost a year old and both Angular and Visual Studio have changed quite a bit since then. You may be better off following the instructions here: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
I believe they have been kept more up to date.
Hope this helps.
Chayan Maji — April 8, 2017 @ 8:46 pm
Hi
Thanks for your recommendation, I did follow the steps mentioned in the link, but I am getting the below errors.
Severity Code Description Project File Line Suppression State
Error “tsc.exe” exited with code 1. AngularTwo
Error TS2304 Cannot find name ‘describe’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 3 Active
Error TS2304 Cannot find name ‘describe’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 3 Active
Error TS2304 Cannot find name ‘beforeEach’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 7 Active
Error TS2304 Cannot find name ‘beforeEach’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 7 Active
Error TS2304 Cannot find name ‘it’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 11 Active
Error TS2304 Cannot find name ‘it’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 11 Active
Error TS2304 Cannot find name ‘expect’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 12 Active
Error TS2304 Cannot find name ‘expect’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 12 Active
Error TS2339 Property ‘getText’ does not exist on type ‘ElementFinder’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 12 Active
Error TS2339 Property ‘getText’ does not exist on type ‘ElementFinder’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\e2e\app.e2e-spec.ts 12 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\browser.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\browser.d.ts 1 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\browser.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\browser.d.ts 2 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\debugger.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\debugger.d.ts 1 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\debugger.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\debugger.d.ts 2 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\element.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\element.d.ts 1 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\element.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\element.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\index.d.ts 6 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\index.d.ts 6 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\locators.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\locators.d.ts 1 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\locators.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\locators.d.ts 2 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 2 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 2 Active
Error TS2307 Cannot find module ‘q’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 3 Active
Error TS2307 Cannot find module ‘q’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 3 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 4 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\plugins.d.ts 4 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 1 Active
Error TS1084 Invalid ‘reference’ directive syntax. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 1 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 2 Active
Error TS2307 Cannot find module ‘selenium-webdriver/chrome’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 3 Active
Error TS2307 Cannot find module ‘selenium-webdriver/chrome’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 3 Active
Error TS2307 Cannot find module ‘selenium-webdriver/firefox’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 4 Active
Error TS2307 Cannot find module ‘selenium-webdriver/firefox’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 4 Active
Error TS2307 Cannot find module ‘selenium-webdriver/http’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 5 Active
Error TS2307 Cannot find module ‘selenium-webdriver/http’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 5 Active
Error TS2307 Cannot find module ‘selenium-webdriver/remote’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 6 Active
Error TS2307 Cannot find module ‘selenium-webdriver/remote’. TypeScript Virtual Projects D:\Chayan\AngularTwo\AngularTwo\node_modules\protractor\built\ptor.d.ts 6 Active
Could you please help me to resolve the issue.
Thanks
Chayan Maji
deborahk — April 10, 2017 @ 3:15 pm
I just found out this morning that our update to that documentation from a week ago has not yet been published. Hopefully soon. If not, you can get the correct info from the PR here: https://github.com/angular/angular.io/pull/3433
Alternatively, you can use `dotnet new angular` as detailed here: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.aspx
deborahk — April 12, 2017 @ 11:56 am
Our most recent documentation updates were just released last night. So you can find the “correct” set of steps for VS 2015 here: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html Hope that helps!