在angularJS2项目中的何处放置/查找systemjs.config.js文件？

我是angular 2的新手，尝试在我的项目中使用ng2日期时间选择器。现在，在我运行项目时安装了ng2 datetime picker包之后，出现了一个404错误，说明找不到ng2 datetime picker，在浏览了一些博客之后，我知道我必须在systemjs.config.js文件中添加配置，但是当我浏览我的项目时，我在项目中看不到任何systemjs.config.js文件。所以我的问题是,

systemjs.config.js文件存在于何处

下面的代码是systemjs.config.js文件吗

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app : 'ScriptsApp', // 'dist',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-datetime-picker': 'npm:ng2-datetime-picker'
        },
        // 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: 'ng2-datetime-picker.umd.js', defaultExtension: 'js' }
        }
    });
})(this);

System.import（'app'）.catch（函数（err）{console.error（err）；}）

如果是，那么如何将地图和包添加到此文件

映射['ng2-datetime-picker']='node_modules/ng2-datetime picker/dist'； packages['ng2-datetime-picker']={main:'ng2 datetime picker.umd.js'，defaultExtension:'js'} 更新1

这是我的systemjs.config.js文件

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app : 'ScriptsApp', // 'dist',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-datetime-picker': 'npm:ng2-datetime-picker'
        },
        // 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: 'ng2-datetime-picker.umd.js', defaultExtension: 'js' }
        }
    });
})(this);

在index.js文件中添加的引用是

 <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

System.import（'app'）.catch（函数（err）{console.error（err）；}）；

这就是我在添加systemjs.config.js文件和index.html文件中的引用后遇到的错误

您需要创建一个“systemjs.config.js”文件，并从index.html加载它，就像普通脚本一样：

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

默认情况下（根据您的systemjs.config.js），systemjs将查找app.js或app/main.js

在systemjs.config.js文件中，您希望将节点包映射到存在index.js或package.json的路径，该路径指示模块的位置。该模块应与您打算使用的模块加载器兼容：AMD、UMD、CommonJS、SystemJS、es6等

以下内容应在systemjs.config.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，因为index.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' }
    }

---

对于那些正在寻找

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

您的index.html如下所示：（注意.js文件的顺序）

我的Angular 2应用程序！
正文{填充：50px 0；}
System.import（'app'）.catch（函数（err）{console.error（err）；}）；

您使用的是

angular cli

？不，我没有使用angular cli，很抱歉回复太晚。正如您所提到的，我已经在system.src.js文件旁边添加了systemjs.config.js，但是现在我收到了404错误/ScriptsApp/boot.js。我正在更新我问题中的systemjs.config.js文件，以供参考。。。谢谢，我想你没有更新你的问题。“主”路径中应该包含“dist”。您所说的主路径是什么意思？它是systemjs.config.js文件中的对象吗？在上次编辑中，我有“ng2 datetime picker”：{main:'*dist*/ng2 datetime picker.umd.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);

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