2016-07-07 11 views
6

में System.import क्यों चाहिए, मैं कोणीय 2 से क्विकस्टार्ट ट्यूटोरियल के अपने संस्करण का परीक्षण कर रहा था जहां मैं एक बंडल जेएस फ़ाइल का उपयोग करता हूं। index.html इस तरह है:कोणीय 2 क्विकस्टार्ट हमें index.html

<html> 
    <head> 
    <title>Angular 2 QuickStart Deploy</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="lib/shim.min.js"></script> 
    <script src="lib/zone.js"></script> 
    <script src="lib/Reflect.js"></script> 
    <script src="lib/system.src.js"></script> 
    <script> 
     System.import('app').catch(function(err) { console.error(err); }); 
    </script> 
    </head> 
    <!-- 2. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    <!-- application bundle --> 
    <script src="app/bundle.app.js"></script> 
    </body> 
</html> 

तो जब मैं इस पर अमल, मेरे हैलो वर्ल्ड संदेश स्क्रीन में प्रदर्शित किया जाता है, लेकिन वहाँ सांत्वना syntax error: unexpected token <

ज्यादा परीक्षण के बाद में कोई त्रुटि है, मैं उस एहसास अगर मैं index.html फ़ाइल से निम्न पंक्ति को हटा देता हूं, तो सब कुछ काम करता है और कोई त्रुटि संदेश प्रदर्शित नहीं होता है। System.import('app').catch(function(err){ console.error(err); });

तो ... मैंने सोचा था कि यह लाइन बूटस्ट्रैप के साथ मुख्य फ़ाइल, मुख्य फ़ाइल के लिए प्रवेश बिंदु थी, लेकिन स्पष्ट रूप से इसकी आवश्यकता नहीं है। क्या मैं कुछ भूल रहा हूँ?

धन्यवाद।

अद्यतन

इस के साथ और System.import दोनों ही मामलों में यह यह कोई त्रुटियों के साथ, काम कर रहा है जब System.import index.html में और साथ नहीं है लगता है बिना परिणाम के 2 स्क्रीनशॉट हैं अन्यथा त्रुटियां। साथ ही, जब System.import इंडेक्स में है तो ऐसा लगता है कि यह ऐप मॉड्यूल लोड करने की कोशिश कर रहा है और किसी भी तरह से यह एक त्रुटि दे रहा है। मैं वास्तव में समझ नहीं पा रहा हूं कि ऐसा क्यों होता है।

enter image description here enter image description here

इसके अलावा, एप्लिकेशन के बारे में मेरी systemjs.config.js:

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', 
    '@angular':     'node_modules/@angular', 
    'rxjs':      'node_modules/rxjs' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' } 
    }; 
... 

मैं systemjs निर्माता

gulp.task('bundle:app',() => { 
    builder.buildStatic('app/*.js', 'web/app/bundle.app.js') 
    .then(function() { 
    console.log('Build complete'); 
    }) 
    .catch(function(err) { 
    console.log('error ' + err); 
    }) 
}) 
+0

'System.import' * * है प्रवेश बिंदु। तथ्य यह है कि यह 'ऐप' मॉड्यूल को '.../app' पथ से हल करने का प्रयास करता है और वहां से एचटीएमएल लोड करता है, यह बताता है कि' systemjs.config.js' में 'ऐप' को ठीक से परिभाषित नहीं किया गया था। – estus

+0

मैंने अपने सिस्टम.config.js के हिस्से के साथ अपना प्रश्न अपडेट किया। मेरे तैनाती फ़ोल्डर में संरचना। Bwele.app.js और index.html में/web के लिए ./web/app है। – David

+0

फिर यह 'app/main.js' लोड करना है, इसलिए यह स्पष्ट नहीं है कि यह केवल 'ऐप' क्यों लोड करता है। पूरी बात अस्थिर है, और पैकेज संस्करण मायने रखता है। एक प्लंकर [एमसीवीई] (http://stackoverflow.com/help/mcve) इसे हल करने में मदद करेगा। मैं देखता हूं कि आपने वास्तविक कोड के साथ index.html को अपडेट किया है। यह बताता है कि यह 'System.import' के बिना क्यों काम करता है। यदि आपके पास बंडल स्क्रिप्ट है, तो आपको 'System.import' की आवश्यकता नहीं है। यह या तो एक या दूसरे है। – estus

उत्तर

3

का उपयोग कर आप की क्या ज़रूरत है Gulp में बंडल बनाया बूटस्ट्रैप करने के लिए System.import और अपना एप्लिकेशन चलाएं।

यह इसके बिना नहीं चलाया जा सकता है, और यदि ऐसा होता है, तो आपके ब्राउज़र में एक कैश संस्करण हो सकता है।

त्रुटि:

syntax error: unexpected token < 

आमतौर पर एक संकेत लिपि फ़ाइलों में से कुछ सही ढंग से भरी हुई है कि नहीं किया हो, या आपको एक त्रुटि है कि आपका ऐप को लोड किए जाने से जे एस फ़ाइलें संकलित रोका है।

आपकी त्रुटि और कंसोल में आउटपुट के बारे में अधिक जानकारी के बिना, यह कहना मुश्किल है कि समस्या वास्तव में क्या है।

+0

धन्यवाद, @ बोयान। मैंने अपने ब्राउज़र में मेमोरी कैश की सफाई करने की कोशिश की और मैंने अन्य ब्राउज़रों में भी कोशिश की, लेकिन यह System.import (??) के बिना काम कर रहा है। मैंने मदद की स्थिति में अधिक जानकारी प्रदान करने के लिए अपना प्रश्न अपडेट किया। – David

+0

अब मैं देखता हूं। @estus की तरह सुझाव दिया गया है, आपको सिस्टम.इम्पोर्ट और bundle.js फ़ाइल दोनों की आवश्यकता नहीं है। बंडलिंग का उपयोग सभी स्क्रिप्ट को गठबंधन करने और एक स्क्रिप्ट से सबकुछ करने के लिए किया जाता है। यह आमतौर पर तब किया जाता है जब आप उत्पादन में ऐप की सेवा कर रहे हों। सिस्टम का उपयोग करना। इंपोर्ट विकास के दौरान इसे करने का अनुशंसित तरीका है। –

0

बजाय:

System.import('app').catch(function(err) { console.error(err); }); 

मेरे व्यक्तिगत अनुभव पर, मुझे लगता है कि उपयोग करना बेहतर है:

System.import('main.js').catch(function(err){ console.error(err); });