Prepare ASP.NET projects (Web Forms / MVC / Core) to use Angular 4
As as ASP.NET developer working with latest trends you might want to use
Angular 4 in your projects. Unlike libraries such as jQuery, Angular 4 is a
framework and there are quite a few steps involved before you actually start
utilizing its powerful features. To that end this article explains the steps
necessary to prepare your ASP.NET projects to use Angular 4. We will discuss the
process for all the three flavors of ASP.NET available today - ASP.NET Web
Forms, ASP.NET MVC and ASP.NET Core.
Below are the 10 steps to get you started with Angular 4 in an ASP.NET
project.
Step 1 - Install Node and Npm
The first step is to install Node.js and Npm (Node Package Manager). We won't
use Node.js here but we need to install it because Npm gets installed as a part
of the installation. You can download Node.js
here.
Simply run the downloaded installer and follow the instructions. Once the
installation is complete locate Node.js program group and open the Node.js
Command Prompt. Issue the following two commands one after the other and verify
the version numbers.
> node -v
> npm -v
Here is a sample run:

Step 2 - Install Angular CLI
Next, we need to install Angular Command Line Interface or Angular CLI. The
Angular CLI offers a command liner interface to perform several Angular tasks
such as creating an Angular app and creating Angular components and many others.
To install Angular CLI issue the following command at the Node.js command
prompt:
> npm install -g @angular/cli
To test the installation issue the following command:
> ng -v
Doing so will display the Angular CLI version as shown below:

Step 3 - Install TypeScript
Your Angular 4 app will use TypeScript. So, you also need to install
TypeScript.
To install TypeScript issue the following command at the Node.js Command
Prompt:
> npm install -g typescript
To check the TypeScript version issue this command:
> tsc -v
It will respond with something like this:

Step 4 - Create an ASP.NET app
Now we have basic frameworks required to create Angular 4 apps. Remember that
your Angular 4 app is going to reside inside your ASP.NET app. So, within a
folder structure you have ASP.NET project files as well as Angular 4 files. The
Angular 4 app is launched from an ASP.NET page (Web Form or View) and then it
can talk to the server side using Ajax calls as and when required. Of course, in
this article we are not going to make any Ajax calls as such.
To begin this step, create three ASP.NET applications - Web Forms, MVC and
Core - and add them to the same solution. We are doing this just to explain the
subtle differences that you should be aware of while using Angular 4. The
following figure shows how the Solution Explorer looks like with these three
projects.

Step 5 - Create an Angular app
Next step is to create a basic Angular 4 application in all the three ASP.NET
projects you just created.
Open the Node.js Command Prompt again and navigate to the ASP.NET Web Forms
project root folder. Then issue the following command :
> ng new AngularApp
This command will create a new Angular 4 app named AngularApp and place all
the required Angular 4 files under the <aspnet_project_root>\AngularApp folder.
This is how the Web Forms project looks like after this step. MVC and Core
projects should look identical.

The command prompt will also show the success message as follows:

Repeat the same process for the ASP.NET MVC project. The MVC project folder
structure will resemble this:

Finally, navigate to the wwwroot folder of the ASP.NET Core application and
issue the same command. This time the folder structure will resemble as shown
below:

Step 6 - Write some Angular 4 code
Now that you successfully created Angular 4 app in all the three projects,
it's time to tweak the code a bit.
Locate the AngularApp/src/app/app.component.ts file and open it in Visual
Studio editor. Modify this file as shown below:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Angular App';
}
Notice that we modified the title of AppComponent from app to My Angular App.
Also open app.component.html and just see how the HTML template of the component
looks like. If you wish you can change some HTML markup here and see whether the
change reflects when the page loads.
Ok. Save the file and close it.
Repeat the same process in the other two projects also.
Step 7 - Build the Angular 4 app
Now minimize Visual Studio IDE and switch to the Node.js command prompt
again.
Navigate to the AngularApp folder and issue this command to build the Angular
app:
> ng build --base-href /AngularApp/dist/
This command will compile the TypeScript code of the AngularApp and do a few
other tasks for you. The --base-href option specifies the base folder path that
is used in the <script> references. This will be clear when we add the ASP.NET
page.
Once this command does its job you will find the dist folder under the
AngularApp folder as shown below:

Repeat the same for all the ASP.NET projects. All the AngularApp/dist folders
should look identical.
Step 8 - Create ASP.NET page to launch the Angular app
At this point your Angular 4 app is ready. However, you would like to house
it in your ASP.NET page rather than the default HTML page. So, do the following:
- In the Web Forms project add a new Web Form named Default.aspx to the
root folder.
- In the MVC project add HomeController and Index.cshtml as you normally
do.
- In the Core project add HomeController and Index.cshtml as you normally
do.
You would like to launch the Angular 4 app from these .aspx and .cshtml
files. Just for the sake of clarity ASP.NET MVC project structure is shown
below:

The ASP.NET Core folder structure would be similar as far as the controller
and the view is concerned.
Step 9 - Include Angular 4 script references in the ASP.NET page
Locate AngularApp/dist/Index.html and open it in Visual Studio. Here is what
it contents:

Notice a few things:
- The base tag specifies the base path for the URLs from this page to be /AngularApp/dist/.
If you remember this is what we specified in the --base-href option while
invoking the build command.
- The <app-root> is an Angular directive. It's obviously not a standard
HTML markup. It will be processed by your component.
- There is a series of <script> references that include several JavaScript
files.
Copy this markup and paste it in the Default.aspx as well as Index.cshtml
views (from MVC project and Core project). Save the files when that's done.
Step 10 - Run the ASP.NET and Angular app
Save everything from the project and build the ASP.NET project in the Visual
Studio. Take a deep breath and press F5. If all goes well you should see the
welcome message like this:

In this article we discussed a simple and straightforward way to use Angular
4 in your ASP.NET applications. Of course, you might want to explore and
fine-tune aspects such as templates, output directory, and deployment of the
app. In the next installment we will do something more meaningful and
interesting.
That's it for now ! Keep coding !!