6

I am trying to use a third party module which is available as a node module in my angular application. I have just started using angular and I am yet to fully understand the modular behavior. I am importing the angular modules (router etc) through script tags and injecting them in my main app module but I do not know how to inject the node modules.

Google has got me even more confused with words such as CommonJS, AMD etc. as I am just starting to learn about modular approach. Can someone guide me on how to inject node modules inside my app module?

I am using AngularJS v1.6.4. I have the option to use browserify and webpack. I have them both.

2
  • You first need to clarify your question by saying if you're using AngularJS (1.x), or Angular (2.x or more), and by telling us how you build your app.
    – JB Nizet
    Commented Oct 20, 2017 at 9:02
  • @JB Nizet I added that detail Commented Oct 20, 2017 at 9:04

1 Answer 1

8

After you have installed the module with npm you have to include it with the script tag. Like so

<script src="node_modules/angular-messages/angular-messages.min.js"></script>

(I use angular-messages as an example)

This is typically done in index.html, together with all the other script tags. The path has to be correct of course. It will be from the server point-of-view and Developer Tools will tell you if it can't find the file. You have to inspect the module folder and/or read the module's readme to find what file to use. The actual code you want for most modules is a single .js file.

You can also shorten the path. If you use express it would be done like this

app.use('/angular-messages', express.static(path.join(__dirname, 'node_modules/angular-messages')));

and the script tag would change to

<script src="angular-messages/angular-messages.min.js"></script>

because express is set up to route angular-messages to node_modules/angular-messages.

To get the module working in AngularJS you have to add it as a dependency to the app. For example:

angular.module('myapp', ['ngRoute', 'ngMessages']).config(config).run(setupAuth)

The readme of the module will tell you the name of the module. In this case it was named ngMessages so that was added as a dependency. This is typically done in the file where you bootstrap the AngularJS application (app.js or something similar). You can read about how the module function works here. The second parameter is usually an array containing the dependency names.

It should be noted that only AngularJS modules are added to this array. If you have a module that is not an AngularJS module, for instance validator.js, you have to find some other way to use it. When a script is included in a script tag

<script src="node_modules/validator/validator.min.js"></script>

its code will be available in the global window object. To access window in AngularJS you can use the $window service. For instance:

let isItAlpha = $window.validator.isAlpha('test123'));

The file validator.min.js gives access to an object called validator, which contains a function called isAlpha. I could access it by going through $window, because the window object contained the code read from validator.min.js. This might not be the purest way of using non-AngularJS modules, but it works. Many non-AngularJS modules will also have AngularJS wrappers as separate modules. You could try finding the AngularJS version before trying to use the main version.

I would get it to work this way before using browserify and webpack and all that.

4
  • Is your answer only for Node modules built to be AngularJS modules, or for any Node modules? Commented Jun 28, 2019 at 17:50
  • @ThomasDavidKehoe, it doesn't have to be a AngularJS-specific module. For example, the validator.js script I use in the answer looks like this (non-minified), and is not an AngularJS module. Code that is specific for Node will generally not work, because some of the syntax (require, etc.) is not supported in the browser. The validator.js library will work both places, because it's written in a generic way. Commented Jul 1, 2019 at 20:26
  • Thanks for this solution. Not the purest way like you said. But on some legacy projects it does the trick.
    – Valentin P
    Commented Dec 24, 2020 at 16:17
  • validator is working because that library has a validator.js file with pure javascript code but what if the library is completely TypeScript based. In that case, how will you import it into the AngularJs controller?
    – Luffy
    Commented Jul 13, 2021 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.