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

Question

我是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. 如果是,那么如何将地图和包添加到此文件中

   map ['ng2-datetime-picker'] ='node_modules/ng2-datetime-picker/dist'; packages ['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/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>

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

Answer 1

您需要创建一个"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'
 }

编辑

这应该工作:

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