How to add dependencies to angularJS project without NPM

Question

I've inherited an angularjs project and am trying to understand how it's structured and ultimately am trying to add dependencies to it manually. The project structure is below.

It seems like it was created without NPM (notice no package.json files - is my understanding correct about this?). The angular components (ie. our custom code) are in the components folder. The assets has external dependencies, eg. PDFViewer, JWT and other dependencies. Does this mean it's likely the assets were manually copied over, instead of managed by a tool?

Ultimately I want to add a new dependency to the project, specifically this ImageViewer library. Without NPM, I'm clueless about how to do this. Can I add npm to a pre-existing project like this or not? If not, the directions show this alternative.

Does this mean I don't have to manually put anything in the assets folder? I just put these references in app.js and it should pick them up? And then I obviously have to define ImageViewer somewhere in angular module or something to bring it into the project. Or am I completely wrong about all this? I don't know anything on how to manage JS dependencies w/o NPM so any recommendations here are super welcomed!

Gareth Oates · Accepted Answer · 2020-09-09 14:11:53Z

1

I would recommend using npm to manage your dependencies where possible as this will make your life easier when it comes to upgrading versions etc.

You can just copy and paste the js files into the assets folder and reference them in your index.html file by using a script tag though, if you want to go that route. This will make the exported object available globally within your application (which may or may not be what you want).

The snippet you've posted above has the script source pointing to an external url, so you don't have to copy and paste anything locally, however your application then has an external dependency on that URL being up and available when your application runs, so that is something to keep in mind as well.

I would recommend trying to go over to using npm to manage your dependencies. It is absolutely possible to just run npm init in the project and to start adding dependencies this way as well. Both approaches can work side by side.

answered Sep 9, 2020 at 14:11

Gareth Oates

3974 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Hughes Over a year ago

Ok thanks I"ll try np init thanks. Ya we inherited a lot of projects like this and didn't want to break the convention but if they work side-by-side, then great.

Adam Hughes Over a year ago

I need to upgrade an existing dependency. Do you think I should delete it and use NPM to bring it back in as well?

Gareth Oates Over a year ago

That's what I would do, yeah. (Assuming you have some sort of bundler with the angular app which takes care of resolving the npm dependencies)

Collectives™ on Stack Overflow

How to add dependencies to angularJS project without NPM

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related