मैं .NET 4 वेब प्रपत्र प्रोजेक्ट में कोणीय 2 का उपयोग कैसे कर सकता हूं?

Question

मेरे पास सी # में लिखा गया एएसपी.NET 4 वेब फॉर्म प्रोजेक्ट है। मैं कोणीय 2 जोड़ना चाहता हूं। मैंने एएसपी.नेट 5 का उपयोग करके वेब पर कई उदाहरण देखे हैं, लेकिन मुझे पता नहीं है कि यह मेरे प्रोजेक्ट में कैसे किया जाए।

Answer 1

इसी तरह की आवश्यकता का सामना करना पड़ा है और इस पर कुछ पीओसी किया है और निश्चित रूप से इसके साथ आगे बढ़ रहा है। मैंने प्रत्येक .aspx पृष्ठ के साथ अकेले स्टैंड कोणीय 2 एसपीए ऐप के रूप में काम किया। इसका मतलब है कि प्रत्येक एएसपीएक्स पेज की अपनी App.Component.ts और main.ts फ़ाइल होगी (फ़ाइल नाम एंगुलर 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 पेज के लिए फ़ाइल। अब जैसा कि नीचे दिखाया कॉन्फ़िग फ़ाइल जो 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>

यहाँ मैं मुख्य-home.ts के रूप में मेरे main.ts नामित किया है।

उम्मीद है कि यह आपको और दूसरों की सहायता करता है। इसके अलावा मैं इस दृष्टिकोण के सुझाव और समीक्षा/वैकल्पिक समाधान के लिए खुला हूं।

संदर्भ के लिए देखें: आपके वेबपृष्ठ पर bootstrapping-multiple-angular-2-applications-on-the-same-page

Answer 2

परिवर्तन आपका index.html आधार मार्ग

<base href="/YourWebPageRoute"> 

वेबफ़ॉर्म

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

Answer 3

मैं पूरी तरह @ पवन के साथ सहमत अंदर पेज शामिल जवाब लेकिन हाँ @ पवान मुझे इसका एक अच्छा समाधान मिला। इस समाधान ने निश्चित रूप से मेरी मदद की और उम्मीद है कि यह आप सभी की भी मदद करेगा।

हमें प्रत्येक पृष्ठ के लिए main.ts और AppComponent.ts बनाने की आवश्यकता नहीं है।

हमें अपना मुख्य घटक बनाने की आवश्यकता है जिसे हम गतिशील बूटस्ट्रैप कर रहे हैं। हमारे मामले में, app.component.ts में, मैं वर्तमान पृष्ठ के यूआरएल के आधार पर गतिशील रूप से हमारे घटक को बूटस्ट्रैप कर रहा हूं।

मान लें कि आपका पृष्ठ home.aspx है तो बूस्ट्रैप होमकंपोनेंट या about.aspx तो बूस्ट्रैप के बारे में कॉम्पोनेंट मैं इसे निम्नलिखित के रूप में 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); 
     } 
    } 
} 

यह कैसे पेज यूआरएल के आधार पर, हम गतिशील हमारे घटक bootstrap और प्रत्येक पृष्ठ के लिए main.ts और app.component.ts का एक बहुत फ़ाइलों को सहेज सकते है।

इसके लिए आपको नीचे के रूप में NgModule की entryComponents सरणी में प्रत्येक घटक के लिए प्रविष्टि जोड़ने की जरूरत:

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

आशा इस मदद करता है।