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

I have a ASP.NET 4 Web Forms project written in C#. I would like to add Angular 2. I've seen a lot of examples on the web using ASP.NET 5 but I can't figure out how to do it in my project.

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

3 个解决方案

#1

Have faced similar requirement and did some POC on this and definitely moving forward with it . I worked on with each .aspx page as stand alone angular 2 SPA app. This means each aspx page will have its own App.Component.ts and main.ts file(file name based on Angular 2 documentation). main.ts file contains the code to bootstrap the application (sample code below) so there will be a main.ts file for each .aspx page.

面对类似的要求并对此做了一些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));

There will be one app.component.ts(named it home.component.ts for my home.aspx) file for each aspx page. Now in the config file which contains Sytem.config details i defined new map and package entry for my home.aspx as shown below:

每个aspx页面都会有一个app.component.ts(将home.component.ts命名为home.aspx)文件。现在在包含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' }
    }
});

And finally I moved the System.import code part to .aspx page(code below). Each page will import its own package defined in sytem.config.

最后,我将System.import代码部分移动到.aspx页面(下面的代码)。每个页面都将导入sytem.config中定义的自己的包。

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

here i have named my main.ts as main-home.ts.

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

Hopefully this helps you and others. Also i am open for suggestion and review/alternate solution of this approach.

希望这可以帮助你和其他人。此外,我愿意接受这种方法的建议和审查/替代解决方案。

For reference please see: bootstrapping-multiple-angular-2-applications-on-the-same-page

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

#2

I totally agree with @pawan's answer but yes @pawan i found a nice solution of this. This solution definitely helped me and hope it will help all of you too.

我完全同意@ pawan的回答,但是@pawan我找到了一个很好的解决方案。这个解决方案肯定对我有所帮助,并希望它也会帮助你们所有人。

We don't need to create main.ts and AppComponent.ts for each and every page.

我们不需要为每个页面创建main.ts和AppComponent.ts。

We need to make our main component which we are bootstrapping dynamic. In our case, in app.component.ts, i am bootstrapping our component dynamically based on url of current page.

我们需要制作我们引导动态的主要组件。在我们的例子中,在app.component.ts中,我根据当前页面的url动态引导我们的组件。

Let's say if your page is home.aspx then boostrap HomeComponent or about.aspx then boostrap AboutComponent I am doing it by implementing ngDoBootstrap method as following.

假设您的页面是home.aspx然后是boostrap HomeComponent或about.aspx然后是boostrap AboutComponent我是通过实现ngDoBootstrap方法来实现的。

export class AppModule { 
    url : string;
    constructor(@Inject(DOCUMENT) private document: any){
        this.url = this.document.location.href.toLowerCase();
    }
    ngDoBootstrap(app:ApplicationRef){
        if(this.url.indexOf("home.aspx") > 0){
            app.bootstrap(HomeComponent);   
        }
        else if(this.url.indexOf("about.aspx") > 0){
            app.bootstrap(AboutComponent);  
        }
    }
}

This is how based on page url, we can dynamically bootstrap our Component and save a lot files of main.ts and app.component.ts for each page.

这是基于页面URL的方式,我们可以动态地引导我们的Component并为每个页面保存很多main.ts和app.component.ts文件。

For this, you need to add entry for each component into entryComponents array of NgModule as below:

为此,您需要将每个组件的条目添加到NgModule的entryComponents数组中,如下所示:

@NgModule({
  entryComponents : [
        HomeComponent, 
        AboutComponent, 
    ]
})

Hope this helps.

希望这可以帮助。

#3

change your index.html base route to your webpage

将index.html基本路线更改为您的网页

<base href="/YourWebPageRoute">

include the page inside the webform

包括webform中的页面

<% Response.WriteFile("index.html"); %>

#1

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

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' }
    }
});