.NET Angular using RequireJS

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