मुझे एप्लिकेशन में RequJS को शामिल करते समय सही तरीके से लोड करने के लिए Angular2 प्राप्त करने में समस्याएं आ रही हैं।एंजुलर 2 RequJS
सादगी बुद्धिमान मैं Angular2 यहाँ स्थित पर बहुत ही सरल नमस्ते विश्व जावास्क्रिप्ट ट्यूटोरियल उपयोग कर रहा हूँ के लिए: https://angular.io/docs/js/latest/quickstart.html
मैं इस प्रणाली ठीक काम कर रहा Angular1 का उपयोग कर है, लेकिन मैं इस सफलता Angular2 का उपयोग कर को दोहराने के लिए नहीं कर पा रहे।
यहाँ मेरी index.html फ़ाइल है:
<html>
<head>
<title>Angular 2 QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load RequireJS -->
<script type="text/javascript", src="bower_components/requirejs/require.js", data-main="/require.config.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<ireland-product-app>Loading...</ireland-product-app>
</body>
मेरे require.config.js फ़ाइल:
require([
'assets/requiredPathsAndShim.js'
], function(requirePathsAndShim) {
require.config({
baseUrl: '/',
paths: requirePathsAndShim.paths,
shim: requirePathsAndShim.shim,
/// Kick start app...
deps: ['app/main']
});
});
मैं requiredPathsAndShim.js फ़ाइल का उपयोग सभी निर्भरता मैं देख रहा हूँ एक Angular2 आवेदन शुरू करने के लिए आवश्यक हैं कि लोड करने के लिए।
"use strict";
(function(define) {
define([], function() {
return {
waitSeconds : 10000,
paths: {
'shim' : 'node_modules/core-js/client/shim.min',
'zone' : 'node_modules/zone.js/dist/zone',
'Reflect' : 'node_modules/reflect-metadata/Reflect',
'Rx' : 'node_modules/rxjs/bundles/Rx.umd',
'core' : 'node_modules/@angular/core/core.umd',
'common' : 'node_modules/@angular/common/common.umd',
'compiler' : 'node_modules/@angular/compiler/compiler.umd',
'platform-browser' : 'node_modules/@angular/platform-browser/platform-browser.umd',
'platform-dynamic' : 'node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd'
},
shim : {
}
}
});
})(define);
मैं तो मेरे 'required.config' फ़ाइल से 'ऐप्लिकेशन/मुख्य' फ़ाइल लोड जो Angular2 की बूटस्ट्रैप कार्यक्षमता लोड होगा:: यहाँ फ़ाइल है
"use strict";
(function() {
define([
'app/app.component'
], function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
});
})();
एप्लिकेशन/एप्लिकेशन .component फ़ाइल एक फ़ाइल है जो केवल मेरे Angular2 घटक को लौटाती है जो ऐप शुरू करने के लिए main.js बूटस्ट्रैप फ़ंक्शन में पारित होती है।
"use strict";
(function() {
define([
], function() {
return {
AppComponent : ng.core.Component({
selector : 'ireland-product-app',
template : '<h1>Product App</h1>'
})
.Class({
constructor : function() {}
})
}
});
})();
मैं दिया कुछ घंटों के लिए इस के साथ प्रयोग करना है और यह काम कर पाने के लिए प्रतीत नहीं कर सकते हैं: इस फाइल है। क्या कोई मुझे सही दिशा में इंगित कर सकता है कि यह क्यों काम नहीं कर रहा है? मुझे लगता है कि कुछ shims को require.config में जोड़ा जाना चाहिए, लेकिन मुझे अभी तक स्क्रिप्ट लोड निर्भरता सेट करने में कोई सफलता नहीं मिली है।
धन्यवाद
मुझे पता है तुम यह सुनने के लिए नहीं करना चाहते, लेकिन यदि आप सिस्टम का प्रयोग कर एक अधिक आसान हो जा रहे हैं या Angular2 के साथ वेबपैक (या यहां तक कि ब्राउज़र)। सिस्टम को एसिंक्रोनस आलसी लोडिंग के लिए भी समर्थन है। इसके अतिरिक्त आप टाइपस्क्रिप्ट के साथ ES6 मॉड्यूल सिंटैक्स का उपयोग करना चाहते हैं, क्योंकि यह आपको एक बार आपके मॉड्यूल आयात लिखने की अनुमति देता है, और जो भी मॉड्यूल सिस्टम आप चुनते हैं उसे लक्षित करते हैं। यह आपके कोड को एक विशिष्ट मॉड्यूल सिस्टम से decouples। – Martin
@ मार्टिन, मुझे एक ही काम करने की ज़रूरत है, क्योंकि हमारी मौजूदा प्रणाली आवश्यकताएं का उपयोग करती है और सिस्टम का उपयोग करने से कोई फर्क नहीं पड़ता है, लेकिन मुझे लगता है कि मौजूदा कोड से लोड करना सबसे अच्छा है, क्योंकि कोणीय 1 और कोणीय 2 एक साथ सह-मेजबान होंगे जब तक कि कोणीय 1 पूरी तरह से न हो हटा दिया। – Basit
मुझे एक ही समस्या है - मैं RequJS का उपयोग कर Angular2 ऐप चलाने की कोशिश करता हूं। लेकिन कृपया ध्यान दें कि RequJS को कुछ फ़ाइल लोड करने के लिए, इस फ़ाइल को एएमडी सिंटैक्स में होना चाहिए जिसका अर्थ है कि फाइल को परिभाषित ([], function() {...}) ब्लॉक के अंदर लिखा जाना चाहिए। हालांकि एंगुलर 2 की स्क्रिप्ट अलग-अलग वाक्यविन्यास के साथ लिखी जाती हैं - आयात/निर्यात विवरण के साथ। इसलिए आवश्यकता उन्हें लोड नहीं कर सकती है, और निर्यात कुंजी शब्द (Angular2 स्क्रिप्ट में) एक त्रुटि - अप्रत्याशित चरित्र - निर्यात कुंजी शब्द पर फेंक देते हैं। –