如何在.NET 4 Web窗体项目中使用Angular 2？

Question

我有一个用C#编写的ASP.NET 4 Web Forms项目.我想添加Angular 2.我在网上看到了很多使用ASP.NET 5的例子,但我无法弄清楚如何在我的项目中做到这一点.

Answer 1

面对类似的要求并对此做了一些POC并且肯定会继续前进.我使用每个.aspx页面作为独立的角度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));

每个aspx页面都会有一个app.component.ts(为home.aspx命名为home.component.ts)文件.现在在包含Sytem.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页面(下面的代码).每个页面都将导入自己在sytem.config中定义的包.

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

在这里,我将main.ts命名为main-home.ts.

希望这可以帮助你和其他人.此外,我对这种方法的建议和审查/替代解决方案持开放态度.

有关参考,请参阅:同一页面上的bootstrapping-multiple-angular-2-applications