20

I was wondering what would be the best practice to share common libraries and own modules between multiple angularJS projects.

Let's assume that I'm working on two different projects. Both rely on libraries like angularJS, bootstrap etc.

I have a file structure like below:

  • Project 1
    • index.html
    • css
    • js
      • module A
      • module B
    • lib
      • angular
      • bootstrap
  • Project 2
    • index.html
    • css
    • js
      • module B
      • module X
    • lib
      • angular
      • bootstrap

So I was thinking about just creating another directory with all the shared components so that I get sth. like:

  • Shared
    • angular
    • bootstrap
    • module B
  • Project 1
    • index.html
    • css
    • js
      • module A
  • Project 2
    • index.html
    • css
    • js
      • module X

I have module B written like:

angular.module("moduleB", [])
    .service("SB", [function () {/*functionality here*/}]);
    .factory("FB", [function () {/*functionality here*/}]);

and would then include it in my Project 1/2 as dependency like:

angular.module("project1", ["moduleB"]);

to achieve this approach.

Would that be the best way? What could be an alternative?

Improve this question
1

4 Answers 4

Reset to default
17

You can do it that way, but it may give you headaches if you ever want Project 1 and Project 2 to use two different versions of the Shared components. Imagine that you need to release Project 1 with the latest shared components, but Project 2 still relies on a previous version of the shared components. What a mess. Some other options:

  1. Make the shared components Bower components that could be included into either project as dependencies (see http://briantford.com/blog/angular-bower)
  2. Compile all shared assets into a mutually accessible URL (see https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85)
  3. Basically copy/paste components between projects, either manually or using something like gulp (see https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ)

The second option has a lot of moving parts and requires changes to your applications, not to mention the inability to deploy different versions of the shared code in each project. The first has the benefit of being easy to slice into 3 repositories: Project 1, Project 2, and Shared. If Shared is a Bower dependency in Project 1 and Project 2, a simple bower update will get you the latest version in either project. Or you can lock a project to particular versions of Shared.

Option 3 seems like it gives you the most control, but you will quickly lose track of which version of Shared your project is using. Option 1 solves that.

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

2 Comments

Lets assume that I need the shared components in both, project 1 and 2 always up to date as they really rely on the same code base. What would be the best to chose in this case?
Option 1 is still probably the best practice, but I appreciate how it adds steps that could be forgotten, resulting in out-of-sync code. You could put your entire structure above (both Projects and Shared) into a single repository. I don't know how you're deploying, but I'm assuming that each Project is the root of a website. You can use gulp to 1) copy the Shared assets into a Project and/or to 2) compile (i.e., concat and minify in the case of JS) the Shared assets into the Project. Basically, gulp.src(SHARED_STUFF) ... DO_GULP_STUFF ... pipe(gulp.dest(PROJECT_DESTINATION)).
7

Another potential option is to publish your shared code as npm modules. If the code is private then you can use npm Private Modules for that, although there is a cost for using private modules.

With either this or the Bower approach described in d.jamison's answer try to break your modules into smaller modules based on their specific purposes, rather than having big monolithic "AllOurSharedCode" modules.

The benefit of that is that if you find a bug, or make an improvement, you can see more easily exactly which of your projects may be affected. The require or ES2015 import syntax help a lot with that too as you will be saying e.g. import { calculateLineTotal } from OrderLogic.js, so it is then trivial to find all of the places in code that a change to the calculateLineTotal would impact.

Improve this answer

Comments

3

Or just do...

"dependencies" : {
  "shared-code" : "git://github.com/user/shared-code.git",
}
Improve this answer

1 Comment

Can you explain how that would be used in the projects?
0

Another way is to create a new https://lerna.js.org/ repository for common modules then publish them to a private repo to use in your other projects.

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.