Testowałem swoją wersję samouczka QuickStart od Angular 2, gdzie używam pliku js pakietu. Index.html jest tak:Angular 2 quickstart dlaczego potrzebujemy System.import w 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>
Więc kiedy mogę wykonać to, mój świat Halo wiadomość jest wyświetlana na ekranie, ale nie ma błędu w konsoli syntax error: unexpected token <
Po wielu testach, zdaję sobie sprawę, że jeśli usuniemy poniższy wiersz z pliku index.html, wszystko działa i nie jest wyświetlany komunikat o błędzie. System.import('app').catch(function(err){ console.error(err); });
Więc ... Pomyślałem, że ta linia była punktem wyjściowym dla aplikacji, główny plik z bootstrapem, ale najwyraźniej nie jest potrzebny. Czy czegoś brakuje?
Dzięki.
UPDATE
To są 2 screeny z wyniku i bez System.import W obu przypadkach wydaje się, że działa bez żadnych błędów podczas System.import nie jest w index.html i błędy w przeciwnym razie. Ponadto, gdy System.import znajduje się w indeksie, wydaje się, że próbuje załadować moduł aplikacji i w jakiś sposób podaje błąd. Naprawdę nie rozumiem, dlaczego tak się dzieje.
Również moi systemjs.config.js dotyczące aplikacji:
(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' }
};
...
stworzyłem paczkę w Gulp użyciu systemjs-builder
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);
})
})
'System.import' * jest * punkt wejścia. Fakt, że próbuje rozwiązać moduł 'app' ze ścieżki' .../app' i ładuje z niego html sugeruje, że 'app' nie zostało poprawnie zdefiniowane w' systemjs.config.js'. – estus
Zaktualizowałem moje pytanie z częścią mojego pliku system.config.js. Struktura w folderze wdrożenia to ./web/app dla mojego bundle.app.js i index.html w/web. – David
Następnie powinien załadować 'app/main.js', więc nie jest jasne, dlaczego ładuje się właśnie' app'. Całość jest niestabilna, a wersje pakietów mają znaczenie. A plunker [MCVE] (http://stackoverflow.com/help/mcve) pomoże rozwiązać ten problem. Widzę, że zaktualizowałeś index.html za pomocą prawdziwego kodu. To wyjaśnia, dlaczego działa bez 'System.import'. Jeśli masz dołączony skrypt, nie potrzebujesz 'System.import'. To albo jedno, albo drugie. – estus