SystemJS: Laden-Build-Datei

Meine SystemJS Datei sieht wie folgt aus:SystemJS: Laden-Build-Datei

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'angular2-boot':    'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
// 'app':      { main: 'js/main.js', defaultExtension: 'js' }, 
    'app':      { main: 'dist/build.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
    ... 
    ]; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(function(pkgName) { 
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; 
    }); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this);

In dieser transpiled ich meine Typoskript in ein anderes Verzeichnis mit OutDir Option in tsconfig.js und bezeichnet in Packungen mit Haupt: ‚js/main.js 'das funktioniert gut.

Allerdings, wenn ich versuchte, in eine einzige Datei mit outFile-Option zu transpilieren und verwiesen auf diese Datei mit main: 'dist/build.js'. Die Seite wird nicht gerendert, und in der Konsole werden keine Fehler angezeigt.

Meine index.html sieht wie folgt aus:

<html> 
<head> 
    <title>Angular 2 QuickStart</title> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="app/css/styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('angular2-boot').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

Meine tsconfig.js Datei sieht wie folgt aus:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "amd", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "app/js", 
    "outFile": "app/dist/build.js" 
    } 
}

Es sagt Loading ... wenn ich die Seite zu laden. Was muss ich tun, um die einzelne ausgegebene Datei mit SystemJS zu laden?

Quelle

2016-09-27 would_like_to_be_anon

Überprüfen Sie die Registerkarte Netzwerk in Ihrem Browser, da ich vermute, dass eine Datei nicht geladen ist. – WiredPrairie

Ich sehe, wie die build.js geladen wird. Es hat 200 Rückkehrcode und ich kann auch die Quelle build.js sehen. –

Wenn Sie in eine einzelne Datei umwandeln, wird eine Datei in einem speziellen Format namens "Bundle" erstellt. Wenn Sie es importieren, werden alle Module in SystemJS geladen und registriert, aber nichts wird ausgeführt. So, nachdem das Bündel beladen ist, benötigen Sie einen zweiten Import in index.html hinzuzufügen, die tatsächlich Ihre Anwendung starten, wie folgen aus:

System.import('app/dist/build.js').then(function() { 
     System.import('main'); 
    }) 
    .catch(function(err){ console.error(err); });

Dieser Code verwenden expliziten Pfad ein Bündel zu laden: app/dist/build.js und lädt dann eine Modul mit dem Namen main, weil dieser Name genau mit dem Modulnamen übereinstimmen muss, wie er in Aufruf im Bündel angegeben wird. Also, nichts in diesem Code bezieht sich auf das angular-boot oder app Paket, wie es in systemjs.config.js definiert ist, so dass nichts in dieser Datei geändert werden muss.

Es ist auch möglich, ein Bündel mit gewöhnlichen <script> Tag zu laden, dann brauchen Sie nur einzelne System.import('main') danach.

Quelle

2016-09-28 06:45:27 artem

SystemJS: Laden-Build-Datei

Antwort

Verwandte Themen