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

В этом я перенес свой машинописный текст в другой каталог с опцией outDir в tsconfig.js и сослался на это в пакетах, использующих main: '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"
  }
}

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


angular tsc systemjs
person would_like_to_be_anon    schedule 27.09.2016    source источник
comment
Посмотрите на вкладку сети в вашем браузере, так как я подозреваю, что файл не загружен.   -  person WiredPrairie    schedule 27.09.2016
comment
Я вижу, как загружается build.js. Он имеет код возврата 200, и я также вижу исходный код build.js.   -  person would_like_to_be_anon    schedule 28.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Когда вы транспилируете в один файл, он создает файл в специальном формате, называемом «пакет». Когда вы его импортируете, все модули в нем загружаются и регистрируются в 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 в пакете. Таким образом, ничто в этом коде не относится к пакету angular-boot или app, как это определено в systemjs.config.js, поэтому в этом файле ничего менять не нужно.

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

person artem    schedule 28.09.2016