Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

May 11, 2016

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.

image

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.

image

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

image

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

image

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.

image

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

image

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’.

image

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.)

image

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

image

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.

image

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

image

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.

image

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!

51 Comments

  1.   Srinivas — November 18, 2016 @ 7:00 am    Reply

    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.

  2.   Alpesh Patel — January 5, 2017 @ 3:29 am    Reply

    How can i use angular 1.X.X with Angular 2?

    Is there any possibility to use?

  3.   Alpesh Patel — January 5, 2017 @ 3:30 am    Reply

    How can i use angular material 1.X.X with Angular2?

    Is there any possibility to use?

  4.   mrFoster — January 7, 2017 @ 4:38 am    Reply

    Thank you. It works exactly as it should, and that’s great!

  5.   Ravi Kumar Chendra — February 25, 2017 @ 7:24 am    Reply

    Hi DeborahK,

    Is it possible to provide an Setup instructions for Asp.net 5 and MVC6 with Angular 2 .

    Regards
    Ravi

  6.   Brian Holland — March 19, 2017 @ 3:34 am    Reply

    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    Reply

      Nevermind… Realized this is an issue with Resharper. I had to disable it for all html files.

  7.   Chayan Maji — April 6, 2017 @ 8:59 pm    Reply

    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    Reply

      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    Reply

        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

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2017 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs