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

使用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'


我到底应该如何将此库连接到我的应用程序中？

编辑：
目录布局：
网站名称
websiteName / index.html
websiteName / node_modules
websiteName / node_modules / libphonenumber-js
网站名称/应用
websiteName / app / 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);

最佳答案

您的软件包配置不正确。它需要指向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);