2016-07-07 41 views
6

numaralı System.import'a ihtiyacımız var QuickStart öğreticisinin versiyonunu Angular 2'den paket js dosyası kullandığım yerden test ediyordum. index.html şu şekildedir: Bunu yürütmek zaman, benim Merhaba dünya mesajı ekranda görüntülenirAngular 2 hızlı başlangıç ​​neden 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> 

, ancak bir hata çok testten sonra konsola syntax error: unexpected token <

orada var, farkındayım Aşağıdaki satırı index.html dosyasından kaldırırsam, her şey çalışır ve hiçbir hata iletisi görüntülenir. System.import('app').catch(function(err){ console.error(err); });

Bu yüzden, bu satırın uygulama için ana giriş dosyası olan bootstrap ile giriş noktası olduğunu düşünmüştüm ama görünüşe göre gerekli değil. Bir şey mi eksik?

Teşekkürler.

GÜNCELLEME

Bu ve bunun System.import index.html ve birlikte değilken bu hata ile, çalışıyor görünüyor Her iki durumda da System.import olmadan sonucun 2 ekran vardır Aksi halde hatalar. Ayrıca, System.import dizinde olduğunda, uygulama modülünü yüklemeye çalışıyor ve bir şekilde bir hata veriyor. Bunun neden olduğunu gerçekten anlayamıyorum.

enter image description here Ayrıca enter image description here

, app ile ilgili benim systemjs.config.js: Ben Sen ihtiyacım var systemjs-oluşturucu

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' * * giriş noktasıdır. 'App' modülünü' .../app' yolundan çözümlemeye ve html'yi buradan yüklemeye çalıştığı gerçeği 'app'' systemjs.config.js'de düzgün tanımlanmadığını gösterir. – estus

+0

Sorunuzu sistem.config.js bölümüyle güncelledim. Dağıtım klasörümdeki yapı, bundle.app.js ve index.html in/web için ./web/app şeklindedir. – David

+0

Ardından, 'app/main.js' yüklenmelidir, bu yüzden neden sadece 'app' yüklendiğini açık değil. Her şey kararsız ve paket sürümleri önemli. Bir plunker [MCVE] (http://stackoverflow.com/help/mcve) bunu çözmeye yardımcı olur. Index.html'yi gerçek kodla güncellediğinizi görüyorum. Bu, System.import' olmadan neden çalıştığını açıklar. Komut dosyası varsa, 'System.import''a ihtiyacınız yoktur. Ya bir ya da diğeri. – estus

cevap

3

kullanarak Gulp içinde paket oluşturdu

(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' } 
    }; 
... 

Uygulamanızın önyüklenmesi ve çalıştırılması için System.import.

Onsuz çalıştıramaz ve eğer varsa, tarayıcınızda kasıtlı bir sürümünüz olabilir.

hatası:

syntax error: unexpected token < 

komut bazı dosyaların doğru yerleştirildiğinden alamadım, ya da uygulama yüklenmesini JS dosyalarına derlenmiş engelleyen bir hata var olduğunu genellikle bir göstergesidir.

Hata ve konsoldaki çıktı hakkında daha fazla bilgi olmadan, sorunun tam olarak ne olduğunu söylemek zor.

+0

teşekkürler, @Boyan. Tarayıcımda bellek önbelleğini temizlemeyi denedim ve diğer tarayıcılarda da denedim, ancak System.import (??) olmadan çalışıyor. Yardım ettiğimde daha fazla bilgi sağlamak için sorumu güncelledim. – David

+0

Şimdi anlıyorum. @estus'un önerdiği gibi, hem system.import hem de bundle.js dosyasına ihtiyacınız yoktur. Paketleme, tüm komut dosyalarını birleştirmek ve her şeyi tek bir komut dosyasından sunmak için kullanılır. Bu genellikle, uygulamayı uygulamada sunarken yapılır. System.Import kullanımı, geliştirirken bunu yapmak için önerilen yoldur. –

0

yerine: Benim kişisel deneyim üzerinde

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

, bunu kullanmak daha iyi olduğunu düşünüyorum:

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