Làm cách nào để sử dụng Angular 2 trong dự án .NET 4 Web Forms?

Question

Tôi có dự án ASP.NET 4 Web Forms được viết bằng C#. Tôi muốn thêm Angular 2. Tôi đã nhìn thấy rất nhiều ví dụ trên web bằng cách sử dụng ASP.NET 5 nhưng tôi không thể tìm ra cách để làm điều đó trong dự án của tôi.

Answer 1

Đã phải đối mặt với yêu cầu tương tự và đã thực hiện một số POC về điều này và chắc chắn sẽ tiếp tục với nó. Tôi đã từng làm việc với mỗi trang .aspx như một ứng dụng SPA 2 góc độc lập. Điều này có nghĩa là mỗi trang aspx sẽ có tệp App.Component.ts và main.ts riêng của nó (tên tệp dựa trên tài liệu Angular 2). Tệp main.ts chứa mã để khởi động ứng dụng (mã mẫu bên dưới) do đó sẽ có tệp main.ts cho mỗi trang .aspx.

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

Sẽ có một app.component.ts (đặt tên nó home.component.ts cho home.aspx của tôi) nộp cho mỗi trang aspx. Bây giờ trong file config chứa chi tiết Sytem.config i được xác định bản đồ và gói mục mới cho home.aspx tôi như hình dưới đây:

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

Và cuối cùng tôi chuyển mã System.import một phần vào trang .aspx (mã bên dưới). Mỗi trang sẽ nhập gói riêng của nó được định nghĩa trong sytem.config.

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

đây tôi đã đặt tên main.ts của tôi như là chính-home.ts.

Hy vọng điều này sẽ giúp bạn và những người khác. Ngoài ra tôi đang mở cho đề xuất và xem xét/giải pháp thay thế của phương pháp này.

Để tham khảo xin vui lòng xem: bootstrapping-multiple-angular-2-applications-on-the-same-page

Answer 2

thay đổi tuyến đường cơ sở index.html của bạn để trang web của bạn

<base href="/YourWebPageRoute"> 

bao gồm trang bên trong Webform

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

Answer 3

Tôi hoàn toàn đồng ý với của @ Pawan trả lời nhưng có @pawan tôi tìm thấy một giải pháp tốt đẹp này. Giải pháp này chắc chắn đã giúp tôi và hy vọng nó sẽ giúp tất cả các bạn quá.

Chúng tôi không cần tạo main.ts và AppComponent.ts cho mỗi trang.

Chúng tôi cần tạo thành phần chính mà chúng tôi đang khởi động động. Trong trường hợp của chúng tôi, trong app.component.ts, tôi khởi động thành phần của chúng tôi dựa trên url động của trang hiện tại.

Giả sử nếu trang của bạn là home.aspx thì hãy khởi động HomeComponent hoặc about.aspx sau đó tăng cường Giới thiệuComponent Tôi đang thực hiện bằng cách triển khai phương pháp ngDoBootstrap như sau.

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

Đây là cách dựa trên url trang, chúng tôi có thể tự động khởi động Thành phần của chúng tôi và lưu nhiều tệp main.ts và app.component.ts cho mỗi trang.

Đối với điều này, bạn cần phải thêm vào cho mỗi thành phần vào entryComponents mảng của NgModule như sau:

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

Hope this helps.