CODEWITHSUNDEEP
javascriptangularsystemjslibphonenumber
StuperUser
StuperUser

Reputation: 10850

How do I include libphonenumber-js in my angular2 app using systemJS?

After installing https://github.com/halt-hammerzeit/libphonenumber-js using npm and updating my systemjs.config.ts to include

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

and attempting to use

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

in my @Directive, I'm stuck with

Cannot find module 'libphonenumber-js'

How on earth am I supposed to wire this library into my app?

EDIT:
Directory layout:
websiteName
websiteName/index.html
websiteName/node_modules
websiteName/node_modules/libphonenumber-js
websiteName/app
websiteName/app/systemjs.config.ts

Index.html contains:

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

systemjs.config.ts contains:

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

Upvotes: 1

Views: 2172

Answers (1)

Teddy Sterne
Teddy Sterne

Reputation: 14219

Your package configuration is incorrect. It needs to point at the source file for libphonenumber-js. Need to update the references to match your project structure.

Try this:

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

Upvotes: 1

Related Questions