Using Angular 2 components on existing ASP.NET web pages

This question is not specific to Visual Studio, but yes, you can certainly accomplish this.

As you have suggested you can and should maintain the Angular application as a separate project.

The only additions that you need to make to your .aspx page are

1. including SystemJS and its configuration via script tags in that page or in its Master Page (You can also do this dynamically for CMS pages and using all sorts of other strategies). For example

    <script src="loction-of-systemjs.js"></script>
    <script src="loction-of-systemjs.config.js"></script>
   

2. Adding a markup tag with the selector corresponding to the app's root element, say 'my-embeddedable-widget', to your .aspx markup. For example

   <my-embeddedable-widget>Loading...</my-embeddedable-widget>
   

3. Importing your application via SystemJS.import from a script tag embedded in the page containing the component selector above. For example

   <script> 
     SystemJS.import('my-embeddedable-widget')
       .catch (function(e) {
         console.error(e);
       }); // not using .bind or => here since aspx tends to imply older browser support
   </script>
   

Note that this presupposes two things

1. that the 'my-embeddedable-widget' is set up in your SystemJS configuration. For example

   SystemJS.config({
     packages: {
       'my-embeddedable-widget': {
         main: 'main.ts' // just an example, could be main.js or anything really
       }
     }
   });
   

   If it is not you can add the config entry above as appropriate for your app (strongly recommended) or just import it directly from the path to the app's entry point such as e.g. my-embeddedable-widget/main.ts or my-embeddedable-widget/main.js.

2. That the entry point of your widget declares all of its platform level dependencies, such as zone.js and likely various polyfills. For example

   my-embeddedable-widget/main.ts

   import 'zone.js';
   import 'core-js';
   // ...
   import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
   // ....
   

   This means that SystemJS will automatically load them when your widget is requested. While you could bring them in via separate script tags as we do with the loader itself, making them explicit dependencies of our widget by using ES Modules improves maintainability and allows us to defer loading them until they are required. Furthermore it helps further decouple the widget from the .aspx page. However, if other JavaScript on the page requires these polyfills, you may need to adjust this approach (especially with respect to zone.js because it monkey patches window.Promise)