How to host the google libphonenumber locally?

Question

During development on my localhost, I am trying to self host the libphonenumber library. I am trying with the following:

<script src="//closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>goog.require('goog.proto2.Message');</script>
<script src="scripts/vendor/pn/phonemetadata.pb.js"></script>
<script src="scripts/vendor/pn/phonenumber.pb.js"></script>
<script src="scripts/vendor/pn/metadata.js"></script>
<script src="scripts/vendor/pn/phonenumberutil.js"></script>
<script src="scripts/vendor/pn/asyoutypeformatter.js"></script>

This is working, but I still have a dependency to an externally hosted component: the closure library. I have tried using closure-lite, which is (apparently, I am new here) a quite complete version of the closure library, available for self-hosting. I have tried doing the following:

<script src="scripts/vendor/closure-lite.js"></script>
<script>goog.require('goog.proto2.Message');</script>
<script src="scripts/vendor/pn/phonemetadata.pb.js"></script>
<script src="scripts/vendor/pn/phonenumber.pb.js"></script>
<script src="scripts/vendor/pn/metadata.js"></script>
<script src="scripts/vendor/pn/phonenumberutil.js"></script>
<script src="scripts/vendor/pn/asyoutypeformatter.js"></script>

But the goog.proto2.Message is not available. I am getting the following errors:

Uncaught TypeError: Cannot read property 'Message' of undefined

The error comes from the phonemetadata.pb.js script:

goog.inherits(i18n.phonenumbers.NumberFormat, goog.proto2.Message);

What can I do to completely self-host the libphonenumber?

Answer 1

You may have solved this already, but I found a really easy way to compile all the libphonenumber code into one file that includes closure library stuff.

Go to http://closure-compiler.appspot.com/home

This is Google's online version of the closure compiler.

Then input something like:

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name libphonenumber.js
// @use_closure_library true
// @code_url https://raw.githubusercontent.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/phonemetadata.pb.js
// @code_url https://raw.githubusercontent.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/phonenumber.pb.js
// @code_url https://raw.githubusercontent.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/metadata.js
// @code_url https://raw.githubusercontent.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/phonenumberutil.js
// @code_url https://raw.githubusercontent.com/googlei18n/libphonenumber/master/javascript/i18n/phonenumbers/asyoutypeformatter.js
// @formatting pretty_print
// ==/ClosureCompiler==

You can add or delete any extra files you want.

Then click Compile.

This will retrieve each of the latest files from the repository and build it into a single javascript file.

Now you don't need to worry about handling all the closure library code, as what you will need has already been compiled in.

Hope this helps.

Edit: I find that this is really useful for handling updates to the library as well. If you just rerun this in the compiler, you will get your new javascript file with all the latest updates.

Answer 2

Since google moved their code to github the process has changed, if only a little bit:

1) go to http://closure-compiler.appspot.com/home

2) insert the following

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name libphonenumber.js
// @use_closure_library true
// @code_url https://github.com/googlei18n/libphonenumber/raw/master/javascript/i18n/phonenumbers/phonemetadata.pb.js
// @code_url https://github.com/googlei18n/libphonenumber/raw/master/javascript/i18n/phonenumbers/phonenumber.pb.js
// @code_url https://github.com/googlei18n/libphonenumber/raw/master/javascript/i18n/phonenumbers/metadata.js
// @code_url https://github.com/googlei18n/libphonenumber/raw/master/javascript/i18n/phonenumbers/phonenumberutil.js
// @code_url https://github.com/googlei18n/libphonenumber/raw/master/javascript/i18n/phonenumbers/asyoutypeformatter.js
// @formatting pretty_print
// ==/ClosureCompiler==

3) Click Compile

4) Done: The current compiled libphonenumber.js file should appear in the RHS panel

Answer 3

May I suggest you check out this vanilla javascript port of the library: https://github.com/halt-hammerzeit/libphonenumber-js/

It lightweight and can be bundled with Webpack and stuff