web-dev-qa-db-fra.com

Angular 2 quickstart pourquoi avons-nous besoin de System.import dans index.html

Je testais ma version du didacticiel de démarrage rapide à partir de Angular 2, où j'utilise un fichier js bundle. Le fichier index.html ressemble à ceci:

<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>

Donc, quand j'exécute ceci, mon message Hello world est affiché à l'écran, mais il y a une erreur dans la console syntax error: unexpected token <

Après de nombreux tests, je me rends compte que si je supprime la ligne suivante du fichier index.html, tout fonctionne et qu'aucun message d'erreur ne s'affiche .System.import('app').catch(function(err){ console.error(err); });

Alors ... Je pensais que cette ligne était le point d'entrée de l'application, le fichier principal avec le bootstrap, mais apparemment ce n'est pas nécessaire. Est-ce que je manque quelque chose?

Merci.

METTRE &AGRAVE; JOUR

Ce sont 2 captures d'écran du résultat avec et sans System.import Dans les deux cas, il semble que cela fonctionne, sans erreur lorsque System.import ne figure pas dans index.html et avec des erreurs dans le cas contraire. En outre, lorsque System.import figure dans l'index, il semble que le programme tente de charger le module d'application et génère une erreur. Je ne peux pas vraiment comprendre pourquoi cela se produit.

 enter image description here  enter image description here

En outre, mon systemjs.config.js concernant l'application:

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

J'ai créé le paquet dans Gulp en utilisant 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);
  })
})
angularsystemjs
8
David

Vous avez besoin du System.import pour démarrer et exécuter votre application. 

Il ne peut pas fonctionner sans, et si c'est le cas, vous pourriez avoir une version encaissée dans votre navigateur. 

L'erreur: 

syntax error: unexpected token <

indique généralement que certains fichiers de script n'ont pas été chargés correctement ou qu'une erreur empêche le chargement des fichiers JS compilés par votre application.

Sans plus d'informations sur votre erreur et la sortie dans la console, il est difficile de dire quel est exactement le problème.

3
Ben Richards

Plutôt que:

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

Sur mon expérience personnelle, je pense qu'il est préférable d'utiliser:

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