在 angularJS2 项目中哪里放置/找到 systemjs.config.js 文件？

我是 Angular 2 的新手，并尝试在我的项目中使用 ng2-datetime-picker。现在，在安装 ng2-datetime-picker 包后，当我运行该项目时，得到了404 错误指出未找到 ng2-datetime-picker，在浏览了一些博客之后，我发现我必须在 systemjs.config.js 文件中添加配置，但是当我浏览我的项目时，我在项目中看不到任何 systemjs.config.js 文件。所以我的问题是

1. systemjs.config.js 文件存在于哪里？

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

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

3. 如果是，那么如何将地图和包添加到该文件中

   地图[‘ng2-datetime-picker’] =‘node_modules/ng2-datetime-picker/dist’; 包['ng2-datetime-picker'] = { main: 'ng2-datetime-picker.umd.js', defaultExtension: 'js' }update 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/[email protected] /cdn-cgi/l/email-protection?main=browser"></script>
    <script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/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>

this is the error i am getting after adding the systemjs.config.js file and the refrence in the index.html file

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

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

确保在配置脚本之前还包含 System.JS：

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

以下脚本加载第一个模块：

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

默认情况下（根据您的 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'
 }

EDIT

这应该有效：

    // 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' }
    }