ASP.NET MVC 5 – Using Angular 2 with TypeScript in Visual Studio

ASP.NET MVC 5 is widely used web development framework, it’s stable, matured and most importantly its is used in production on large scale. Many folks had requested me to write how to wire up Angular 2 in MVC 5.

Update 26/9 – Github repo is updated with Angular 2 Final release version. Install TypeScript 2.0 RC

These steps can be used for new or existing MVC 5 application.

In this post I will summarize the steps needed to getting started with Angular 2 in MVC 5.

ASP.NET MVC 5 is full .NET framework web development framework, it’s different than ASP.NET Core 1.0

What we will learn?

  1. Adding package.json to MVC 5
  2. Configure to transpile TypeScript files
  3. Using gulpfile.js to move files.
  4. Add TypeScript files for bootstrapping
  5. Include systemjs.config.js to load Angular 2 modules
  6. Change HTML to load and render Angular

Step 1: Adding package.json to ASP.NET MVC 5

Assuming that you already have existing or creating new ASP.NET MVC 5. Lets add NPM configuration file known as package.json. It contains Angular 2 & related package name to installed using NPM (Node). This is similar to package.config of NuGet.

Latest NodeJS & NPM needs to be installed.

package.json contains Angular 2 along with, system.js, RxJs and also some dev dependencies.

Open Command Prompt & navigate to package.json location, then run npm install this will install packages related to Angular 2 under node_modules folder in your folder structure.

They won’t be showing in project solution explorer, don’t worry they need not show.

Step 2: Configure to transpile TypeScript files

TypeScript(TS) would be new for most of developers, maybe these will give get started on TypeScript

In short – It’s superset of JavaScript, means everything you know about JS will be in use.

All TS files need to be transpiled or compiled to JS files so that we can run them on browser. To accomplish this we need to add “TypeScript Configuration File” called as tsconfig.json

Create a folder called “tsScripts” which contains all TS files and also configuration file. Create above tsconfig.json in this folder.

It’s fairly simple config “All TS files present in tsScripts folder will be transpiled using commonjs module to outDir (Output Directory) by keeping comments, sourceMap intact”

One of the important step is to create typings.json file, this file will create typings to ensure that TypeScript understands all Angular 2 modules in respect to ES5 standard.

Create JSON file with name “typings.json” & add below code then run command typings install from CMD

Step 3: Using gulpfile.js to move files

From Step 1 you got to know that all Angular 2, Material packages are downloaded into node_modules in your solution folder. Now we need to move required files only like JS, sourcemaps (debugging on chrome) into our MVC 5 apps Scripts folder.

Step 2 also requires to move TS files to JavaScript file, so we use create GULP tasks which does this transpile. Also it contains CSS files movement also (which is not relevant at this point)

Create gulpfile.js in your project and copy this code

Step 4: Add TypeScript files for bootstrapping

As we are using Angular 2 with TypeScript, we need to add TS file to bootstrap the Angular app into MVC 5 app. So let’s create boot.ts file in “TsScripts” folder and copy this code.

We using ngModule to browser specifics, AppComponent.

AppComponent is starter component which we have to create it now (app.ts). Add this code below

This is template based app component which displays list.

Now create tsScripts/main.ts, this entry point where Angular 2 loads the components.

Step 5: Include systemjs.config.js to load modules

This is most important part of Angular 2 which loads it into the browser. There are different ways to load it but am using SystemJS here.

In the existing “Scripts” folder, create “systemjs.config.js” and copy below code

Step 6: Change csHTML to load and render Angular 2

To load Angular 2 in ASP.NET MVC 5, we need to include the script references in _Layout file and index.cshtml page.

In the Views/Home/index.cshtml you need to add “my-app” component we defined in app.TS file. This is starting point of Angular 2 application to render into browser.

Now that we are almost done, we need to run GULP tasks so that Angular 2 files, TS files are moved to appropriate folder. Open Task Runner Explorer in Visual Studio 2015 and run default task shown.

Its better to do show ALL Files in solution Explorer to see “libs“, “typings“, “app.js, boot.js, *.map” files. Includes these files and run the application to load Angular 2 in ASP.NET MVC 5.

ASP.NET MVC 5 Angular 2

Running Angular 2 in ASP.NET MVC 5

I have entire source code is on my Github repo, clone or fork or download it and follow instructions to run it.

Let me know in comments if you face any issues running applications.

 

You may also like...

98 Responses

  1. typings install is giving error, need help asap

    i am using .net 4.5 framework on MVC

  2. sandeepapsingekar says:

    My Gulp file doesn’t run. It says failed to load.

  3. naveen says:

    Everything is working fine but i have a problem like if i change the name of the skills it doesn’t reflect even after reloading the page. So i have to close and open the Visual Studio and run the application again every time i change.Is there any other way so that i can see the changes after reloading the page?

  4. Shahjahan says:

    How do i install typings install from CMD. I cant figure it out. and whenever i rclick on gulpfile.js and open task runner, it shows failed to load. why this?

  5. Paul says:

    We have an existing ASP.net MVC5 Web Application. We are about to embark on a new feature for the application that we believe would be condusive to an SPA style app as it is quite chatty. We want to use AngularJS 2.0. I have found many articles about how to set up Angular with an existing MVC app but still now sure how it will all work and look. i.e. What would the architecture look like? Do we retain the existing MVC navigation side bar or does the shell need to be rewritten? If initially only new modules would be SPAs i.e. written in Angular how would they work with the existing site? Or should they be separate sites? And if so how do we authenticate from one site to another? How should we migrate the controllers to API controllers?

  6. touinta says:

    hello I follow your tutorial but I get several errors (150)
    The one of them is:
    Error TS2403 Subsequent variable declarations must have the same type. Variable ‘main’ must be of type ‘any’, but here has type ‘NodeModule’. TypeScript Virtual Projects C:\MyprojectName\node_modules\@types\node\index.d.ts 70 Active

    • touinta says:

      Hello again, I manage to correct this issue, but now I get another one:
      Severity Code Description Project File Line Suppression State
      Error Build:Cannot find name ‘Set’. UploadFiles C:\MyProjectName\node_modules\@angular\common\src\directives\ng_class.d.ts 46

      Any idea?
      thank you

      • I hope you followed the steps on github repo (Readme).

        • touinta says:

          Hello I read the the steps on github but I dont need to create a new app because I have alreday one and I dont want to create all the code from the begging. Sorry because I didn’t paste the error correct. Actually is “Duplicate identifier Property Key” and another one among other is
          “All declarations of ‘name’ must have identical modifiers”. Thank you.

  7. Arie Salma says:

    Hi
    How can i expand this project to handle EF with Angular2?

  8. Krupa Thakker says:

    Hi Mithun,

    I followed all the steps as mentioned in your code.

    I am getting below 2 compile time errors:
    1. Build:File ‘MyProjectpath/node_modules/gulp-typescript/lib/main.ts’ not found.
    2. Build:File ‘MyProjectpath/node_modules/gulp-typescript/typings/tsd.d.ts’ not found.

    Any help to resolve this error would be of great help.

    Also, I have below quries:
    1. As mentioned in gulpfile.js, I do not have libs folder – .pipe(gulp.dest(“./libs”));. Does this folder gets created on successful build?
    2. In tsconfig.json the attribute “module”: “commonjs”, I dont see the commonjs folder either.

    Kindly reply.
    Many Thanks,
    Krupa

    • There are few steps which you missed from article or github repo steps. You need to install typings to resolve first 2 errors.

      libs folder gets created when you run gulp task from Task Runner Explorer in Visual Studio. When using TypeScript, the transpiling (compiling) to JavaScript done using tsconfig.json and module resolution technique used is commonjs. Note it’s not a folder.

      • Krupa Thakker says:

        Thanks for the prompt reply.

        The first 2 errors are not coming now. Build is successful. But on running the gulpfile.js i am getting below error.
        Failed to run “myProjectpath\Gulpfile.js”…
        cmd.exe /c gulp –tasks-simple
        ‘gulp’ is not recognized as an internal or external command,
        operable program or batch file.

        Also when i Execute my application I get runtime error on console window which says
        1. require is not defined at myprojecturl/node_modules/rxjs/rx.js
        2. require is not defined at myprojecteurl/scripts/app.js

        I have installed npm in my package.json project path.

        Please help.

        Thanks,
        Krupa

        • Krupa Thakker says:

          Also I do have the gulp files like gulp, gulp-clean, gulp-typescript in node_modules folder. The node_modules folder is not included in the project

          • Krupa Thakker says:

            I got it working. The issue was the folder name tsScripts in my project is “TsScripts” So I guess gulpfile.js is case sensitive. On changing the case it worked and the libs folder got created.

            Thanks for the help

          • Glad to know it worked fine !! Mistakes makes us learn more…

      • Krupa Thakker says:

        Hi Mithun,

        Do you have any working sample code for calling a webapi service with parameters using Angular 2 in MVC 5 ?

        I have just started using Angular 2 in MVC 5 and I am not aware about the exact flow of the service call.

        I have created a WebApi project. That has a webmethod which will give me the given user information.

        I want to call this webapi using angular 2.

        What I have achieved so far is:

        1. Created a UserModule.ts which is a class with required user properties like username, email , userpicture etc.
        UserModel.ts

        export class UserModel {
        fullName: string;
        imageUrl: string;
        redirectUrl: string;
        userId: string;
        }

        2. Created a UserInfo.ts which will call the User.Service.ts

        ///
        ///
        ///

        import ‘rxjs/add/operator/switchMap’;
        import { Component, OnInit } from ‘@angular/core’;
        import { ActivatedRoute, Params } from ‘@angular/router’;
        import { Location } from ‘@angular/common’;
        import { UserModel } from ‘./UserModel’;
        import { UserService } from ‘./User.service’;

        // The Office initialize function must be run each time a new page is loaded

        Office.initialize = function () {
        $(document).ready(function () {
        // $(“#toUser”).text(‘Hello world’);
        // displayItemDetails();
        displayToEmailAddress();
        });
        };
        function displayItemDetails() {
        $(“#toUser”).text(‘Hello Krupa’);
        var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
        $(‘#toUser’).text(item.subject);

        }

        function displayToEmailAddress() {

        var toitem = Office.cast.item.toItemRead(Office.context.mailbox.item);

        var itemAdd = new Array();
        itemAdd.push(Office.cast.item.toMessageRead(Office.context.mailbox.item).to);
        itemAdd.push(Office.cast.item.toMessageRead(Office.context.mailbox.item).cc);
        itemAdd.push(Office.cast.item.toMessageRead(Office.context.mailbox.item).from);

        var toAdd = itemAdd[0];
        for (var i = 0; i < toAdd.length; i++) {
        (document.getElementById(“toUser”)).innerHTML += “Display Name: ” + toAdd[i].displayName + “; Email: ” + toAdd[i].emailAddress + “”;
        }

        var cc = itemAdd[1];
        for (var i = 0; i < cc.length; i++) {
        (document.getElementById(“toUser”)).innerHTML += “Display Name: ” + cc[i].displayName + “; Email: ” + cc[i].emailAddress + “”;
        }

        var Bcc = itemAdd[2];
        for (var i = 0; i < cc.length; i++) {
        (document.getElementById(“toUser”)).innerHTML += “Display Name: ” + Bcc.displayName + “; Email: ” + Bcc.emailAddress + “”;
        }

        }

        export class UserInfoComponent implements OnInit {
        UserModel: UserModel;

        constructor(
        private userService: UserService,
        private route: ActivatedRoute,
        private location: Location
        ) { }

        ngOnInit(): void {
        this.route.params
        .switchMap((params: Params) => this.userService.getUser(params[’email’]))
        .subscribe(UserModel => {
        this.UserModel = UserModel
        console.log(this.UserModel);
        }
        );
        }

        }

        3. User.Service.ts will call the webapi method

        User.Service.ts Code

        import { Injectable } from ‘@angular/core’;
        import { Headers, Http } from ‘@angular/http’;

        import ‘rxjs/add/operator/toPromise’;

        import { UserModel } from ‘./UserModel’;

        @Injectable()
        export class UserService {
        private headers = new Headers({ ‘Content-Type’: ‘application/json’ });
        private userUrl = ‘http://localhost:54531/api/User/GetUserData’;

        constructor(private http: Http) {

        }

        getUser(email: string): Promise {
        const url = ‘${this.userUrl}/${email}’;
        return this.http.get(url)
        .toPromise()
        .then(response => response.json().data as UserModel)
        .catch(this.handleError);

        }

        private handleError(error: any): Promise {
        console.error(‘An error occurred’, error); // for demo purposes only
        return Promise.reject(error.message || error);
        }
        }

        In the above getUser method I want to create a usermodel object based upon the data response. But i dont know what should be syntax for it. Can you please guide me ?

        4. User/Index.cshtml – I have a div in this . This div should be loaded with the given user details on my project load.
        So , am i suppose to add userinfo.js reference in my cshtml file or do i need to add userinfo.ts file in the systemjs.config.js file like this

        packages: {
        app: {
        main: ‘./userinfo.js’,
        defaultExtension: ‘js’
        },

        Could you please guide me , how to boot my UserInfo.ts file in my angular application ?

        Any help would be greatly appreciated.

        Thanks,
        Krupa

    • Krupa Thakker says:

      Hi Mithun,

      Do you have any sample application in Angular 2 MVC 5 which calls webapi method with parameter ?

      I have to create one application to show List of users along with the user picture and then the selected user details.

      Any help would be greatly appreciated.

      Thanks,
      Krupa

  9. Nishant says:

    How to pass viewbag data to angular 2 component?

  10. Nishant says:

    Is it possible to replace MVC routing with Angular 2 routing completely? I am facing a problem that when refreshing a page it jumps to MVC route which I don’t want to.

    • Yes its possible, you need to create mini SPA application for MVC5. It’s not really replacing but making MVC & Angular together

      • Krupa Thakker says:

        In my libs folder, I don’t see the jquery & bootstrap folder. Am i doing anything wrong in gulfpile.js ?

        gulp.task(“scriptsNStyles”, function() {
        gulp.src([
        ‘core-js/client/**’,
        ‘systemjs/dist/system.src.js’,
        ‘reflect-metadata/**’,
        ‘rxjs/**’,
        ‘zone.js/dist/**’,
        ‘@angular/**’,
        ‘jquery/dist/jquery.*js’,
        ‘bootstrap/dist/js/bootstrap.*js’
        ], {
        cwd: “node_modules/**”
        })
        .pipe(gulp.dest(“./libs”));
        });

        • Need not worry, those will be available as part of MVC 5 project also using bundles.

          • Krupa Thakker says:

            The application loads successfully with the desired UI as yours but I still get this error in the console window
            require is not defined in app.ts.

            Also , I am referring to HTTP to call my webapi method but it gives me error like No provider for http

            Do you have any solution for this 2 errors ?

  11. Dany says:

    Hi,

    I tried to run this via IIS and got the following error :

    zone.js:1382 XMLHttpRequest cannot load npm:@angular/platform-browser/bundles/platform-browser.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

    Any idea why?
    Many thanks in advance 🙂

  12. Dhulhum says:

    Nice tutorial
    Can you please explain how I can connect to oracle database … when I tried to get data..iam getting data but without view..only json result is displayed on screen..

    • Can you elaborate again? Not able to catch your phrases.

      • Dhulhum says:

        I followed tour of heroes tutorial from angular 2 website. And iam calling web api method to retrieve values ..the method is returning values and the values are getting displayed on screen as json string values..

        E.g. [{“id”:1,”name”:”test”}]

        I tried model object and oracle connection string to retrieve values but I was getting error. So I directly connected using oracle connection and iam returning json values in the web api method called from angular 2.

        [HttpGet]
        [Route(“”,name=”api/Home”)]
        Public string Get(){
        Datatable list=new Datatable();
        Db.openconnection();
        String cmd = “select * from autogentrans”;
        Oracledataadapter da = new oracledataadapter(cmd,db.connection);
        da.fill(list);
        String jsonstring =jsonconvert.serializeobject(list);
        return jsonstring;

        }

        Is this correct?

  13. Ross says:

    Thanx for the great tutorial. Is anyone elses .html files being cached in the project? I cant seem to update my .html files, and I see all .html files are not migrated to the Scripts folder. I am using .html files as my templates for components. If I cahnge a component everything gets updated fine.

  14. Nybroe says:

    Great setup – It works perfectly locally but I am having some troubles when trying to build the solution on Visual Studio Team Services.:
    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Web\Microsoft.Web.Publishing.targets (2606, 5)
    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Web\Microsoft.Web.Publishing.targets(2606,5): Error : Copying file tsScripts\app.js to obj\Release\Package\PackageTmp\tsScripts\app.js failed. Could not find file ‘tsScripts\app.js’.

  15. Gjure says:

    Can you put the project on github, or somewhere else ?

  16. scott says:

    We have an existing MVC site and would like to start replacing UI elements with Angular 2 components. Is it possible to load a single component.ts in part of the cshtml page, instead of having to run the entire site as an angular 2 app? I did a proof of concept with Angular 1 and it’s easy to just load the controller.js files inside the cshtml files, but we’d like to know if this same design can be done with angular 2. Thanks.

  17. gibi says:

    I found this error after running the default gulp task. Please help
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name ‘Set’.
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name ‘Promise’.
    [10:41:43] TypeScript: 70 semantic errors
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/compile_metadata.d.ts(347,20): error TS2304: Cannot find name ‘Set’.
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/compile_metadata.d.ts(348,15): error TS2304: Cannot find name ‘Set’.
    [10:41:43] TypeScript: 70 emit errors
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/directive_normalizer.d.ts(19,100): error TS2304: Cannot find name ‘Promise’.
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/directive_normalizer.d.ts(21,74): error TS2304: Cannot find name ‘Promise’.
    [10:41:43] TypeScript: emit failed
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/offline_compiler.d.ts(15,26): error TS2304: Cannot find name ‘Map’.
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/offline_compiler.d.ts(16,38): error TS2304: Cannot find name ‘Map’.
    [10:41:43] Finished ‘ts’ after 7.33 s
    C:/dev/FirstAssignment/FirstAssignment/FirstAssignment/node_modules/@angular/compiler/src/offline_compiler.d.ts(31,124): error TS2304: Cannot find name ‘Promise’.

  18. Nikolay says:

    How can i use model from controller in page in Angular 2?

  19. Nishant says:

    On running the app I am getting error
    “tsc.exe” exited with code 1.

  20. CB says:

    seems to work fine, except … “gulp.task(“scriptsNStyles”, () => {” as mentioned above. Thanks.

  21. Anton Skripec says:

    I downloaded it today. Changed the lambda top function in gulp task.
    I works great.

  22. Kishor K Acharya says:

    How to get ride this error

    Failed to run “C:\Users\user\Downloads\ng2Mvc5Demo-master1\ng2Mvc5Demo-master\ng2Mvc5Demo\Gulpfile.js”…
    cmd.exe /c gulp –tasks-simple
    C:\Users\user\Downloads\ng2Mvc5Demo-master1\ng2Mvc5Demo-master\ng2Mvc5Demo\gulpfile.js:12
    gulp.task(“scriptsNStyles”, () => {
    ^
    SyntaxError: Unexpected token )
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Liftoff.handleArguments (C:\Users\kishor\Downloads\ng2Mvc5Demo-master1\ng2Mvc5Demo-master\ng2Mvc5Demo\node_modules\gulp\bin\gulp.js:116:3)
    at Liftoff. (C:\Users\kishor\Downloads\ng2Mvc5Demo-master1\ng2Mvc5Demo-master\ng2Mvc5Demo\node_modules\gulp\node_modules\liftoff\index.js:198:16)
    at module.exports (C:\Users\kishor\Downloads\ng2Mvc5Demo-master1\ng2Mvc5Demo-master\ng2Mvc5Demo\node_modules\gulp\node_modules\liftoff\node_modules\flagged-respawn\index.js:17:3)
    at Liftoff. (C:\Users\kishor\Downloads\ng2Mvc5Demo-master1\ng2Mvc5Demo-master\ng2Mvc5Demo\node_modules\gulp\node_modules\liftoff\index.js:190:9)

    I have installed nodeJS and TypeScript also and the tsconfig.json is the valid location

    Thanks in advance

  23. Tavo says:

    Where in the solution do you install “package.json”?

  24. hi, thanks for tutorial. I have issue as : “tsc.exe” exited with code 1.
    How can I solve this?

  25. Donny B. says:

    You have intermixed TypeScript into your gulpfile.js:

    gulp.task(“scriptsNStyles”, () => {

    should be

    gulp.task(“scriptsNStyles”, function () {

  26. Dilnuwan says:

    gulp.task(“scriptsNStyles”, () => {
    gulp.src([
    ‘core-js/client/**’,
    ‘systemjs/dist/system.src.js’,
    ‘reflect-metadata/**’,
    ‘rxjs/**’,
    ‘zone.js/dist/**’,
    ‘@angular/**’,
    ‘jquery/dist/jquery.*js’,
    ‘bootstrap/dist/js/bootstrap.*js’
    ], {
    cwd: “node_modules/**”
    })
    .pipe(gulp.dest(“./libs”));
    });

    shows me a error in above code

  27. ram says:

    this is working fine with me as i work with chrome , when working with IE i receive the following errors
    Error: SyntaxError: Expected ‘)’ in regular expression
    Firefox :
    Error: @http://localhost:41935/Scripts/Expenses.component.js:13:27
    @http://localhost:41935/Scripts/Expenses.component.js:1:31
    @http://localhost:41935/Scripts/Expenses.component.js:1:2
    @http://localhost:41935/Scripts/Wallet.component.js:13:28
    @http://localhost:41935/Scripts/Wallet.component.js:1:31
    @http://localhost:41935/Scripts/Wallet.component.js:1:2
    @http://localhost:41935/Scripts/Wallets.component.js:12:26
    @http://localhost:41935/Scripts/Wallets.component.js:1:31
    @http://localhost:41935/Scripts/Wallets.component.js:1:2
    @http://localhost:41935/Scripts/app.js:12:27
    @http://localhost:41935/Scripts/app.js:1:31
    @http://localhost:41935/Scripts/app.js:1:2
    @http://localhost:41935/Scripts/boot.js:4:13
    @http://localhost:41935/Scripts/boot.js:1:31
    @http://localhost:41935/Scripts/boot.js:1:2
    ZoneDelegate.prototype.invoke@http://localhost:41935/libs/zone.js/dist/zone.js:203:19
    Zone.prototype.run@http://localhost:41935/libs/zone.js/dist/zone.js:96:24
    scheduleResolveOrReject/<@http://localhost:41935/libs/zone.js/dist/zone.js:462:52
    ZoneDelegate.prototype.invokeTask@http://localhost:41935/libs/zone.js/dist/zone.js:236:23
    Zone.prototype.runTask@http://localhost:41935/libs/zone.js/dist/zone.js:136:28
    drainMicroTaskQueue@http://localhost:41935/libs/zone.js/dist/zone.js:368:25
    ZoneTask/this.invoke@http://localhost:41935/libs/zone.js/dist/zone.js:308:25

    Evaluating http://localhost:41935/Scripts/Expense.component.js
    Evaluating http://localhost:41935/Scripts/Expenses.component.js
    Evaluating http://localhost:41935/Scripts/Wallet.component.js
    Evaluating http://localhost:41935/Scripts/Wallets.component.js
    Evaluating http://localhost:41935/Scripts/app.js
    Evaluating http://localhost:41935/Scripts/boot.js
    Error loading http://localhost:41935/Scripts/boot.js

  28. David A McKelvie says:

    As with all your Angular 2 based projects, whether .Net or .Net Core, they build but when I start debugging, they all get stuck at “Loading…”. I’m using the code from your repro verbatim.

    • Press F12 in chrome to see console tab, this will show errors if any while running. Post that error in comments, I will help you to resolve.

      I hope you have TypeScript 2.0 RC installed. That is mandatory

    • David A McKelvie says:

      OK, sorted it. There are no gulp.js bindings so I suspect that the bindings are not being persisted in your repo’s. Adding an After Build binding to “default” causes the build to hang. Traced this to the “watch” task so removing it from “default” allows the build to complete and when I debug the build now, it works.

  29. david says:

    Great tutorial! I was able to use this to get started with the official release with few modifications. My only request is that you explain your gulpfile in a bit more detail. I’m new to gulp and struggling to understand most of the code past line 30. Thanks for all you do!

  30. gondias says:

    Now that Angular 2 final version is released would be great if you could update your code. Thanks!!

  31. Prayag says:

    I am getting same error messages. Have you fixed that?

  32. Hello says:

    How do I over come the following:

    > cmd.exe /c gulp -b “C:\Users\TMathab\Desktop\ng2Mvc5Demo-Cloned\trunk\ng2Mvc5Demo” –color –gulpfile “C:\Users\TMathab\Desktop\ng2Mvc5Demo-Cloned\trunk\ng2Mvc5Demo\Gulpfile.js” default
    [12:47:51] Using gulpfile ~\Desktop\ng2Mvc5Demo-Cloned\trunk\ng2Mvc5Demo\Gulpfile.js
    [12:47:51] Starting ‘scriptsNStyles’…
    [12:47:51] Finished ‘scriptsNStyles’ after 12 ms
    [12:47:51] Starting ‘ts’…
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(12,14): error TS1005: ‘=’ expected.
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(12,24): error TS1005: ‘;’ expected.
    [12:48:05] TypeScript: 11 syntax errors
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(24,14): error TS1005: ‘=’ expected.
    [12:48:05] TypeScript: emit failed
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(24,24): error TS1005: ‘;’ expected.
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/position/connected-position-strategy.d.ts(24,14): error TS1005: ‘=’ expected.
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/position/connected-position-strategy.d.ts(24,23): error TS1005: ‘;’ expected.
    [12:48:05] Finished ‘ts’ after 14 s
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/overlay/position/connected-position-strategy.d.ts(24,47): error TS1005: ‘=’ expected.
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/portal/portal.d.ts(14,14): error TS1005: ‘=’ expected.
    [12:48:05] Starting ‘watch.ts’…
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/portal/portal.d.ts(14,24): error TS1005: ‘;’ expected.
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/portal/portal.d.ts(53,14): error TS1005: ‘=’ expected.
    [12:48:05] Finished ‘watch.ts’ after 9.96 ms
    C:/Users/TMathab/Desktop/ng2Mvc5Demo-Cloned/trunk/ng2Mvc5Demo/node_modules/@angular2-material/core/portal/portal.d.ts(53,20): error TS1005: ‘;’ expected.
    [12:48:05] Starting ‘watch’…
    [12:48:05] Finished ‘watch’ after 7.25 μs
    [12:48:05] Starting ‘default’…
    [12:48:05] Finished ‘default’ after 5.12 μs

  1. January 20, 2017

    […] ASP.NET MVC 5 – Using Angular 2 with TypeScript in Visual Studio […]

Leave a Reply