बूटस्ट्रैपिंग हाइब्रिड कोणीय 1 + 2 अनुप्रयोग

Question

आधिकारिक 5 min QuickStart के बाद मेरे पास एक साधारण कोणीय 2 ऐप काम कर रहा है।

मैंने कोणीय 1 सेट अप किया है और अब वे दोनों स्वतंत्र रूप से काम कर रहे हैं, this plunker देखें।

बाद official upgrade guide वे कहते हैं:

तो संकर मोड में आवेदन स्विच करने के लिए, हम पहले परियोजना के लिए कोणीय 2 स्थापित करना होगा। इस पर कुछ पॉइंटर्स के लिए QuickStart में निर्देशों का पालन करें। जब हमारे पास कोणीय 2 स्थापित होता है, तो हम आयात कर सकते हैं और UpgradeAdapter को तत्काल चालू कर सकते हैं, और उसके बाद bootstrap विधि को कॉल कर सकते हैं।

import {UpgradeAdapter} from 'angular2/upgrade'; 

/* . . . */ 

const upgradeAdapter = new UpgradeAdapter(); 

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true}); 

मेरा प्रश्न जहां यह जगह है: यह angular.bootstrap के रूप में ठीक उसी तर्क लेने के लिए तो यह आसान है कि स्विच करने के लिए डिज़ाइन किया गया है?

ऐसा लगता है कि 'मेरा काम करें' सवाल है लेकिन ऐसा नहीं है। मुझे लगता है कि main.ts में, लेकिन मैंने सफलता के बिना बहुत सी चीजों की कोशिश की। डॉक्टर इस बारे में वास्तव में स्पष्ट नहीं है और 1 महीने के कुछ ट्यूटोरियल पहले से ही पुराने हैं।

--- अद्यतन:

मेरे मामले में मैं upgrade.js लोड करने के लिए है कि मैं पहले से ही सोचा शामिल

Answer 1

मैं अपने plunkr पर एक नज़र था भूल गया था। वास्तव में आप कई बार bootstrap का उपयोग कर सकते हैं लेकिन इसका मतलब है कि आप अपने HTML पृष्ठ में दो अलग-अलग एप्लिकेशन का उपयोग करते हैं।

यदि आप एक ही अनुप्रयोग में कोणीय 1 और कोणीय 2 सामान मिश्रण करना चाहते हैं, तो आपको UpgradeAdapter की केवल boostrap विधि को कॉल करने की आवश्यकता है।

UpgradeAdapter पर boostrap समारोह के कॉल और यह निर्माण boot.ts फ़ाइल में किया जा सकता है है:

import {UpgradeAdapter} from 'angular2/upgrade'; 

var upgrade = new UpgradeAdapter(); 

// Configure the upgrade adapter 
(...) 

export function main() { 
    try { 
    upgrade.bootstrap(document.body, ['heroApp']); 
    } catch (e) { 
    console.error(e); 
    } 
} 

आप इस तरह अपनी HTML फ़ाइल में इस आयात कर सकते हैं:

<script> 
    System.import('app/main').then(function(src) { 
    src.main(); 
    }); 
</script> 

मिश्रण कोणीय 2 और कोणीय 1 सामान

यदि आप चाहते हैं एक कोणीय 2 अनुप्रयोग बूटस्ट्रैप बूटस्ट्रैप, पहले घटक के रूप में मुख्य घटक प्रदान करता है और Angular1 अनुप्रयोग के लिए प्रदाता Angular2 अनुप्रयोग में कारखानों/सेवाओं/निर्देशों का उपयोग करने में सक्षम होने के लिए प्रदान करता है।

// Providers for Angular1 elements 
upgrade.upgradeNg1Provider('customService'); 
upgrade.upgradeNg1Provider('customFactory'); 

// Providers for Angular2 elements 
upgrade.addProvider(HTTP_PROVIDERS); 

// Bootstrap Angular2 application 
upgrade.bootstrap(AppComponent); 

आप एक Angular1 आवेदन Angular2 सामान का उपयोग करना चाहते हैं, तो आप दस्तावेज़ प्रदान करने के लिए की जरूरत है।

// Providers for Angular2 elements 
upgrade.downgradeNg2Provider(HTTP_PROVIDERS); 

upgrade.bootstrap(document.body, ['heroApp']); 

यह plunkr भी आप के लिए उपयोगी हो सकता है: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=previewbootstrap विधि के पहले पैरामीटर के रूप में तत्व।