如何使用 systemJS 在我的 angular2 應用程序中包含 libphonenumber-js？

Question

使用 npm 安裝https://github.com/halt-hammerzeit/libphonenumber-js並更新我的 systemjs.config.ts 以包含后

map:{
    ...
    'libphonenumber-js': 'node_modules/libphonenumber-js'
},
packages: {
    ...
    'libphonenumber-js': {
        main: './custom.es6.js',
        defaultExtension: 'js'
    }
},

並試圖使用

import { parse, format, asYouType } from 'libphonenumber-js';

在我的@Directive 中，我被困住了

找不到模塊“libphonenumber-js”

我到底應該如何將這個庫連接到我的應用程序中？

編輯：
目錄布局：
網站名稱
網站名稱/index.html
網站名稱/節點模塊
網站名稱/node_modules/libphonenumber-js
網站名稱/應用程序
網站名稱/應用程序/systemjs.config.ts

Index.html 包含：

<script src="/app/systemjs.config.js"></script>
<script>
    System.import('app').catch(function (err) { console.error(err); });
</script>

systemjs.config.ts 包含：

declare var System: any;
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(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: 'app',
            // other references
            'libphonenumber-js': 'npm:libphonenumber-js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            // other references
            'libphonenumber-js': {
                main: './bundle/libphonenumber-js.min.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

Answer 1

您的包配置不正確。 它需要指向libphonenumber-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: 'app',
            // other references
            'libphonenumber-js': 'npm:libphonenumber-js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            // other references
            'libphonenumber-js': {
                main: 'libphonenumber-js.min',
                defaultExtension: 'js'
            }
        }
    });
})(this);