Using Angular 2 Components on Existing ASP.NET Web Pages

Question

I am trying to move the front of the website to Angular 2. I currently have a really big ASP.NET 4.5 website .

I would like to create a separate Angular 2 project , since it will grow over time (and hopefully replace asp.net) At the moment I would like to create this project in Visual Studio (2015) and use some Angular components or modules on the web ASP.NET site . Is Angular AppModule used on the ASP website?

I did some research, but could not find answers or examples.

Am I going to do this relying on npm and system.js ? I have seen that many people use gulp to copy a file.

Is there a “right” way to do this?

Any help would be greatly appreciated

Answer 1

This question is not specific to Visual Studio, but of course you can do it.

As you said, you can and should support the Angular application as a separate project.

The only additions to your .aspx page are

• SystemJS script ( CMS ).

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

• , , "my-embeddedable-widget" , .aspx.

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

• SystemJS.import script, , .

  <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>
  

,

• 'my-embeddedable-widget' SystemJS.

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

  , , ( ) , , my-embeddedable-widget/main.ts my-embeddedable-widget/main.js.

• , , zone.js , , .

  -embeddedable-/main.ts

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

  , SystemJS . script , , , ES Modules, , . , .aspx. , JavaScript , ( zone.js, window.Promise)