asp.net - 如何在 .NET 4 Web Forms 项目中使用 Angular 2？

Question

我有一个用 C# 编写的 ASP.NET 4 Web 窗体项目。我想添加 Angular 2。我在网上看到了很多使用 ASP.NET 5 的示例，但我不知道如何在我的项目中做到这一点。

Answer 1

我也遇到过类似的要求，并对此进行了一些 POC，并且肯定会继续推进。我将每个 .aspx 页面作为独立的 Angular 2 SPA 应用程序进行处理。这意味着每个 aspx 页面都会有自己的 App.Component.ts 和 main.ts 文件(文件名基于 Angular 2 文档)。 main.ts 文件包含引导应用程序的代码(下面的示例代码)，因此每个 .aspx 页面都会有一个 main.ts 文件。

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_BINDINGS} from 'angular2/http';

import {HomeComponent} from './home.component';

bootstrap(HomeComponent, [HTTP_BINDINGS])
    .catch(err => console.error(err));

每个组件都会有一个 app.component.ts(将我的 home.aspx 命名为 home.component.ts)文件.aspx 页面。现在，在包含 System.config 详细信息的配置文件中，我为 home.aspx 定义了新的映射和包条目，如下所示:

System.config({
    transpiler: 'typescript',
    typescriptOptions: {
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    },
    map: {
        app: '../../Javascript/angular/app',
        home: '../../Javascript/angular/home'
    },
    packages: {
        app: { main: './main.ts', defaultExtension: 'ts'},
        home: { defaultExtension: 'ts' }
    }
});

最后，我将 System.import 代码部分移至 .aspx 页面(代码如下)。每个页面都会导入在 system.config 中定义的自己的包。

 <script>
          System
            .import('home/main-home')
            .catch(console.error.bind(console));
    </script>

这里我将我的 main.ts 命名为 main-home.ts。

希望这对您和其他人有帮助。另外，我愿意接受这种方法的建议和审查/替代解决方案。

引用请参见:bootstrapping-multiple-angular-2-applications-on-the-same-page