在angularJS2项目中的哪里放置/找到systemjs.config.js文件? [英] Where to place/find the systemjs.config.js file in an angularJS2 project?

问题描述

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

I am new to angular 2 and trying to use the ng2-datetime-picker in my project. Now after installing the ng2-datetime-picker package when I run the project got an 404 error stating ng2-datetime-picker not found, after going through some blogs I came to know that I had to add the configuration in the systemjs.config.js file but when I went through my project I cannot see any systemjs.config.js file in my project. so my question is,

1. systemjs.config.js文件在哪里?

2. 下面的代码是否意味着是systemjs.config.js文件

1. where does the systemjs.config.js file exist?

2. Is the below code meant to be the systemjs.config.js file

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

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

如果是的话，如何将地图和程序包添加到该文件中

If it is, then how can I add map and packages to this file

map ['ng2-datetime-picker'] ='node_modules/ng2-datetime-picker/dist'; package ['ng2-datetime-picker'] = {main:'ng2-datetime-picker.umd.js'，defaultExtension:'js'} 更新1

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

This is my systemjs.config.js file

(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文件中添加的引用是

and the added reference in the index.js file is

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

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

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加载该文件:

You need to create a "systemjs.config.js" file and load it from index.html, like a regular script:

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

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

Make sure you also include System.JS before the config script:

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

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

The following script loads the first module:

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

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

By default (according to your systemjs.config.js), SystemJS will look for app.js or app/main.js.

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

In your systemjs.config.js file, you want to map the node package to a path where there is an index.js or package.json, which indicates where the module is located. The module should be compatible with your module loader that you intend to use: AMD, UMD, CommonJS, SystemJS, es6 etc

以下内容应在您的systemjs.config.js文件中起作用:

The following should work in your systemjs.config.js file:

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

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

或者，您可以直接映射UMD文件:

Or, you could map the UMD file directly:

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

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

以下内容仅适用于CommonJS/AMD/SystemJS，因为index.js使用'require'语法:

The following will only work with CommonJS/AMD/SystemJS as index.js uses the 'require' syntax:

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

这篇关于在angularJS2项目中的哪里放置/找到systemjs.config.js文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！