Starting Angular 2 in ASP.NET Core with TypeScript using Visual Studio 2015

This tutorial aims for starting Angular 2 in ASP.NET Core using Visual Studio 2015. The release of Angular 2, ASP.NET Core RC is becoming interesting to build SPA.

I have compiled the steps involved in starting to learn Angular 2. This is detailed explanation, you will feel much easier at end of article.

October 1 2016 – Article updated with ASP.NET Core, Angular 2 Final release with Webpack as module bundler .

Step 1 : Creating an empty ASP.NET Core project

Open Visual Studio 2015 Community Edition Update 3, Select New Web Project naming it “ngCoreContacts” and select “Empty” project template. Don’t forget to install new web tools for ASP.NET Core 1.0

Angular 2 in ASP.Net Core

Creating Empty Asp.NET Core app

I used Visual Studio 2015 Community Edition Update 3(Must update), TypeScript 2.0 (must), latest NPM, Gulp.

We are writing Angular 2 in ASP.NET Core with TypeScript but we can use JavaScript and Dart . TypeScript is personal choice.

Step 2: Configure ASP.NET Core to serve Static Files

ASP.NET Core is designed as pluggable framework to include and use only necessary packages, instead of including too many initial stuff.

Lets create HTML file named “index.html” under wwwroot folder.

Right click on wwwroot folder, Add New Item and create index.html file. This HTML page will act as default page.

For ASP.NET Core to serve static files, we need to add StaticFiles middle ware in Configure method of Startup.cs page. Ensure that packages are restored properly.

project.json is redesigned to make it better, we have Static Files middleware to serve static assets like HTML, JS files etc.

Interestingly Program.cs is entry point of application execution just like void main().

Run the application now, ASP.NET Core renders static HTML page.

Delete this index.html page, we will be injecting this dynamically later. Till now you saw demonstration of wwwroot as root folder for ASP.NET Core web apps.

Step 3: Angular 2 in ASP.NET Core

Angular 2 is famously claiming to be ONE Framework for MOBILE and DESKTOP apps. There’s won’t be any breaking changes after final release.

This tutorial refers 5 MIN QUICK START for getting started, it’s more focused on other light weight code editors; but here we are using Visual Studio 2015 Community Edition Update 3 for its built in TypeScript tooling and other features.

We will be using Webpack for module bundler, it’s an excellent alternative to the systemJS approach. To know more about inner details of read “webpack and Angular 2

Majority of webpack scripting is based on AngularClass’s angular2-webpack-starter. I have modified according to ASP.NET Core web apps.

ASP.NET Core used here is SPA type of website, no MVC used here.

Why I choose Webpack for Angular 2 in ASP.NET Core?

  • Webpack is much simpler to code, plugins based working with static files.
  • Webpack 2 with dev-server runs application in memory, live reloading & compilation is easy. It provides tree shaking to eliminate unused code.
  • Integrating with 3rd party packages like Angular Material 2, AngularFire, bootstrap are just one line inclusion
  • AngularClass webpack  starter kit provides HMR (Hot Module Replacement) – maintain execution state while code gets modified.
  • Webpack is adopted by Angular CLI, AngularService by Microsoft for making bundles much smaller.

Step 4: Adding NPM Configuration file for Angular 2 packages

Angular 2 team is pushing the code changes using NPM rather than CDN or any other source, due to this we need to add NPM configuration file (package.json) to this ASP.NET Core application.

Right Click on “ngCoreContacts“, add new file “NPM Configuration File“; by default package.json is added to ASP.NET Core project. This acts Node Package Manager (NPM) file, a must for adding packages for Angular 2

From the Angular 2 Quick start provided above, we need to add dependencies for required for Angular 2 in ASP.NET Core application. Copy Paste below configuration in package.json file

Right after saving this, ASP.NET Core starts restoring the packages. It would download all packages mentioned in dependencies section of above package.json.

Sometimes in solution explorer you might see ‘Dependencies – not installed’, don’t worry this bug in tooling. All the npm packages are installed.

Step 5: Add TypeScript configuration file – must for Angular 2 in ASP.NET Core using TypeScript

We are creating Angular 2 in ASP.NET Core starting with TypeScript, this obvious reason adds to include TypeScript Configuration file which does work of transpiling it to JavaScript, module loading, target ES5 standards.

Refer my article on Getting Started with TypeScript if you just want beginner intro on it.

Add “tsconfig.json” in the project, copy paste below configuration.

baseUrl” ensures that TypeScript files are transpiled to JavaScript from the ‘./clientsrc‘. This folder is virtual directory for TypeScript

It’s mandatory to install TypeScript 2.o for working with Angular 2.

At present typings.json is not required because we are using @types with TypeScript. However if your using any other packages which don’t have entries in @types then typings.json has to be added.

Step 6: Usage of Webpack as module bundler

What is Webpack?

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles. With plugin “loaders” Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.

In package.json, we have added webpack packages as devdependencies. They will perform all bundling work.

What webpack does is written in a JavaScript configuration file know as webpack.config.js. As always the applications are run in Development, Test and Production environment.

There are some common functionalities and some specific to environments. We will focus on development and production environment to write accordingly.

Development environment should have source maps for debugging TypeScript files, minifying bundles of JS, CSS etc files not necessary.

Production environment should minify bundles to reduce loading time, do not include source maps. Webpack 2 also does tree shaking i.e. eliminate unused code to further reduce bundle sizes.

The entire source code is on my github repo, fork or clone to play with it.

webpack.config.js – Based on environment set process.env.NODE_ENV, it runs either dev or prod configurations.

Webpack.common.js before bundling environment specific files, it performs tasks meant to be used for both environment.

  1. Webpack splits Angular 2 apps into 3 files polyfills(to maintain backward compatibility with older browsers) , vendors(all JS, CSS, HTML, SCSS, images, JSON etc into one file) and boot (application specific files)
  2. resolve based on various file extensions
  3. Webpack itself doesn’t know what to do with a non-JavaScript file. We teach it to process such files into JavaScript with loaders. For this, we have written loaders TS, HTML, JSON, Fonts, images
  4. Any static assets placed in clientsrc/assets” will be copied to assets folder using CopyWebpackPlugin
  5. CleanWebpackPlugin cleans wwwroot/dist” folder every time we run it, so that we get fresh set of files.
  6. I told you above to delete the index.html file, now the clientsrc/index.html will be moved to wwwroot using HtmlWebpackPlugin. Plus Webpack injects the bundle files i.e. polyfills, vendor, boot JS files and includes them in HTML script reference.

Now let’s see webpack.dev.js for development purpose

  1. Running webpack-dev-server” – this runs entire application in memory, any changes to source file gets applied immediately
  2. Loads application in debug mode with source map. Everything run in memory i.e. html, js, static files are loaded in memory.
  3. Runs the application on localhost 3000 port. Port can be changed as your convenience

Now let’s see webpack.prod.js for production purpose

  1. Merges all the bundle files and copies to wwwroot.
  2. Minifies all files to load faster using UglifyJsPlugin plugin

Step 7: Writing Angular 2 application

Until now we created ASP.NET Core app, added TSconfig file, webpack configuration. Now it’s time to write Angular 2 application

In the github repo, you can see “clientsrc” folder. This contains the angular 2 app which gets bundled into using webpack configurations we wrote

Clientsrc folder has index.html, polyfills.browses.ts, vendor.browsers.ts and mostly importantly boot.ts

We have app folder containing HTML, Angular 2 components and root level module (app.module.ts) which gets loaded while bootstrapping application.

Some of files might be not interesting now, will focus them in separate articles later.

Step 8: Running the application

Before running make sure you have run command “npm install”. This might not be needed but still it will ensure all packages are installed.

Now let’s run the application in development mode

  1. From command line (directory should be same as package.json), type “npm start” & hit enter. It will start running the webpack-dev-server which loads application and listens on localhost:3000.
  2. When on console it says “bundle is now VALID” then open a browser and navigate to http://localhost:3000 to see application getting loaded.

Notice wwwroot folder, we don’t see any files copied because everything is running in memory.

Now that application runs properly on browser, let’s understand how Angular 2 app loads

  1. When browser starts rendering index.html page, it encounters <my-app>Loading…</my-app> tag.
  2. Then Angular’s module platformBrowserDynamic bootstraps clientsrc/app/AppModule through line platformBrowserDynamic().bootstrapModule(AppModule)
  3. AppModule then loads the component app.component.ts which is mentioned in @NgModule as bootstrap entry
  4. Clientsrc/src/Appcomponent then resolves the <my-app> tag as selector in it and renders UI with TypeScript code.

When we enter npm start” in console to run the application, execution points scripts section of package.json to below code

This invokes webpack-dev-server, runs the development config and watches for any changes in clientsrc folder. Any changes in this folder will reload application with changes.

Here ASP.NET Core is just HTML based web app, so running this app as npm start to use AngularClass features of reloading, using webpack, Hot module replacement feature.

Running the application in Production mode

Assuming the application is now ready to deployed, we need to have PROD build. For this run command

Now if you see wwwroot folder, we see the HTML, JS bundle files. This wwwroot folder can be deployed on any web server like IIS or nginx

You can either do F5 to run from Visual Studio IDE or run command npm run server:prod

 

Angular 2 in ASP.NET Core

Angular 2 running on ASP.NET Core using Web pack

There is Angular 2 application development using Angular 2 Command Line Interface also, it’s interesting !!

Check out source code on my Github repo ng2CoreContacts

Leave a Reply

  1. Pingback: My Homepage

  2. Great article. Having some issues though. When I copied all the files over and followed the instructions, I get an error running npm start:

    $ npm start

    > @1.0.0 start D:\BitBucket\ngcorecontacts\src\ngCoreContacts
    > npm run server:dev

    > @1.0.0 server:dev D:\BitBucket\ngcorecontacts\src\ngCoreContacts
    > webpack-dev-server –config config/webpack.dev.js –progress –profile –watch –content-base clientsrc/

    D:\BitBucket\ngcorecontacts\src\ngCoreContacts\config
    clean-webpack-plugin: D:\BitBucket\ngcorecontacts\src\ngCoreContacts\config\wwwroot\dist has been removed.

    D:\BitBucket\ngcorecontacts\src\ngCoreContacts\node_modules\webpack-dev-server\lib\Server.js:25
    const validationErrors = webpack.validateSchema(optionsSchema, options);
    ^
    TypeError: webpack.validateSchema is not a function
    at new Server (D:\BitBucket\ngcorecontacts\src\ngCoreContacts\node_modules\webpack-dev-server\lib\Server.js:25:35)
    at startDevServer (D:\BitBucket\ngcorecontacts\src\ngCoreContacts\node_modules\webpack-dev-server\bin\webpack-dev-server.js:379:12)
    at processOptions (D:\BitBucket\ngcorecontacts\src\ngCoreContacts\node_modules\webpack-dev-server\bin\webpack-dev-server.js:317:3)
    at Object. (D:\BitBucket\ngcorecontacts\src\ngCoreContacts\node_modules\webpack-dev-server\bin\webpack-dev-server.js:441:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:418:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:533:3

    After some searching I found suggestions to update version of webpack:

    “webpack-dev-middleware”: “^1.6.1”,
    “webpack-dev-server”: “^2.1.0-beta.11”,
    “webpack-md5-hash”: “0.0.5”,
    “webpack-merge”: “0.14.1”

    This now gives a different error on npm start:

    Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    – configuration has an unknown property ‘tslint’. These properties are valid:
    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
    For typos: please correct them.
    For loader options: webpack 2 no longer allows custom properties in configuration.
    Loaders should be updated to allow passing options via loader options in module.rules.
    Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
    plugins: [
    new webpack.LoaderOptionsPlugin({
    // test: /\.xxx$/, // may apply this only for some modules
    options: {
    tslint: …
    }
    })
    ]
    – configuration.module has an unknown property ‘postLoaders’. These properties are valid:
    object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
    Options affecting the normal modules (NormalModuleFactory).
    – configuration.resolve.extensions[0] should not be empty.

    Note I get the same initial error (webpack.validateSchema) when I downloaded your sample project and run npm install and npm start. Any suggestions would be great, keen to get this working!

  3. Thanks for the tutorial. I downloaded the sourcecode from https://github.com/mithunvp/ng2CoreContacts but when I run npm start I am getting following error:
    ng2CoreContacts-master\src\ngCoreContacts\node_modules\webpack-dev-serve
    r\lib\Server.js:23
    var validationErrors = webpack.validateSchema(optionsSchema, options);
    ^
    TypeError: webpack.validateSchema is not a function
    at new Server (C:\WORK\ng2CoreContacts-master\src\ngCoreContacts\node_module
    s\webpack-dev-server\lib\Server.js:23:33)
    at startDevServer (C:\WORK\ng2CoreContacts-master\src\ngCoreContacts\node_mo
    dules\webpack-dev-server\bin\webpack-dev-server.js:378:12)
    at processOptions (C:\WORK\ng2CoreContacts-master\src\ngCoreContacts\node_mo
    dules\webpack-dev-server\bin\webpack-dev-server.js:316:3)
    at Object. (C:\WORK\ng2CoreContacts-master\src\ngCoreContacts\nod
    e_modules\webpack-dev-server\bin\webpack-dev-server.js:440:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

    Any suggestions on how to fix this?

  4. maybe I have missed something, but why you copy files to /wwwroot/dist instead of directly to wwwroot? Yes, it works if use “npm start” to run app, but as sample relates to ASP.NET Core and so I tried to call “dotnet run” to run app using Kestrel, it is not works, that is expected as wwwroot is used as root folder for Kestrel and it looks for index.html there and so on. To fix I have changed webpack output to use wwwroot as root folder…

    • dist is output folder naming practice, so just used that. In this example, ASP.NET Core acts as HTML website not as MVC application.
      So I npm start would be great for this instead of dotnet run. With npm start am getting live reload, hot module replacement.

      There are many ways to using ASP.NET Core and Angular 2

  5. I was not able to find any presentation related to hybrid projects with Angular 1.5 and Angular 2.0. Could you please find URL for me? Thanks!

  6. I am very interested if somebody, who is using Angular 1.5, actually started to do real Angular 2.0 development in same hybrid project. I read many articles but still did not find any latest sample of both products working together. Please let me know!

  7. Hello,
    I got these error in tsconfig,json by following your step. How do I solve this issue

    Error TS5023 Build:Unknown compiler option ‘strictNullChecks’
    Error TS5023 Build:Unknown compiler option ‘baseUrl’
    Error TS5023 Build:Unknown compiler option ‘paths’
    Error TS5023 Build:Unknown compiler option ‘lib’
    Error TS5023 Build:Unknown compiler option ‘types’

  8. Awesome guide – the only one I could find that ties Angular2 with Visual Studio… I just figured out how to set up everything with SystemJS and Gulp – and you changed everything to WebPack 🙂 But everybody says it’s better and easier – so I may as well learn it. Nitpicking note – Typescript 2.0 is now out, you may want to remove reference to RC

    • A few more comments, if you don’t mind. I realize that the update appeared just today; so it’s probably still work in progress. And I hope you will take my comments in this light – to help you along the way.
      1. Step 5 instructs to create scripts directory and place tsconfig.json there. Probably, leftover from old version. Your code in github correctly puts it in the project “root” directory.
      2. Package.json has some @angular packages (core, common) without “^” (“2.0.0”), and others (forms) as “^2.0.0” which is resolved to 2.0.1. Therefore, npm install throws an error that dependency package could not be installed.
      3. Another dependency that was missing and causing an error is “node-sass”. Don’t know what requires it, but it wouldn’t install until I manually added via npm install –save)
      4. Step 6 tells us what is webpack, but nothing about what files go where and for what reason. I assume it’s coming later. For now – just copy the files from Github.
      5. Step 7 says “Writing Angular2 Application”. Well, I realize that the purpose is to scaffold an environment, and the reader may provide his own. So, essentially, it is “Copy my Angular 2” application.
      6. Step 8 says “running the application”. But it throws an error! So much for trusting author’s code… Fortunately, the errors are quite self-explanatory. You put references to Material Design, but didn’t install corresponding packages. Since I am not interested in material design (not for the scaffold, anyway) – I removed them and application runs fine. Well, almost fine! The button “Click me!!” doesn’t do anything. Further analysis shows that it has reference to MD directive, and since I got rid of MD, I shouldn’t expect much.
      7. To run the application in development mode, I need to run npm from command line. That’s sad… with Gulp I was able to run everything from VS. But it’s actually worse – if I start debugger from VS, it builds *production* version. So, if I have a WebApi project, where the server-side calls are in the same project – I can either debug client, or server, but not both
      8. npm run server:prod gives an empty screen (although npm build server:prod creates index.html and 3 minimized js files in wwwroot).

      Hope that helps! This it the best tutorial on getting Angular2 and VS live together – hopefully, it will get even better! 🙂

      • Thanks for your valuable feedback, here’s my comments
        1. Left over from previous version, removed and updated article.
        2. Updated package.json to include Angular 2 minor version updates, packages do get installed properly. NPM gives warning related to dependency packages but overall everything would have installed. Don’t worry.
        3. At present node-sass is not required, I would not reproduce this even after deleting node_modules.
        4. I will try to refine article on webpack files working. If you spend sometime with webpack, you might understand it well
        5. Purpose is not really scaffolding, instead of copying all files on article. Anyone can clone the repo, look at it.
        6. After npm install, from command line if you enter ‘npm start’ it will work fine, I reclone my own repo in different link. It works well, let me know if you encounter issue again. My other article is on including Angular Material, so the github repo used there too. You can ignore material design
        7. This is interesting comment, even while writing this article I had thought about it. My approach would be “For Web API in ASP.NET Core, you need to add MVC; go ahead add it in project.json n create controllers. For running web api, start application debugging from visual studio. then run “npm start” from command line to run angular 2 app.” I haven’t tried this approach yet. I kept it for separate article. Ideally I would never mix Web API and Angular 2 project in single project.
        8. First
        npm build server:prod and then npm run server:prod, it will work.

        Once again thanks for valuable feedback. !!

        • 2,3,5,6,8 – didn’t work, until I did some tinkering. Weird…
          4. “if you spend sometime with webpack” – that’s the kicker. I couldn’t figure out how to add bootstrap.css. Going through the webpack version of quickstart https://angular.io/docs/ts/latest/guide/webpack.html and starting to understand it better. At least I can add bootstrap to *that* scaffold.
          7. Fundamentally, I agree. However, to start, it is quite straightforward to have a WebApi (not Empty) project, and have a service on the client to call api on the server. Avoids problems with multiple projects in a solution, CORS, etc…

          • I’d like to ask a naive question about using gulp or webpak. By my understanding, Visual Studio is able to compile typescript code and put it them with a Core application (input html, javascript, and anykind of web services). Only thing specific to Core application is MS changed the project structure. The angular js files needs to be moved to wwwroot. Since npm can execute additional command, why don’t we copy the files when doing “restore packages”?

          • Thats also good idea, we can do post install step in package.json to perform moving to wwwroot. Btw restore package is time consuming task and on that if we do copying it will add up more time.

  9. I understand you updated your github ngContact. But where is the gulpfile.js? Is it unnecessary now? a lot of things are different than last version.

  10. Pingback: angular 2 cdn | bruinrow

  11. Pingback: [ASP.NET]使用Visual Studio 2015來開發ASP.NET Core Angular2專案 – 655 官方部落格

  12. This post is one of the most viewed articles about using Visual Studio 2015 for Angular 2 development. However, many of us were unable to make it work even with his project code. The following are the problems:
    1. The debugger only stops at in javascript code.
    2. The compiler does not compile Typescript change.
    3. The application does not even run today!

    But his efforts is still the best I could find from the Web. It is not too hard to fix them but it was hard to figure out how.
    3. Remove all ‘^’ from the package.json file. This means we are not going to use the latest library because they don’t work together. You will get weird errors nobody would understand. That’s why I don’t like open source library because they may not work together and we cannot complain because we did not pay.
    2. Add “compileOnSave: true” into tsconfig.json file. This will make visual studio build action to compile new typescript changes.
    1. Add “sourceRoot: ‘../scripts'” into compileOptions properties in tsconfig.json file. This will tell debugger where the break point is in typescript source.

    I know you like to try new technology. Good luck to all of you!

  13. Thank you for your great tutorial!
    I’ve tried to reproduce it with the final release of Angular 2 but I am still facing an issue.
    When I launch the application, I got a lot of Javascript issues (like those posted by Suri.
    I don’t know if it comes from this, but the angular2-in-memory-web-api is not located in the libs but in the node_modules folder.

    Do you have any idea?

  14. Pingback: [ASP.NET]使用Visual Studio 2015來開發ASP.NET Core Angular2專案 | 網站標題

  15. Hi I am getting errors like :
    error TS2304: Cannot find name ‘Map’.
    error TS2304: Cannot find name ‘Set’.
    error TS2304: Cannot find name ‘Map’.
    error TS2304: Cannot find name ‘Promise’.
    Any idea?

  16. Pingback: How do I run gulp.js in my asp.net core project when deploying to Azure using git? - Technology

  17. Pingback: Microsoft.AspNetCore.StaticFiles >= 1.0.0-rc2-final could not be resolved | Technology

  18. I am using the latest version of angular2 I have a folder like this node_modules/@angular. Where is /// in this folder? I was not able to find it.

  19. Excellent example. Thanks for putting this together. One of the best I have seen to get started with Angular2 under Vs 2015.
    However, like others, I am having a problem with the gulpfile.js as it exists. Specifically, the “ts” script. It always puts the js files in a “scripts” folder under the “appscripts” folder, instead of directly in the “appscripts” folder. I can’t figure out how to change the destination to exclude the “scripts” path it got from the source.
    Also, when i “build” the project, it creates a wwwroot folder inside the appscripts folder. Not sure why this is happening.
    Has anyone else seen this?

      • it looks like this Manual rendering):

        wwwroot
        –appScripts (created by build)
        — — scripts (created by build)
        — — wwwroot (created by build)
        — — — libs (created by build)
        — libs
        — views

        • My workaround to get it working was to rename “appscripts” to “scripts”. This allowed the build to transpile the ts files to the “right” folder. However, it still creates a “wwwroot” folder under the existing “wwwroot” folder. Not great, but it works.
          Not sure whether this is a typescript compiler limitation or I have configured something wrong.
          Open to suggestions….

    • I managed to resolve both issues, but I am still puzzled why nobody else experienced it.
      for the first – script files in a “scripts” subfolder – I had to use “gulp.flatten” to remove the “scripts” path from the files before saving to dest.
      For the second – additional wwwroot folder created at build time – the tsconfig.json has ‘”outDir”: “../wwwroot/appScripts/”‘, which creates a new wwwroot folder under the already existing wwwroot/appScripts folder.
      Has anyone else run into this? Or did I just do the initial setup incorrectly

      • My “solution” is not quite complete. By removing the “outdir” from tsconfig, I removed the excess subdirectory, but now the typescript does not automatically get transpiled. I have to use gulp to manually transpile the code.

  20. Additional information to help identify the problem. I am using Angularjs 2 RC5

    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.getPrototypeOf: ‘this’ is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.keys: argument is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.freeze: argument is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.seal: argument is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.preventExtensions: argument is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.isFrozen: argument is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.isSealed: argument is not an Object
    Exception was thrown at line 1254, column 54 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object.isExtensible: argument is not an Object
    Exception was thrown at line 1952, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a1389 – JavaScript runtime error: Number.prototype.toPrecision: ‘this’ is not a Number object
    Exception was thrown at line 2320, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object expected
    Exception was thrown at line 2387, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘sinh’
    Exception was thrown at line 2584, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘endsWith’
    Exception was thrown at line 2588, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘endsWith’
    Exception was thrown at line 2584, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘includes’
    Exception was thrown at line 2588, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘includes’
    Exception was thrown at line 2584, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘startsWith’
    Exception was thrown at line 2588, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘startsWith’
    Exception was thrown at line 3061, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘Symbol(Symbol.iterator)_9.fcuxv1wnwiw’
    Exception was thrown at line 3090, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Unable to get property ‘call’ of undefined or null reference
    Exception was thrown at line 3182, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a1396 – JavaScript runtime error: Array.prototype.sort: argument is not a JavaScript object
    Exception was thrown at line 3128, column 49 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.sort: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.forEach: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.map: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.filter: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.some: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.every: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.reduce: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 12 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.reduceRight: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 49 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.indexOf: ‘this’ is null or undefined
    Exception was thrown at line 3128, column 49 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Array.prototype.lastIndexOf: ‘this’ is null or undefined
    Exception was thrown at line 3737, column 40 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a1398 – JavaScript runtime error: RegExp.prototype.toString: ‘this’ is not a RegExp object
    Exception was thrown at line 4642, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘entries’
    Exception was thrown at line 4642, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘entries’
    Exception was thrown at line 4889, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object expected
    Exception was thrown at line 4916, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object expected
    Exception was thrown at line 4919, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a138f – JavaScript runtime error: Object expected
    Exception was thrown at line 4962, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘defineProperty’
    Exception was thrown at line 5256, column 4 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a1389 – JavaScript runtime error: Number expected
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 6097, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a13da – JavaScript runtime error: Typed array constructor argument is invalid
    Exception was thrown at line 6159, column 8 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘slice’
    Exception was thrown at line 1766, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘trimLeft’
    Exception was thrown at line 1766, column 6 in http://localhost:50347/libs/core-js/client/shim.js
    0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘trimRight’
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (http://localhost:50347/libs/reflect-metadata/Reflect.js)’.
    Exception was thrown at line 177, column 5 in http://localhost:50347/libs/systemjs/dist/system.src.js
    0x800a01bd – JavaScript runtime error: Object doesn’t support this action
    Exception was thrown at line 1247, column 4 in http://localhost:50347/lib/jquery/dist/jquery.js
    0x800a139e – JavaScript runtime error: SyntaxError
    Exception was thrown at line 1265, column 4 in http://localhost:50347/lib/jquery/dist/jquery.js
    0x800a139e – JavaScript runtime error: SyntaxError
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/Subject.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/Observable.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/root.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/symbol/observable.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/toSubscriber.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/Subscriber.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/isFunction.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/Subscription.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/isArray.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/isObject.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/tryCatch.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/errorObject.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/UnsubscriptionError.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/symbol/rxSubscriber.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/Observer.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/SubjectSubscription.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/throwError.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/util/ObjectUnsubscribedError.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/operator/toPromise.js)’.
    ‘iexplore.exe’ (Script): Loaded ‘Sourcemap (eval code sourceUrl: http://localhost:50347/libs/rxjs/observable/PromiseObservable.js)’.
    Exception was thrown at line 1559, column 10 in http://localhost:50347/libs/systemjs/dist/system.src.js
    0x800a03ea – JavaScript runtime error: Syntax error
    Exception was thrown at line 1565, column 7 in http://localhost:50347/libs/systemjs/dist/system.src.js
    0x800a139e – JavaScript runtime error: (SystemJS) Syntax error
    SyntaxError: Syntax error
    at Anonymous function (eval code:3:1)
    at Anonymous function (eval code:1:31)
    at eval code (eval code:1:2)
    Evaluating http://localhost:50347/appScripts/main.module.js
    Exception was thrown at line 1565, column 7 in http://localhost:50347/libs/systemjs/dist/system.src.js
    0x800a139e – JavaScript runtime error: (SystemJS) Syntax error
    SyntaxError: Syntax error
    at Anonymous function (eval code:3:1)
    at Anonymous function (eval code:1:31)
    at eval code (eval code:1:2)
    Evaluating http://localhost:50347/appScripts/main.module.js
    Evaluating http://localhost:50347/appScripts/boot.js
    Exception was thrown at line 558, column 26 in http://localhost:50347/libs/zone.js/dist/zone.js
    0x800a139e – JavaScript runtime error: Uncaught (in promise): Error: (SystemJS) Syntax error
    SyntaxError: Syntax error
    at Anonymous function (eval code:3:1)
    at Anonymous function (eval code:1:31)
    at eval code (eval code:1:2)
    Evaluating http://localhost:50347/appScripts/main.module.js
    Evaluating http://localhost:50347/appScripts/boot.js
    Error loading http://localhost:50347/appScripts/boot.js
    Exception was thrown at line 797, column 7 in http://localhost:50347/libs/systemjs/dist/system.src.js
    0x800a139e – JavaScript runtime error: (SystemJS) Syntax error
    SyntaxError: Syntax error
    at Anonymous function (eval code:3:1)
    at Anonymous function (eval code:1:31)
    at eval code (eval code:1:2)
    Evaluating http://localhost:50347/appScripts/main.module.js
    Evaluating http://localhost:50347/appScripts/boot.js
    Error loading http://localhost:50347/appScripts/boot.js
    Exception was thrown at line 558, column 26 in http://localhost:50347/libs/zone.js/dist/zone.js
    0x800a139e – JavaScript runtime error: Uncaught (in promise): Error: (SystemJS) Syntax error
    SyntaxError: Syntax error
    at Anonymous function (eval code:3:1)
    at Anonymous function (eval code:1:31)
    at eval code (eval code:1:2)
    Evaluating http://localhost:50347/appScripts/main.module.js
    Evaluating http://localhost:50347/appScripts/boot.js
    Error loading http://localhost:50347/appScripts/boot.js

  21. Mithun, I am getting (SystemJS) Syntax error SyntaxError: Syntax error at Anonymous function (eval code:3:1) at Anonymous function (eval code:1:31) at eval code (eval code:1:2). Any help to fix this issue will be greatly appreciated

  22. Thanks for this great article! There is one thing I don’t like (forgive if I misunderstand, I’m a newbie with these client side tooling). The Gulp file you use to copy libs to wwwroot uses wildcards. In my case (Angular RC5) this leads to almost 5000 files being copied! I think most of them are not needed. Is there any better way to do this? Other articles seem to copy individual files, still other articles talk about bundles (???). I am missing a clear guidline here. Do you know of any official resources?

  23. Hi, great article!!! Really! I downloaded your repository, ran the clean task and then the default task. Then when I try to run it, all I get is “Loading… ” forever. Any ideas? Thanks in advance….

  24. Pingback: AngularJS 2 with ASP.NET Core 1 – Helping Your Productivity

    • Something bad happend to code I’ve pasted 😉 I was talking about first line of boot.ts file (<reference path…)
      I fixed it. typings.json needs to be in main folder of project and I needed to run "typings install" in console.

  25. Pingback: Angular Material - Using with Angular 2 and ASP.NET Core 1.0

  26. Well, thanks for the effort, but it ain’t working.
    Downloaded the source from github, all the dependencies were loaded OK, but still, only getting the “loading…” message.
    Should i be doing something else, to make it work?

    And why does systemjs.config.js have to be beside html file?
    In proper MVC structure, the cshtmls should reside in the Views folder beside the wwwroot folder, is it possible to make the project work that way?

    Thanks in advance for the help! 🙂

    • Sorry about the first part, forgot to run the gulp tasks :/ Now it’s working!
      But still would like to know if i can arrange the files in an MVC manner.

  27. I am getting a ton of build errors, all TS1005, build: ‘,’ expected in all sorts of files.

    Am I missing a step?

      • Yes, that worked. I think if the step to create the typings.config file was shown before the step to add the packages, the typings folder would have been created without having to manually run that command line. After the typings.config file is there (and should clarify that it goes in the project root folder), right-clicking on Dependencies in the Solution Explorer and selecting Restore Packages will also work, since the “typings install” is specified for postinstall in the packages file.

        Thanks – best walkthrough I’ve found by far!

  28. Lots of TS build errors, “Cannot find name ‘Promise'”, etc. Suspect it may be related to the following line in boot.ts:

    ///

    There is no path in my project that seems to match that or even seems close to it. Where in your project is this file?

  29. Hi Mithun,

    Thanks for posting this atricle. I’ve done everything exactly as mentioned but unfortunately I’m getting below error. Can you help?

    NU1001 The dependency Microsoft.AspNetCore.StaticFiles >= 1.0.0-rc2-final could not be resolved. ngCoreContacts

  30. This is great… however I did have to add a reference to ts in gulpfile.js to fix “ts is not defined”

    var ts = require(‘gulp-typescript’);

  31. I finally got it working , but man it wasn’t easy.. One of the people here was right about changing the target parameter in the tsconfig.js form “ES5” to “ES6”.. That is for starters. The gulpfile.js the author Mithun provides is also buggy and causes the project to lock up. I modified the gulpfile.js by removing the lambda expression and the watch task, among a couple other changes and now the gulpfile works perfectly. Also, as Mithun stated, the es6-shim is no longer used.

    It seems this article is more geared towards the Angular2 RC1 release and not the RC2. I’m thinking the author is going to seriously need to renovate or re-write this article. About 70% of the information is supplies is correct, but there is a lot of code that seems to break here. It really seems like Angular 2 is far from being an RC2 candidate and literally should be labelled as at the final stage of beta. Literally, they are making significant changes to the libraries that are crashing the projects.

    I have it working, but now my only problem is that compiling and debugging the application takes quite a bit of time. Can anyone give me any advice at what I can do to speed up the application for debugging? I was hearing something about adding exclusions in tsconfig.json file, but at least with the folders the author provides and even adding wwwroot, there is no major boost in speed. Is there anything else I can do?

  32. Hi, i have the same issue as Jonathan described. Infinite loop issuing gulpfile.js, wwwroot/libs with nested folders and no /appScripts folder….

  33. Fails when I try to run the gulpfile.js to move the Angular libraries to wwwroot. When was the last time this was updated? Maybe, things have changed? When I attempted to launch the gulpfile.js, as instructed in the tutorial, it will add some of the files (as directories, not like in your example) and it just goes into an infinite loop and never completes. Any ideas what could be the problem? I will attempt to try another ASP.NET Core tutorial with Angular 2, as this one seems maybe to have broke with one of the newer updates, possibly? I understand being in RC status, things are not all sorted out.

  34. Great tutorial

    May I ask whether If I follow the above, will this worj with an Umbraco MVC project? And regarding routing, when integrating it with ASP.NET MVC project, angular2 routing still works, with no redirections?

    Thank your for your time

    Kind Regards

  35. Thanks for this, hopefully once Angular2 is fully released getting started will become easier. Question: once I’ve got the above working, where do other typescript component folders go? In wwwroot or under the project directly? Do I need to modify the gulp tasks to look for typescript components in other folders?

    • The way this is setup all the components have to go under the Scripts folder it seems. If I wanted to group the components into folders that contained the component, html, css, etc, what would that look like in the gulp file?

      • I grouped all components at the different folders but it was handled by TS files only – like that:

        templateUrl: ‘./templates/heroes-main.html’,
        styleUrls: [‘./styles/app.component.css’],

  36. Mithun, Fantastic tutorial. I greatly appreciate the time and effort put into this. However I’ve come across a few things that could be updated for a better starting point for others along the way.

    1.) This solution is plagued by the lack of routing for client side on refresh and deep linking.
    a.) Once you add additional pages and bring angular 2 routing into the picture with more components, a simple F5 or deep link to an angular route you will get a 404, which is usually a blank white page and no actual 404 message sometimes.
    Solution: Embrace MVC 6 in its entirety just for the index page and utilize the “Microsoft.AspNetCore.SpaServices” and/or “Microsoft.AspNetCore.AngularServices” packages to build a spa fail-over route that will forward on the deep link request to the client side essentially. In addition to fixing the deep linking and refresh issues, this solution will let users save a url to a specific page/route of an angular app, and not blindly mask every 404 you get for assets such as images and stylesheets that would benefit the dev with the 404 on that resource. Some workarounds are out there that grab every 404 blindly or require you to list all your angular routes server side which can be counter productive.

    As stated before this is a great starting point, but as i built onto it i found this, and would love to help update this correcting the issue for a more complete foundation for others following along and building onto it.

    Email: kaffiend0311@gmail.com

  37. Very interesting – I added to my sample project couple more ts files where app,ts is located, I am building from ASPNET Core Visual Studio, but java scripts and maps are not created for those new ts files. Also, when I debug in Chrome. those new ts files are not seen. Any ideas?

    • Two things come to mind. Make sure the tsconfig is in your scripts folder. And the gulp task will error out if the typings directory and typings.json file are not created and then restart the default task. Ive also seen task runner explorer act strange and fail silently on gulp tasks. Try running the ‘gulp ts’ or the default task from the root of your project via command line. With chrome also make sure your not looking at a cached version of the site. Under the network tab check disable cache then refresh with the developer tools open.

    • To help with the gulp task failing silently if that be the case. Move your $(Path) for external tools up in the load order. VS will use the version of node it shipped with when running external jobs like gulp tasks. Tools => Options => “Projects & Solutions” => External Web Tools. And bump it to the top, or at least above $(VSINSTALLDIR) entries.

    • Jose,
      Thanks for letting me know but for this article, there is no GITHUB repo. The link you mentioned is meant for Visual Studio Code. However we can use that for Visual Studio 2015 as well.

    • The interesting questions is what is the best way to re-build and re-display? I don’t like very much to be able build and run by clicking on IIS Express. When I build and run by View is Browser Index,html, sometimes it does not work. What is best way of dev process?

        • I also don’t use VS debugger – however, I need to rebuild project all the time when are making any changes. After that, I run URL with index.html.
          However, if you run npm commands from command line, there is a way automatically rebuild everything for you.

        • I am using the approach that is described in this article, as a prototype for doing samples from Angular 2.0 Tutorials.

          1. When I am making changes to an TS file and click Ctrl – Shift -B, it always tells me that everything is up to date. I need to rebuild all every time for any small changes.
          2. After rebuilding project, I usually press on IIS Express button at VS to put Visual Studio in running mode. However, sometimes it is cached and sometimes it is not, and I don’t see new changes. Need to repeat couple times.
          3. If I just rebuild and run site with included Index.html URL, it also sometime working. Sometimes it is cached and I don’t see recent changes and sometimes I am getting message that site is not available.

          I am really interested of where is the best process with Visual Studio making changes, displaying changes in Chrome and use Chrome Debugger.

          Any advises would be really appreciated!

          Thanks!

          • as long as the gulp watcher is running, i dont see why you cant use browser sync. just work it into the current gulp and get the dependencies right, so that when the ts watcher compiles the ts into your js it fires off the browsersync reload..

            https://www.browsersync.io/docs/gulp/

  38. Couldn’t move node_modules under wwwroot because of the 260 character limit on Windows file names (I put my project under C:\www to try and keep it short as well).

    Also, boot.ts give and error on the last line – AngularJs.bootstrap(AppComponent); expected 3 parameters but was invoked with 1.

  39. Greetings!

    And grateful for the dedication made in the article.

    Aclarame something: AngularJS 2 will now depends on NPM? Before 1x AngularJS was only a reference, based on ASP.NET. But AngularJS 2 fully runs under NodeJS?

    Grateful.

    • It doesn’t fully run under NodeJS, only NPM is used for package downloading, Gulp to do build related activity. Yes NG 1 was super easy to install, run. Angular CLI is something which gets started with Angular 2 quickly, but they something not meant for ASP.NET world.

  40. hi Mithun
    I cant get rid of this error :
    TS1219 TypeScript Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.
    please help.

  41. I just Task Runner Explorer for Gulp.js at the end of all process, just before building and running this app.

    • hey NP , it will run fine if you try after making changes for “Step 6: Add TypeScript configuration file – must for Angular 2 in ASP.NET Core using TypeScript” , script folder and ts files are missing which are there in gulp configuration so it fails. if you open the developer console and type gulp under your project folder , you can see the error. VS dont show any error in output window try from developer command prompt. if gulp command doesnt works try installing gulp package.

  42. I also made it working – thanks to everybody for help! However, I had to run gulp file actually at the end of the whole process, just before “Build project and see output” section, When I used it in order according to article, it did not create libs folder under wwwroot.

  43. Tutorial was really helpfull. I was able to run it on chrome but faced one difficulty in Gulp section. we should try to run task after configuring Ts config file but got confused after reading “Either you run from Task Runner Explorer in VS 2015 or do binding to run After Build”. so please notify user to run it after “Add TypeScript configuration file ” section otherwise it will throw error and VS dont show it properly where the error is. since ts file is not in the folder it fails for task ‘watch.ts’.

  44. hi
    why I get this error?
    Invalid module name in augmentation, module ‘../../Observable’
    in node_modules\rxjs\add\operator\bufferToggle.d.ts

  45. Before packages.json update, typings.json needs to be created (at root) with something along the lines of this:

    {
    “ambientDependencies”: {
    “es6-shim”: “github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd”,
    “jasmine”: “github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd”
    }
    }

    • package.json has “scripts” which has postinstall as “typings install”. Before doing npm install, both package.json & typings.json should be present in same directory. After running “npm install” from command line or VS restoring of packages, typings also get created.

    • Yeah that makes sense but I would never advocate adding that manually. There probably should be a step in this tutorial to add the typings dependency to the file using ‘typings’, for example:

      typings init (Creates the typings.json file)
      typings install es6-shim –ambient –save (Saves the es6-shim to the ambient dependencies setion in typings.json)

      Without these entries typings install won’t do anything because the typings json has to have some entries. Just my two cents.

      • Yes no need to add it manually. I will look into this again & update article with better steps. Adjen Towfeek channel on youtube has wonderful video on this. It might help.

        ES6 shim are not used now, again some changes to be done.

  46. 1. add typings.json file to project if it not was add by npm.
    just adding empty file.is this correct?
    2. in project uninstall all package from npm dependency.
    How to do that?
    3. add package.json file with the config that mithun post her
    How can I find this new json file? Is it just what we have in original article?

    • Step 2 -> look at the solution explorer in vs2015, make sure it shows all files by clicking the ‘how all files’ button on the solution pane. You should see the node_modules folder. You can just delete the entire folder. When you execute npm install, that folder is recreated.

    • Step 1. If you want to add a typings.json using typings. You need to be in the project folder on a command line and enter the following command: typings init

      Note you have to have typings installed either locally on the project or globally. Typings can be installed globally using npm:

      npm install typings -g

      Step 2. Just delete the node_modules directory, either through solution explorer (you have to make sure “show all files” is enabled on the pane) or you can just do it in explorer or through the command line. It is in the root of the project.

      Step 3. You could just copy and paste the file that is above in this tutorial, however I think the author needs to go into some detail as to how npm packages and the package.json file actually works. Packages are typically installed with npm using:

      npm install

      with the –save-dev flag to modify the package.json devdependency section. or without the flag to add it to the dependency section.

      Generally you would have to do this for each of the core packages required by angular such as : angular/core, angular/http, angular/common etc. as well as for any package you are going to use in your project e.g. bootstrap, jquery etc.

      I mean copying and pasting the package.json is all well and fine but you really should have a clear understanding of how npm and how typings and all the other content/package managers work otherwise you will get lost.

  47. I did notice that typings install actually doesn’t do anything beacause there is no dependencies in the typings.json file when you create it initially. There are no steps in this tutorial to indicate which typings to install to get all the necessary typings files so the command essentially creates 3 empty files for me. Are you missing some steps?

    • If Visual Studio 2015 giving the error. Open CMD –> move to project folder containing package.json — run “npm install” command. If still it doesn’t work then no optional Option has to be given while enter npm install.

      I have added the no optional NPM install in article. Check that. Let me know if you still encounter this issue

    • I had the same issue; the lite-server dev-dependency was causing my issue. I removed the dependency, deleted the node_modules folder and restored the packages. The error went away. You probably don’t need the lite-server package in vs2015 anyway since you can launch the application with iis express.

  48. I got it bootstrapping now. I had some old leftover code in my systemjs.config.js for packages > app. i removed format: ‘register’, and now it works great. So it’s just: ‘app’: { main: ‘main.js’, defaultExtension: ‘js’ }, which is what you’re showing up above now.

    Great tutorial. Nice work keeping it up to date. It’s been helpful through the ng and vs upgrades.

  49. I was having the same issues after updating to RC2. This article helped: https://wildermuth.com/2016/05/17/Converting-an-ASP-NET-Core-RC1-Project-to-RC2

    I finally got it building successfully after updating Startup.cs and adding Program.cs. Below are my current files that build. However, now I’m having trouble getting my app to bootstrap. Index.html loads, but I’m just getting reference error, require is not defined. …../main.js:2

    I’d appreciate any help with getting bootstrapped.

    Startup.cs:
    using Microsoft.AspNetCore.Builder;

    namespace PROJECT.Website
    {
    public class Startup
    {

    public void Configure(IApplicationBuilder app)
    {

    app.UseDefaultFiles();
    app.UseStaticFiles();
    }

    }
    }

    Program.cs:
    using System.IO;
    using Microsoft.AspNetCore.Hosting;

    namespace PROJECT.Website
    {
    public class Program
    {
    public static void Main(string[] args)
    {
    var host = new WebHostBuilder()
    .UseKestrel()
    .UseContentRoot(Directory.GetCurrentDirectory())
    .UseIISIntegration()
    .UseStartup()
    .Build();

    host.Run();
    }
    }
    }

    • ps. here’s Project.json:
      {
      “dependencies”: {
      “Microsoft.NETCore.App”: {
      “version”: “1.0.0-rc2-3002702”,
      “type”: “platform”
      },
      “Microsoft.AspNetCore.Server.IISIntegration”: “1.0.0-rc2-final”,
      “Microsoft.AspNetCore.Server.Kestrel”: “1.0.0-rc2-final”,
      “Microsoft.AspNetCore.StaticFiles”: “1.0.0-rc2-final”,
      “Microsoft.AspNet.IISPlatformHandler”: “1.0.0-rc1-final”,
      “Microsoft.AspNetCore.Hosting”: “1.0.0-rc2-final”,
      “Microsoft.Extensions.Logging.Abstractions”: “1.0.0-rc2-final”
      },

      “tools”: {
      “Microsoft.AspNetCore.Server.IISIntegration.Tools”: {
      “version”: “1.0.0-preview1-final”,
      “imports”: “portable-net45+win8+dnxcore50”
      }
      },

      “frameworks”: {
      “netcoreapp1.0”: {
      “imports”: [
      “dotnet5.6”,
      “dnxcore50”,
      “portable-net45+win8”
      ]
      }
      },

      “buildOptions”: {
      “emitEntryPoint”: true,
      “preserveCompilationContext”: true
      },

      “runtimeOptions”: {
      “gcServer”: true
      },

      “publishOptions”: {
      “include”: [
      “wwwroot”,
      “web.config”
      ]
      },

      “scripts”: {
      “postpublish”: [ “dotnet publish-iis –publish-folder %publish:OutputPath% –framework %publish:FullTargetFramework%” ]
      }
      }

    • whoops. i posted the wrong project.json earlier. here’s the correct one:

      {
      “version”: “1.0.0-*”,
      “buildOptions”: {
      “emitEntryPoint”: true,
      “compile”: {
      “exclude”: [
      “wwwroot”,
      “node_modules”
      ]
      }
      },

      “dependencies”: {
      “Microsoft.NETCore.App”: {
      “version”: “1.0.0-rc2-3002702”,
      “type”: “platform”
      },
      “Microsoft.AspNetCore.Server.IISIntegration”: “1.0.0-rc2-final”,
      “Microsoft.AspNetCore.Server.Kestrel”: “1.0.0-rc2-final”,
      “Microsoft.AspNetCore.StaticFiles”: “1.0.0-rc2-final”,
      “Microsoft.Extensions.Logging.Abstractions”: “1.0.0-rc2-final”
      },

      “commands”: {
      “web”: “Microsoft.AspNet.Server.Kestrel”
      },

      “frameworks”: {
      “netcoreapp1.0”: {
      “imports”: [
      “dotnet5.6”,
      “dnxcore50”,
      “portable-net45+win8”
      ]
      }
      },

      “publishOptions”: {
      “exclude”: [
      “**.user”,
      “**.vspscc”
      ]
      },

      “runtimeOptions”: {
      “gcServer”: false,
      “gcConcurrent”: true
      }

      }

  50. npm 3.9.0 + node 6.2.0 + core RC2 all update and i get in output:
    npm WARN install Couldn’t install optional dependency: Unsupported

  51. Using Angular 2 with VS2015 Update 2 – getting npm -not installed error
    with this package.json file
    how can i make it work with this new version?

  52. @angular folder not existe after npm install,i have angular2-in-memory-web-api, gulpfile not transfer in wwwroot, please help

      • 1>—— Build started: Project: GlobalWebApp, Configuration: Debug Any CPU ——
        1>node_modules\@angular\core\src\application_ref.d.ts(39,88): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\application_ref.d.ts(99,42): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\application_ref.d.ts(174,33): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\change_detection\differs\default_keyvalue_differ.d.ts(24,15): error TS2304: Build: Canno
        1>t find name ‘Map’.
        1>node_modules\@angular\core\src\change_detection\differs\default_keyvalue_differ.d.ts(26,16): error TS2304: Build: Canno
        1>t find name ‘Map’.
        1>node_modules\@angular\core\src\di\reflective_provider.d.ts(105,123): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\di\reflective_provider.d.ts(105,165): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\async.d.ts(27,33): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\async.d.ts(28,45): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(1,25): error TS2304: Build: Cannot find name ‘MapConstructor’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(2,25): error TS2304: Build: Cannot find name ‘SetConstructor’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(4,27): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(4,39): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(7,9): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(8,30): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(11,43): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(12,27): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(14,23): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(15,25): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(100,41): error TS2304: Build: Cannot find name ‘Set’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(101,22): error TS2304: Build: Cannot find name ‘Set’.
        1>node_modules\@angular\core\src\facade\collection.d.ts(102,25): error TS2304: Build: Cannot find name ‘Set’.
        1>node_modules\@angular\core\src\facade\lang.d.ts(4,17): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\lang.d.ts(5,17): error TS2304: Build: Cannot find name ‘Set’.
        1>node_modules\@angular\core\src\facade\lang.d.ts(70,59): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(2,14): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(8,32): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(9,38): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(10,35): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(10,93): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(11,34): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(11,50): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(12,32): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(12,149): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\facade\promise.d.ts(13,43): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\linker\component_resolver.d.ts(8,53): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\linker\component_resolver.d.ts(12,44): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\@angular\core\src\linker\dynamic_component_loader.d.ts(62,148): error TS2304: Build: Cannot find name ‘Pro
        1>mise’.
        1>node_modules\@angular\core\src\linker\dynamic_component_loader.d.ts(103,144): error TS2304: Build: Cannot find name ‘Pr
        1>omise’.
        1>node_modules\@angular\core\src\linker\dynamic_component_loader.d.ts(108,139): error TS2304: Build: Cannot find name ‘Pr
        1>omise’.
        1>node_modules\@angular\core\src\linker\dynamic_component_loader.d.ts(109,135): error TS2304: Build: Cannot find name ‘Pr
        1>omise’.
        1>node_modules\@angular\core\src\reflection\reflector.d.ts(28,22): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\reflection\reflector.d.ts(30,15): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\reflection\reflector.d.ts(32,15): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\reflection\reflector.d.ts(34,15): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\core\src\reflection\reflector.d.ts(36,16): error TS2304: Build: Cannot find name ‘Set’.
        1>node_modules\@angular\core\src\testability\testability.d.ts(40,20): error TS2304: Build: Cannot find name ‘Map’.
        1>node_modules\@angular\platform-browser-dynamic\platform_browser_dynamic.d.ts(75,90): error TS2304: Build: Cannot find n
        1>ame ‘Promise’.
        1>node_modules\rxjs\Observable.d.ts(10,66): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\rxjs\Observable.d.ts(66,60): error TS2304: Build: Cannot find name ‘Promise’.
        1>node_modules\rxjs\Observable.d.ts(66,70): error TS2304: Build: Cannot find name ‘Promise’.

  53. Thank you for this awesome tutorial.

    Though, do you have any idea how to create this all in an existing ASP.NET 4.6 project?

  54. I follow the instruction it doesn’t work in visual studio 2015 Update 2, don’t understand instruction

  55. Hi!

    Thanks for this! Please correct your “gulpfile.js” content:

    Instead of “bootstrap*.js” it should be “bootstrap.*js”. Otherwise you will not get these files 🙂

    Kind regards,
    Daniel

  56. Pingback: Starting Angular 2 in ASP.NET 5 with TypeScript...

  57. Pingback: Angular 2 via ASP.NET Core 1.0/Visual Studio 2015 | Seemed Worthwhile At the Time

  58. Wow theres a lot of new stuff there.
    I’m not sure yet all of what I was doing,
    but today I got going on all of these:
    – VS 2015
    – nmp
    – gulp
    – angular 2
    – typescript
    – ASP.NET Core 1.0
    – bower

    I feel like I’m ahead of the curve (for once 🙂

  59. Pingback: Démarrer son premier projet Angular 2 avec TypeScript et Visual Studio 2015 | Ambient IT

  60. Hi there, yet another happy coder here, your tutorial is fantastic so thank you 😀
    Maybe you can help with some little issues I’m having now though please?

    I have tried to extend on this by adding routing like in the “heroes” app on the angular website.
    The first issue I am having is that my component html files seem to be being cached, and so I’m not seeing any changes until I visit that file directly (EG: localhost:56707/templates/ContactComponent.html) and hit F5 there. Then the changes appear on that file, then I can return to the root and F5 again to get those changes. Any thoughts how I can fix this?

    The second issue is that if I click the link to my contact page then the page navigates just fine and the URL updates to localhost:56707/contact, which is perfect no problem there. However navigating manually to that link (or even just hitting F5) then just returns a blank page. There is a 404 error in the console so it’s obviously trying to load this page which technically doesn’t exist, so I assume I need something in place to tell the browser to redirect any request to the index.html file instead and let angular worry about the routing, but I don’t know how I would achieve this, could you help me here also please?

    Many thanks in advance 🙂

  61. Pingback: Angular 2 “Hello World” mit Visual Studio 2015 Update 2, ASP.NET 4 und TypeScript | SquadWuschel's Blog

  62. Tutorial confusing from the very start. Your first step says “Open Visual Studio 2015 Community Edition Update 1, Select New Web Project naming it “AspNet5Angular2Demo” and select “Empty” project template.” VS2015 DOES NOT HAVE an “New Web Project ” – You can got NEW-Web Site or New Project. If I select a C#.Web.ASP.NET Web Application – then select an “Empty” template, it contradicts your 2nd step “Lets create HTML file named “index.html” under wwwroot folder.” because ( of course ) an EMPTY project DOES NOT CREATE a “wwwroot” folder…..

    Something is not syncing up. I am using Visual Studio 2015 professional instead of community.

  63. Hey! Thanks for the article.

    I am having a problem with my gulp file (I guess). It is not creating a ‘libs’ folder under wwwroot.
    Any idea, what could be the problem?

  64. Thanks for this helpful article.

    For anyone having problems with js files not being generated, move tsconfig.json file to the project root folder, and fix ‘outDir’ value.

    Regards.

  65. Is there something missing between step 4 & step 5? It states “We were able to download all the packages, but everything went into node_modules of our ASP.NET 5 project. According to ASP.NET 5 wwwroot is root folder where all static files, scripts, images should be placed along with HTML files.” But How?

    • Hi Bob,
      wwwroot is place for static files, but Angular 2 package is downloaded using NPM so they move to node_modules and for that I wrote Gulp tasks to move them to wwwroot folder.

        • I’m assuming from your first post Bob that you have no node_modules folder – hence your question. If not I am having this problem, how did you rectify this?

          • For anyone else having this problem, select the project and in the solution explorer. Select the Project drop down menu and then select show all files if you need to see them.

          • Thank you for this Rhys! It should have been obvious, but I just didn’t know about the “show all files” option.

          • Same here, I had to had to a have a play around/do a little googling until I found the answer. I’m glad my comment was helpful to you :)!

  66. Thank you for the tutorial!

    If someone needs to setup Angular2 using Visual Studio 2015 and ASP.NET 4 (not 5), here is possible modifications list:
    1. No wwwroot folder, so let’s put “libs” folder into “Scripts”, and bootstrap css into Content (it’s already there if using template project)
    2. tsconfig.json probably will not work, so you should add config lines directly into project config, as in http://stackoverflow.com/questions/30896227/visual-studio-2015-rc-typescript-experimental-decorators-error
    I have added:
    true
    true
    3. Other type script settings can be set from VS ui – “TypeScript Build” tab of project properties.
    “Redirect JS output…” also can be set to “Scripts/appScripts”, instead of “../wwwroot/appScripts/”
    4.Static html is served by default, no extra setup needed
    5. SystemJS setup in index.html should be modified accordingly –
    ……….
    packages: {
    ‘Scripts/appScripts’: {
    defaultExtension: ‘js’
    }
    ……….
    and
    ……
    System.import(‘Scripts/appScripts/boot’)
    ……

    In my project it works correctly in Chrome, FF and Edge (with some deprecation warnings in console).

    • Hi! I managed to make it work on visual 2015 asp.net 5.. but when I want to do it on .net 4 it keeps giving this error “Cannot find module ‘angular2/core”, I know is a configuration problem but I can’t solve it. Any ideas?

      • I managed to get the same error message, if go to Project Properties, TypeScript Build, Module System and select “System” instead of “CommonJS”. Try to select “CommonJS” there and clean-rebuild solution!

        • Hi, thank you for the answer. It didn’t work for me. I managed to make it work through “npm run tsc” like it said in the 5 min quick tutorial. If you leave the tsconfig.json it’ll work’ll, even the intellisense.

  67. I have did this tutorial but its not running. When I run this tutorial project on browser I get an error “ERR_CONNECTION_REFUSED” on chrome and debugging is stopped in VS 2015, I followed exactly the same steps that you have mentioned..

  68. Really good tutorial, but I have some issues.
    I done all steps, and then launched project (on IIS Express), and browsers(IE, Edge,FX) are cannot retrieve the page.
    Also, I ran a little experiment, opened index.html from file explorer by different browsers:
    Firefox – all working perfectly
    IE and Edge – it stuck on “Loading…”

  69. Mithun,

    Thank you so much. To this day this remains one of the few posts on running Angular2 in ASP.NET Core which is complete and understandable. For me it was the only one I could follow from start to finish.

    I had no idea how much went into this post until I dove in and started tinkering with it. Thanks too for updating the post from the comments. The conversation was very helpful. I just noticed Tim’s comments which again add to the value of this article.

    Tip: For people running this in Windows parallel’s for simplicity create your project on the C drive. Gulp does not not like directory paths like ‘\\Mac\Home\Desktop\asdf’ but the general error will not tell you this.

  70. Fixed my own issue by replacing in tsconfig.json “target”: “es5” with “target”: “es6”.

    I see my js is generated but my app is not working, my browser says “Loading…”

    package.json
    {
    “version”: “1.0.0”,
    “name”: “ASP.NET”,
    “private”: true,
    “dependencies”: {
    “angular2”: “2.0.0-beta.8”,
    “systemjs”: “0.19.23”,
    “es6-promise”: “^3.0.2”,
    “es6-shim”: “^0.33.3”,
    “reflect-metadata”: “0.1.2”,
    “rxjs”: “5.0.0-beta.2”,
    “zone.js”: “0.5.15”
    },
    “devDependencies”: {
    “gulp”: “^3.9.0”
    }
    }

    tsconfig
    {
    “compilerOptions”: {
    “emitDecoratorMetadata”: true,
    “experimentalDecorators”: true,
    “module”: “commonjs”,
    “noEmitOnError”: true,
    “noImplicitAny”: false,
    “outDir”: “../wwwroot/appScripts/”,
    “removeComments”: false,
    “sourceMap”: true,
    “target”: “es6”
    },
    “exclude”: [
    “node_modules”
    ]
    }

    any help appreciated.

  71. Same issue than Rados here

    ” Cannot find name ‘Promise'”

    Severity Code Description Project File Line Suppression State
    Error TS2304 Build: Cannot find name ‘Promise’. myproject D:\myproject\node_modules\angular2\platform\browser.d.ts 77

  72. Thanks for this post!

    Note the following from https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes:

    As of Angular 2.0.0-beta.6, Transitive typings are no longer included in the distribution. If you use –target=es5, you will need to add a line somewhere in your application (for example, at the top of the .ts file where you call bootstrap):

    ///

    Without this, you may see a bunch of errors when you compile even this basic project. I added that reference at the top of the app.ts file.

    • The included reference is not showing up in my post (due to stripping of tags, I suppose), but it is in the page I linked under 2.0.0-beta.6 Breaking Changes!

  73. Pingback: .Net Core 5 with Angular 2 in Visual Studio 2015 - Hard Way Solutions

  74. Hi!

    After completing the steps described in the tutorial, i have stuck at the end of step 5:

    When i hit the build button, these error messages come up:

    TS5042 Build: Option ‘project’ cannot be mixed with source files on a command line. File : VSTSC

    TS2661 Cannot re-export name that is not defined in the module. File: promise.d.ts

    What should i do ?

    The .js files are not getting created.

    Please help.

    Thanks 🙂

  75. This is the first example of a Angular 2 app, in Visual Studio 2015, with Typescript that I actually managed to get working. Great stuff. I did have the same problem Valentin had. Restarting VS solved that. I think there is still a few bugs to sort out in VS 2015. Thanks a lot for you post!

  76. Pingback: Angular 2 and ASP.NET Core 1.0 using Visual Studio Code and TypeScript - Mithunvp.com

  77. Doesn’t seem to work in Microsoft Edge browser. I get no errors but the web page only renders the static element! Any guidance would be appreciated as I’m new to Angular and Typescript. Thanks.

  78. thanks. this is great and exactly what i was looking for.
    A minor flaw: the index.html file does not seem to be correct (missing tag and not really correct html) and the app.ts template property is missing a value.

    but apart from that, this is the best tutorial that i have found so far. Thanks a lot

  79. Thanks for the great article 🙂 I have 2 questions:
    Why When I write text in template: ‘test’ it not shows in screen?
    and why I can not debug the ts files? (I think it because of the gulp)

    • Idan,
      If you edit text in template for TS(TypeScript file), we can’t see changes because TS is transpiled into JS and we are loading that in index.html. If you change in JS file, then you can see changes.

    • Bit late reply but you can debug them with the developer tools in most modern browsers, as long as the mappings are in the wwwroot directory as well. With VS2015 its simpler to keep ts files and all in the wwwroot, i keep my tsconfig outDir as “./” and Visual Studio will compile and collapse all the files together including the .map for your transpiled js file. These allow chrome, firefox etc. to be able to tell you what section of typescript code your issue is from, in relation to the js. I hope this helps someone else that may be curious as well.

      • It is working correctly when I put all ts, js and js.map into same folder. This comment helped!

        >> i keep my tsconfig outDir as “./” and Visual Studio will compile and collapse all the files together including the .map for your transpiled js file.

      • Today also tried moving tsconfig.json to ‘wwwroot/appScripts’, moving all typescript files to the same locations as the corresponding javascript and map files, in tsconfig.json changing “outDir” to “.” and in gulpfile.js changing tsProject to ts.createProject(‘wwwroot/appScripts/tsconfig.json’); and changing tsResult to gulp.src([“wwwroot/appScripts/*.ts” and now can debug typescript in Chrome. Haven’t had any luck with Edge, Internet Explorer or Firefox though.

  80. First, I would like to thank you for posting this fantastic article on how compile Angular 2 Apps in Visual Studio 2015. For me, this process was painful until reading your article.

    Below are the steps I used in conjunction with your article for project compilation.

    1) Download community edition of Visual Studio 2015

    2) Install “RC1 Update1” for visual studio 2015
    Create Web App in visual studio 2015, then select “Get ASP NET 5 RC”
    This installs RC1 Update1

    3) Install NPM:
    Use node.js installer to install NPM.
    Choose “Latest Features” download

    https://nodejs.org/en/

    4) Make sure you install the latest version of NPM
    npm install npm -g

    5) Make sure you install the latest version of TypeScript
    npm install -g typescript

    6) Make sure you install the latest version of Gulp
    npm install –save gulp-install

    7) Verify Versions by running
    a. npm: npm -v
    b. TypeScript: tsc -v
    c. gulp: gulp -v

    8) Make sure Visual Studio is utilizing the new latest installs of NodeJS by modifying the path order in WebTools:

    http://blogs.msdn.com/b/webdev/archive/2015/03/19/customize-external-web-tools-in-visual-studio-2015.aspx

    9) After I first compiled the application, I needed to add a dependencies in the file project.json file.
    “Microsoft.AspNet.StaticFiles”: “1.0.0-rc1-final”

    10) Modify index.html

    from

    to

  81. Thanks for the great article!

    Unfortunately, I could not make gulpscript.js working when build/rebuild project is fired. I needed to install gulp manually via npm and run command in Windows CLI.

    I used Visual Studio 2015 Update1 + Asp .Net 5 RC1 + Update1.

  82. Thanks for posting this. I followed these steps, and everything is working great except for one thing. It appears that I cannot debug my typescript/javascript very well. When I pull up the .ts files in dev tools, it is empty. When I put a debugger in the typescript file, it compiles that to javascript and hits the breakpoint, but it defaults to the empty .ts file. This makes it extremely difficult to debug. Is this what you are seeing?

    • Andrew,
      I didn’t focus much on debugging while writing article, I will check on that and hopefully will post that if I can find something.

      Try to debug JS files on browser using chrome dev tools

  83. Thank you Mithun, this is exactly what I was looking for (regarding using ASP.NET 5 with Angular2 and TypeScript).

    I come from a Microsoft/C# background (pre ASP.NET 5), so tools like npm and gulp are relatively new to me.

    My problem was how to handle the node_modules not being in the wwwroot folder. My first thought was to create a routing rule to allow node_modules to stay where they are but be publicly visible as if they were in wwwroot.

    Your solution shows a way to use gulp to automate moving specific libraries from node_modules to wwwroot. Excellent approach, though I’m curious if there are drawbacks.

    Such as… 1) Could there be other local tasks that would expect moved libraries to be in the original node_modules folder? 2) Will using gulp to move files mean I have to manually go find each library file that needs to be moved? 3) And could this approach cause issues with updating libraries in the future?

    Thanks!

    • Glad it was helpful. Even I come from pre ASP.NET world. NPM and Gulp are also new to me. The drawbacks you mentioned does exists, further working on these new technologies will give us more clean, less manual approach.

      For learning Angular 2, this technique is good but they are bound to change so lets wait.

  84. Pingback: ASPNET AngularJS 2 Tutorials | AngularJs

  85. When I create new type script project it did not work ( it supposed to work but it didn’t) and when I create project as you say “empty ASP.NET 5 project” it is work and complie tsconfig.json succesfully
    But Why with new typescript project it not work?
    (I use vs code)

    • Hi Noam,
      That’s really good you tried different way. TypeScript files and tsconfig.json needs be kept in same folder because for transpiling TS should treat it as virtual project solution and moves code to wwwroot folder as per tsconfig.json. Need to explore more on how Angular 2 might work on mobile apps using Cordova etc.

      If your using VS code then work with YeoMan generators for creating ASP.NET 5 project’s.

  86. Hi Mithun
    I check it is the last version , I try uninstall and then install with no success.
    I read that it is happen in this link and more:
    http://stackoverflow.com/questions/32465760/visual-studio-2015-tsconfig-json-typescript-1-6-0-beta
    even in type script 1.7
    maybe with project with cordova (I select with no cordova) it work
    only When I add command “tsc –p ../scripts” in the pre build it create the files ok but
    When I run the project I get this error :
    Unhandled exception at line 2, column 1 in http://localhost/AspNet5Angular2Demo/wwwroot/libs/rx.js
    0x800a1391 – JavaScript runtime error: ‘System’ is undefined
    What I am missing her? 🙂

  87. hi
    why I get this warning “tsconfig.json file is not supported in this project type”
    (it not copied to “../wwwroot/appScripts/” folder)

    • Please check if its TypeScript 1.7, VS 2015 Update 1, ASP.NET RC1 Update 1. Mostly TypeScript might not installed properly, try to reinstall it. I have not encountered it this.

      Let me know if it continues to give this error.

    • Final HTML displayed properly. I have displayed “Demo of Angular 2 using ASP.NET 5 with Visual Studio 2015” as H1 before angular component. Angular 2 writes “My First Angular 2 App” as H2.

      Check out console errors in chrome or firefox; it might help you. Let me know if you can’t solve it.

  88. Pingback: Starting Angular 2 in ASP.NET 5 with TypeScript...

  89. 2. inside gulpfile.js

    var libsToMove = [
    paths.npmSrc + ‘/angular2/bundles/angular2-polyfills.js’,
    paths.npmSrc + ‘/systemjs/dist/system.src.js’,
    paths.npmSrc + ‘/rxjs/bundles/Rx.js’,
    paths.npmSrc + ‘/angular2/bundles/angular2.dev.js’
    ];

    should be
    var libsToMove = [
    paths.npmSrc + ‘/angular2/bundles/angular2-polyfills.js’,
    paths.npmSrc + ‘/systemjs/dist/system.js’,
    paths.npmSrc + ‘/rxjs/bundles/Rx.js’,
    paths.npmSrc + ‘/angular2/bundles/angular2.dev.js’
    ];

    • You can shorten that further using map and ES6 syntax:

      var libsToMove = [
      ‘/angular2/bundles/angular2-polyfills.js’,
      ‘/systemjs/dist/system.js’,
      ‘/rxjs/bundles/Rx.js’,
      ‘/angular2/bundles/angular2.dev.js’
      ].map(p => paths.npmSrc + p);

      Whether it’s easier to read, depends on who you ask 🙂

  90. Thanks!
    But 3 places need to right ( if you are very new to these)
    1. “Right Click on “wwwroot“, add new file “NPM Configuration File“; ”
    should be :Right Click ‘AspNet5Angular2Demo”, add new file “NPM Configuration File“;