SystemJS: загрузка файла сборки

Мой SystemJS файл выглядит следующим образом:SystemJS: загрузка файла сборки

(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);

В этом я transpiled мой машинописный в другой каталог с опцией OUTDIR в tsconfig.js и упоминается, что в пакетах с использованием основной: «JS/main.js ', который отлично работает.

Однако, когда я попытался перевести в один файл с помощью опции outFile и ссылался на этот файл, используя main: 'dist/build.js'. Он не отображает страницу, и я не вижу никаких ошибок в консоли.

Мой index.html выглядит следующим образом:

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

Мой файл tsconfig.js выглядит следующим образом:

{ 
    "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" 
    } 
}

Это говорит Loading ... когда я загрузить страницу. Что мне нужно сделать дальше, чтобы загрузить один файл с расширением вывода с помощью SystemJS?

источник

2016-09-27 would_like_to_be_anon

Посмотрите на вкладку сети в своем браузере, поскольку я подозреваю, что файл не загружен. – WiredPrairie

Я вижу, как build.js загружается. Он имеет код возврата 200, и я также могу увидеть источник build.js. –

При пересылке в один файл он создает файл в специальном формате «bundle». Когда вы импортируете его, все модули в нем загружаются и регистрируются в SystemJS, но ничего не выполняется. Таким образом, после того, как пакет будет загружен, вам нужно добавить второй импорт в index.html, что будет на самом деле запустить приложение, например:

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

Этот код использует явный путь для загрузки пакет: app/dist/build.js, а затем загружает модуль с именем main, потому что это имя должно совпадать точно с именем модуля, как указано в define, вызов в комплекте. Таким образом, ничто в этом коде не относится к пакету или app, как определено в systemjs.config.js, поэтому в этом файле ничего не нужно изменять.

Также можно загрузить комплект с обычным тегом <script>, после чего вам понадобится только один System.import('main').

источник

2016-09-28 06:45:27 artem

SystemJS: загрузка файла сборки

ответ

Смежные вопросы