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

我有用C＃编写的ASP.NET 4 Web Forms项目。我想添加Angular 2.我在网上看到很多使用ASP.NET 5的例子，但我无法弄清楚如何在我的项目中执行它。如何在.NET 4 Web Forms项目中使用Angular 2？

来源

2016-02-12 BorisD

个人？我建议反对它。 Angular 2就像您可以获得的客户端一样。与WebForms耦合听起来像一个漫长而痛苦的经历。 –

有没有想过这件事？我实际上在同一条船上 – Matt

已经面临类似的要求，并做了一些POC这一点，并肯定会继续与它。我作为独立的角度2 SPA应用程序与每个.aspx页面一起工作。这意味着每个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.component.ts我home.aspx）文件为每个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' } 
 
    } 
 
});

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

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

在这里，我有一个名为我的main.ts作为主home.ts。

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

仅供参考，请参阅：bootstrapping-multiple-angular-2-applications-on-the-same-page

来源

2016-06-12 07:58:13 pawan

我面临这个问题，并没有前进，有没有可以上传你的代码的基础部分？也许在Github .. – Franki1986

@ Franki1986请查看我的答案。大部分这将有所帮助。 –

改变您的index.html基本路线到您的网页

<base href="/YourWebPageRoute">

包括Web窗体

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

来源

2016-10-03 15:27:51

我完全@帕万的同意内页回答，但是@pawan我找到了一个很好的解决方案。这个解决方案无疑帮助了我，并希望它能帮助你们所有人。

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

我们需要使我们的主要组件是我们的引导动态。在我们的例子中，在app.component.ts中，我基于当前页面的url动态地引导组件。

假设你的页面是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); 
     } 
    } 
}

这是怎么了基于网页的网址，就可以动态地引导我们的组件，节省main.ts和app.component.ts的很多文件每一页。

对于这一点，你需要为每个组件添加进入NgModule的entryComponents排列如下：

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

希望这有助于。

来源

2017-08-16 06:50:44

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

回答

相关问题