By   Calendar icon Jun 30, 2019   Level <!--levelNumber--> icon


Here we explain how to install Angular 7 in an ASP.NET MVC 5 application using the SystemJS loader.


Installing Angular on ASP.NET MVC with SystemJS

By installing the official Angular 7 package in any directory, there is no difficulty in developing and testing an application. To develop, you can use Visual Studio or Visual Studio Code. But integrating the Angular app into an ASP.NET MVC app will not be automatic. In this article, we will integrate an Angular 7 application with SystemJS.

First and foremost, we need to install Node.js in our operating system (Windows), create an application with Visual Studio ASP.NET MVC and create an Angular application in the main directory of the app with the command

ng new Angular7app

Then in the Angular7app directory, open a shell command and type the command

npm installs

ng serve open

to try the application in the browser.

But the problem is then to integrate the Angular application into the web application ASP.NET MVC,

a Nuget package was used to develop the application. The application must be integrated manually.

We will use the JavaScript SystemJS script here rather than the Webpack script.

You should know that SystemJS has evolved and runs in its latest versions more configuration script.

So, we're going to use an older version of SystemJS that allows you to better configure the execution of some JavaScript modules.

The Angular application will therefore run on the client side and SystemJS has the function of loading useful modules during execution.

Another script is needed to complete SystemJS, this is module-map-ngfactory-loader

that was supplied with Angular 4 and that fixes a SystemJS bug.

So, let's change the package.json file

  "name": "angular7",
  "version": "1.0.0",
  "private": true,
  "requires": true,
  "scripts": {},
  "dependencies": {
    "@angular/animations": "7.2.15",
    "@angular/common": "7.2.15",
    "@angular/compiler": "7.2.15",
    "@angular/compiler-cli": "7.2.15",
    "@angular/core": "7.2.15",
    "@angular/forms": "7.2.15",
    "@angular/platform-browser": "7.2.15",
    "@angular/platform-browser-dynamic": "7.2.15",
    "@angular/platform-server": "7.2.15",
    "@angular/upgrade": "7.2.15",
    "@angular/http": "7.2.15",
    "@angular/router": "7.2.15",
    "angular-in-memory-web-api": "0.8.0",
    "bootstrap": "3.3.7",
    "core-js": "2.6.5",
    "rxjs": "6.5.2",
    "rxjs-compat": "6.5.2",
    "systemjs": "0.21.6",
    "zone.js": "0.8.26"
  "devDependencies": {
    "@types/node": "10.12",
    "@types/zone.js": "0.5.12",
    "typescript": "3.3.1",
    "gulp": "4.0.2",
    "gulp-clean": "0.4.0",
    "gulp-concat": "2.6.1",
    "gulp-typescript": "5.0.1",
    "path": "0.12.7"

From the main directory of the application and let's add a few lines

Executing npm install in shell command to update installation.

Let's now create a html file in the working directory and insert in it the scripts calling the Angular application.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <base href="/">
    <!--<script src="/angular7demo/dist/out-tsc/src/main.js"></script>-->
    <script src="/angular7demo/node_modules/zone.js/dist/zone.js"></script>
    <script src="/angular7demo/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/angular7demo/dist/out-tsc/src/main.js"></script>

Our facility presents a problem

It is based on the modules of the node-modules directory that contains a lot of useless files to run the application

So, we're going to create a Gulp file that will copy into another directory the useful JavaScript files.

For this we use the latest version of Gulp