Angular 2 quickstart perché abbiamo bisogno di System.import in index.html

Stavo testando la mia versione del tutorial QuickStart da Angular 2 in cui utilizzo un file js bundle. L'index.html è come questo:Angular 2 quickstart perché abbiamo bisogno di System.import in 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>

Così, quando eseguo questo, il mio messaggio Ciao mondo viene visualizzato nella schermata, ma c'è un errore nella console syntax error: unexpected token <

Dopo molte prove, mi rendo conto che se rimuovo la seguente riga dal file index.html, tutto funziona e non viene visualizzato alcun messaggio di errore. System.import('app').catch(function(err){ console.error(err); });

Quindi ... ho pensato che questa linea fosse il punto di ingresso per l'applicazione, il file principale con il bootstrap, ma a quanto pare non è necessario. Mi sto perdendo qualcosa?

Grazie.

UPDATE

Questo sono 2 screenshot del risultato con e senza la System.import In entrambi i casi sembra che sta funzionando, senza errori quando System.import non è nel index.html e con errori altrimenti. Inoltre, quando System.import è nell'indice, sembra che stia cercando di caricare il modulo dell'app e in qualche modo sta dando un errore. Non riesco davvero a capire perché succede.

Inoltre, i miei systemjs.config.js riguardanti app:

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

ho creato il bundle in Gulp utilizzando 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); 
    }) 
})

fonte

2016-07-07 David

'System.import' * è * il punto di ingresso. Il fatto che cerchi di risolvere il modulo 'app' dal percorso' .../app' e carichi html da lì suggerisce che 'app' non è stata definita correttamente in' systemjs.config.js'. – estus

Ho aggiornato la mia domanda con parte del mio system.config.js. La struttura nella mia cartella di distribuzione è ./web/app per il mio bundle.app.js e index.html in/web. – David

Quindi si suppone di caricare 'app/main.js', quindi non è chiaro il motivo per cui carica solo' app'. Il tutto è instabile e le versioni dei pacchetti sono importanti. Un plunker [MCVE] (http://stackoverflow.com/help/mcve) potrebbe aiutare a risolvere questo problema. Vedo che hai aggiornato index.html con codice reale. Questo spiega perché funziona senza 'System.import'. Se hai uno script in bundle, non hai bisogno di 'System.import'. È l'uno o l'altro. – estus

Si ha bisogno della System.import per avviare ed eseguire l'applicazione.

Non può funzionare senza di esso e, in tal caso, è possibile che nel browser sia disponibile una versione con pagamento.

L'errore:

syntax error: unexpected token <

di solito è un'indicazione che alcuni dei file di script non ha ottenuto caricato correttamente, o si dispone di un errore che impediva la vostra applicazione compilata file JS vengano caricati.

Senza ulteriori informazioni sul tuo errore e sull'output nella console, è difficile dire quale sia esattamente il problema.

fonte

2016-07-07 14:11:32

grazie, @Boyan. Ho provato a pulire la memoria cache nel mio browser e ho anche provato altri browser, ma funziona senza System.import (??). Ho aggiornato la mia domanda per fornire maggiori informazioni nel caso in cui aiuta. – David

Vedo ora. Come suggerito da @estus, non è necessario il file system.import e il file bundle.js. Il raggruppamento è utilizzato per combinare tutti gli script e servire tutto da un singolo script. Questo di solito viene fatto quando stai servendo l'app in produzione. Usare System.Import è il modo consigliato per farlo mentre si sta sviluppando. –

Piuttosto che:

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

sulla mia esperienza personale, credo che sia meglio usare:

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

fonte

2017-05-10 08:52:39 AntonioG

Angular 2 quickstart perché abbiamo bisogno di System.import in index.html

risposta

Problemi correlati