[解決済み】angularJS2プロジェクトでsystemjs.config.jsファイルをどこに置くか/見つけるか？

質問

私はangular 2の初心者で、私のプロジェクトでng2-datetime-pickerを使おうとしています。ng2-datetime-pickerパッケージをインストールした後、プロジェクトを実行すると、次のようなメッセージが表示されます。 ng2-datetime-pickerが見つからないという404のエラーが発生しました。 しかし、私のプロジェクトを見てみると、systemjs.config.js ファイルが見当たりません。

1. systemjs.config.js ファイルはどこに存在するのでしょうか？

2. 以下のコードは、systemjs.config.js ファイルを意味するのでしょうか？

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

3. もしそうなら、このファイルにmapとpackagesを追加するにはどうしたらいいでしょうか？

   map['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/[email protected]?main=browser"></script>
    <script src="https://unpkg.com/[email protected]/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 ファイルに参照を追加すると、このようなエラーが発生します。

解決方法は？

通常のスクリプトのように、"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 ファイルで、node パッケージを 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'
      ...
}

index.jsはrequire構文を使っているので、以下はCommonJS/AMD/SystemJSでのみ動作します。

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