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

Question

安装后https://github.com/halt-hammerzeit/libphonenumber-js使用 npm 并更新我的 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中，我被困住了

Cannot find module 'libphonenumber-js'

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

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

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);