Где разместить / найти systemjs.конфиг.файл js в проекте angularJS2?

Я новичок в angular 2 и пытаюсь использовать ng2-datetime-picker в своем проекте. Теперь после установки пакета ng2-datetime-picker при запуске проекта получил 404 ошибка с указанием ng2-datetime-picker не найден, пройдя через некоторые блоги, я узнал, что мне нужно добавить конфигурацию в systemjs.конфиг.JS-файл, но когда я прошел через свой проект, я не вижу никаких systemjs.конфиг.файл JS в моем проекте. Итак, мой вопрос:

  1. где делает systemjs.конфиг.файл js существует?

  2. это код ниже, предназначенный для systemjs.конфиг.файл JS

9
angular

2 ответов

вам нужно создать " systemjs.конфиг.JS-файла" и загрузить его из индекса.html, как обычный скрипт:

 <script src="systemjs.config.js"></script>

убедитесь, что вы также включить систему.JS перед конфигурационным скриптом:

<script src="node_modules/systemjs/dist/system.src.js"></script>

следующий скрипт загружает первый модуль:

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

по умолчанию (в соответствии с вашей systemjs.конфиг.js), SystemJS будет искать приложение.js или app / main.js.

в вашем systemjs.конфиг.файл JS, нужно сопоставить пакет узла в путь есть указатель.JS или пакет.JSON, который указывает, где находится модуль. Модуль должен быть совместим с вашим загрузчиком модулей, который вы собираетесь использовать: AMD, UMD, CommonJS, SystemJS, es6 и т. д.

в вашем systemjs должно работать следующее.конфиг.файл js:

'paths': {
    'npm:':'node_modules/'
},

'map': {
     'ng2-datetime-picker': 'npm:ng2-datetime-picker'
      ...
},
'packages':  {
     'ng2-datetime-picker': 'dist/ng2-datetime-picker.umd.js'
 }

или вы можете напрямую отобразить файл UMD:

'paths': {
    'npm:':'node_modules/'
},

'map': {
     'ng2-datetime-picker': 'npm:ng2-datetime-picker/dist/ng2-datetime-picker.umd.js'
      ...
}

следующее будет работать только с CommonJS/AMD / SystemJS в качестве индекса.js использует 'require' синтаксис:

'paths': {
    'npm:':'node_modules/'
 },

'map': {
     'ng2-datetime-picker': 'npm:ng2-datetime-picker'
      ...
},
'packages':  {
     'ng2-datetime-picker': 'dist/index.js'
 }

редактировать

это должно работать:

    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: { main: 'boot.js', defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
        'ng2-datetime-picker': { main: 'dist/ng2-datetime-picker.umd.js', defaultExtension: 'js' }
    }
8

для тех, кто ищет systemjs.config.js содержание. Это будет что-то похожее на это, вы можете настроить его согласно вашим требованиям. 

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        '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: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

и ваш индекс.html будет выглядеть так: (позаботьтесь о порядке .файл JS)

<head>
    <meta charset="UTF-8">
    <title>My Angular 2 App!</title>

    <!-- css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
    <style>body { padding: 50px 0; }</style>

    <!-- js -->
    <!-- load the dependencies -->
    <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>

    <!-- load our angular app with systemjs -->
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) { console.error(err); });
    </script>
</head>
1