Post
Ask Question

Setting Up Angular 4 Development Environment In ASP.NET MVC And Web API

In this article, we will learn how to set up an Angular 4 development environment in Visual Studio 2017 without using Angular CLI.

Prerequisites
  • Node.JS should be installed (If it is not installed go to link download and install).
  • NPM should be installed (Run command line to install NPM: npm install -g npm@latest).
  • Visual Studio 2017 should be installed.
Step 1

Create a folder where you want to create an Angular 4 Application. For example, let's say: "E:\Programming\Angular\Angular4\Lab01".
 
Step 2

Open your command line or terminal window and navigate to the above folder ("E:\Programming\Angular\Angular4\Lab01"). Your folder location may be anywhere on your computer; just navigate to the folder location in the terminal window.
 
Step 3

Run this ( git clone https://github.com/angular/quickstart.git ng4Tpl) command in the command line or terminal window.
  1. git clone https://github.com/angular/quickstart.git ng4Tpl  
Angular
 
If you open the folder location "E:\Programming\Angular\Angular4\Lab01", you would get a quick start Angular 4 template in this folder as in the below screen.

Angular
 
But there are many unnecessary files and folders at the above location and we are not going to use them. If you want to see them, go to the above folder location and search for "non-essential-files.txt"  and open this file. Now, you can see the non-essential files and folders are listed there.
 
Angular
 
So now, let's remove those non-essential files and folders by running a few commands. Open command line or terminal window and navigate to the folder ("E:\Programming\Angular\Angular4\Lab01\ng4Tpl") and run the commands one by one.
  1. for /f %i in (non-essential-files.txt) do del %i /F /S /Q  
  2. rd .git /s /q  
  3. rd e2e /s /q  
Angular 
 
 Angular
 
Now, let us see all remaining files and folders.
 
Angular
 
Now, you can see the remaining files and folders. The initial content size of the quick start template was 1.26 MB but it is now only 20 KB.

Step 4

Now, let us create an ASP.NET MVC WEB API project.
 
Angular 
 
Angular 
 
Step 5

Now, ASP.NET MVC WEB API project has been created so let's import the necessary folders and files from Angular 4 template quickstart folder, i.e., "E:\Programming\Angular\Angular4\Lab01\ng4Tpl" to our created ASP.NET MVC Web API project as in the below screen.
 
Angular 
 
Step 6

Now, open "index.html" from the location "E:\Programming\Angular\Angular4\Lab01\ng4Tpl\src" and copy all script tag from there and open master page of ASP.NET MVC project i.e. (_Layout.cshtml) and paste all script tag as below screen.
 
"index.html" content would look like :
  1. <head>  
  2.     <title>Angular QuickStart</title>  
  3.     <base href="/">  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <link rel="stylesheet" href="styles.css">  
  7.   
  8.     <!-- Polyfill(s) for older browsers -->  
  9.     <script src="node_modules/core-js/client/shim.min.js"></script>  
  10.   
  11.     <script src="node_modules/zone.js/dist/zone.js"></script>  
  12.     <script src="node_modules/systemjs/dist/system.src.js"></script>  
  13.   
  14.     <script src="systemjs.config.js"></script>  
  15.     <script>  
  16.       System.import('main.js').catch(function(err){ console.error(err); });  
  17.     </script>  
  18.   </head>  
Modify the above contents as below and paste in "_Layout.cshtml". 
  1. <head>  
  2.     <meta charset="utf-8" />  
  3.     <meta name="viewport" content="width=device-width" />  
  4.     <title>@ViewBag.Title</title>  
  5.     @Styles.Render("~/Content/css")  
  6.     @Scripts.Render("~/bundles/modernizr")  
  7.     <!-- Polyfill(s) for older browsers -->  
  8.     <script src="/node_modules/core-js/client/shim.min.js"></script>  
  9.   
  10.     <script src="/node_modules/zone.js/dist/zone.js"></script>  
  11.     <script src="/node_modules/systemjs/dist/system.src.js"></script>  
  12.   
  13.     <script src="/systemjs.config.js"></script>  
  14.     <script>  
  15.       System.import('app/main.js').catch(function(err){ console.error(err); });  
  16.     </script>  
  17. </head>  
Angular 
 
Step 7

Make sure all the modifications are done in the "_Layout.cshtml" section exactly the same as the above screen and copy "<my-app>" element inside the body tag from "index.html" and paste it into "Index.cshtml" as below screen.
 
"index.html" content would look like,
  1. <body>  
  2.    <my-app>Loading AppComponent content here ...</my-app>  
  3.  </body>  
 "Index.cshtml" content would look like,
  1. <my-app>Loading AppComponent content here ...</my-app>  
Angular 
 
Step 8

Now go to ASP.NET MVC project and search for "package.json"  and right click on it and search for "Restore Packages" option and click on it as in the below screen. Once you click on the "Restore Packages" you can see package downloading in the "Package Manager Console" as in the below screen.

Angular
 
Once package installation is completed you can see "node_modules" in the project if you click on "Show All Files" in the solution explorer as in the below screen. Now again click on "Show All Files" to hide "node_modules".
 
Angular
 
Step 9

Build ASP.net MVC Web API project if you build your project you will get compile time error as in the below screen.

'Subject<T>' is not assignable to the same property in base type 'Observable<T>'.
Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
Type 'Observable<T>' is not assignable to type 'Observable<R>'.
Type 'T' is not assignable to type 'R'.
 
Angular 
 
Step 10

Now double click on the above-mentioned error in the Visual Studio 2017 error list it will navigate you to the error line in the file "Subject.d.ts" carefully read the error message.  "Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.Type 'Observable<T>' is not assignable to type 'Observable<R>'." It means there is a mismatched type. If you see the exact line of code from where the error is coming (lift<R>(operator: Operator<T, R>): Observable<T>;) then it is clear that function return type must be Observable<R> but it is Observable<T> this is the root cause of the error. Let's change the return type and try to build the project.
 
Replace 
  1. lift<R>(operator: Operator<T, R>): Observable<T>;   
From 
  1. lift<R>(operator: Operator<T, R>): Observable<R>;   
in file "Subject.d.ts" as in the below screen.

Angular 
 
Step 11

Now build your project --  it must re-build successfully as in the below screen.
 
Angular
 
Step 12

Now run your project, Visual Studio 2017 will launch your Angular4 web page in the browser automatically, If you are getting the "Hello Angular" message in the web page it means all is done.
 
Angular 
Step 13

If you want to check the Angular version, search "package.json" in the ASP.NET MVC WEB API project as below screen.

Angular 
 
Step 14

Done. 
 
Congratulations! You have successfully created an Angular 4 development environment in Visual Studio 2017. If you have any query or concern, just let me know or just put in the comment box and I will respond as soon as possible. I am open to discussing anything, even silly questions as well. If you have any suggestions related to this article, please let me know and I promise I will improve this article to a maximum level.
  
Summary

In this article, we have learned how to create an Angular 4 development environment in Visual Studio 2017 in C#.


Similar Articles