.NET Angular using RequireJS - asp.net

Question

I created a new ASP.NET Empty Web Application in Visual Studios 2013. I have an angular project with the following directory structure:
├───TestProject
│ ├───index.html
│ ├───package.json
│ ├───Web.config
│ ├───app
│ │ ├───app.module.js
│ │ ├───main.js
│ ├───bin
│ ├───node_modules
│ │ ├───google-distance
│ │ │ └───test
│ │ ├───json-stringify-safe
│ │ │ └───test
│ │ ├───qs
│ │ ├───request
│ │ │ └───lib
│ ├───obj
│ │ └───Debug
│ │ └───TempPE
│ ├───Properties
│ └───Scripts
└───packages
├───angularjs.1.6.1
│ └───content
│ └───Scripts
│ └───i18n
│ └───ngLocale
├───AngularJS.Core.1.6.1
│ └───content
│ └───Scripts
└───RequireJS.2.3.2
└───content
└───Scripts
Here's what my packages.json looks like:
{
"name": "google-distance",
"version": "1.0.1",
"main": "index",
"description": "A simple node.js wrapper for Google's Distance Matrix API",
"author": {
"name": "Edward Look",
"email": "edwlook#gmail.com",
"url": "http://edwardlook.com"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/edwlook/node-google-distance.git"
},
"keywords": [
"google",
"maps",
"distance",
"matrix",
"api"
],
"dependencies": {
"google-distance": "~1.0.1"
}
}
I ran npm install and it created the node_modules folder. At the top of my main.js file I have:
var distance = require('../node_modules/google-distance/index.js');
But every time I load the page the console says:
require.js:168 Uncaught Error: Module name "../node_modules/google-distance/index.js" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:168)
at Object.localRequire [as require] (require.js:1433)
at requirejs (require.js:1794)
at main.js:2
What am I doing wrong? How do I use the google-distance module?

Answer 1

Normally you should require it as follows;
var distance = require('google-distance');
The way node will look for modules is as follows;
It will perform a hierarchical directory search for "node_modules" and "google-distance" in the following ways:
./node_modules/google-distance.js
./node_modules/google-distance/index.js
./node_modules/google-distance/package.json
Also, it looks like you should use the asynchronous callback version of require to load this library.
require(['google-distance'], function (distance) {
//package is now loaded.
});
From the require FAQ:
MODULE NAME ... HAS NOT BEEN LOADED YET FOR CONTEXT: ... This occurs
when there is a require('name') call, but the 'name' module has not
been loaded yet. If the error message includes Use require([]), then
it was a top-level require call (not a require call inside a define()
call) that should be using the async, callback version of require to
load the code.
http://requirejs.org/docs/errors.html#notloaded