Question

我正在尝试将网站的前端部分移动到Angular 2。目前我有很大的 ASP.NET 4.5 网站。

我想创建一个单独的 Angular 2 项目，因为它会随着时间的推移而增长（并希望取代asp.net）目前我想在 Visual Studio（2015）中创建此项目，并在实际的 ASP.NET 网站中使用一些角度组件或模块。角度AppModule是否在ASP网站中？

我做了一些研究，但找不到答案或例子。

我能够依靠 npm 和 system.js 来做到这一点吗？我看到很多人正在使用 gulp 来复制文件。

是否有＆＃34;权利＆＃34;这样做的方式？

任何帮助都将受到高度赞赏

Answer 1

这个问题不是特定于Visual Studio，但是，你当然可以做到这一点。

正如您所建议的，您可以而且应该将Angular应用程序维护为一个单独的项目。

您需要对.aspx页面添加的唯一内容是

包括SystemJS及其配置，通过该页面或其母版页中的脚本标签（您也可以动态地为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> 
  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>

请注意，这预设了两件事

在您的SystemJS配置中设置了'my-embeddedable-widget'。例如
```
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 以及可能的各种polyfill。例如

我-embeddedable-插件/ main.ts

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

这意味着SystemJS会在请求窗口小部件时自动加载它们。虽然您可以通过单独的脚本标记将它们引入，就像我们使用加载器本身一样，通过使用ES模块使它们成为我们窗口小部件的显式依赖关系可以提高可维护性，并允许我们将它们加载到需要它们之前。此外，它有助于进一步将小部件与.aspx页面分离。但是，如果页面上的其他JavaScript需要这些polyfill，您可能需要调整此方法（特别是关于 zone.js ，因为它猴子补丁window.Promise）

在现有ASP.NET网页上使用Angular 2组件

1 个答案: