How to use Git Subtree to share code between Angular projects

Share on facebook
Share on google
Share on twitter
Share on linkedin

This video covers how to use Git subtree to share code between Angular projects.
Git subtree contains utilities to sync a part of a repository (subtree) ensuring that each client decides themselves when they want to sync changes with the upstream.

Thank you for watching.

I’m going to do another post soon on using Mono repos with Angular.

Subscribe so you don’t miss it:



hello this is Christian Lüdemann and
today’s video is about how you can share

angular code easily using git subtree
the way I started looking into this was

I needed some way to share code easily
between some angular projects and the

problem is that conventionally you
either do npm packages or you do mono repo

or you just copy paste code or use git sub modules and all these

have some drawbacks if you take the npm packages the problem is

that it’s it’s a lot of overhead to
managing all the semantic versioning and

if you take the monorepo the problem is that you need

a lot of CI tooling to get that working
and do all the regression testing when

you share it change the shared parts so
what I found out was that if you use git

subtree you’re gonna have a very easy
set up that doesn’t require if you

change anything on your CI server and it
will just work like a normal git

repository herewe want to create some
shared folder here where we’re gonna put

some code for me wants to share between
all our angular projects and then we later

gonna use get subtree to synchronize
this shared code with the shared

repository so we’re gonna create this is
gonna be called

and what we want to do is we want to
look at this shared hope we already have

and we want to move that into the shared
lib here so all our projects can use it as

well and of course we’re gonna
only take the generic solution that our

parties can benefit from to the spinning
em would be a generic component that

could benefit from so let’s move that
over just move it to shared and it’s

probably on I need to fix some


this is as you know and lets us ensure
that it’s working here we had spinach

it’s pretty good

what we see here is the different gets
up free commands you can use we have the

pull then is for updating the get shared
library inside here and had the push

that is gonna update the upstream and
what the push is doing it is gonna do a

split first that is it’s gonna take all
these changes here by going through the

get history and it’s gonna move all
those changes it detects to a separate

branch which prevents name here which is
gonna called split and we’re gonna

rejoin this massive ends here with this
command so ensure that next time we do

this it doesn’t need to iterate through
the whole get history again so it’s

gonna make it faster for future runs and
then we gonna squash because the only we

don’t want to kata are versioning with
too many comets and after that we kind

of push it to the master so let’s see

husband in 4:35 commits and it’s gonna
move all the changes of this folder to a

branch called split now we have a brain
SIA called split let’s check that one


see we have it’s been added here and we
want to push this one over so this one

here so we can just go back to master
and we just to this command here

and I look here we see that they haven’t
spin in here and so how easy it is to

just do the people pool of the push
command and that’s all you need to do so

with kids up free you don’t need to do
some faint stuff on your CI you don’t

need to worry about semantic versioning
and all the trouble with updating a new

version determiners can be mine are made
and then consumed how it’s gonna work

with with the clients but this method
you you can decide when you want to pool

you’re gonna have your own copy and even
if it doesn’t work with your client you

can just modify make it work and just
push it back up again

you have your own copy and what you can
do to take this further in the future is

when you start using this I would I was
like using is this if I had two projects

that was kind of related and they
started to have lot of shared code

that’s that’s gonna be an easy way to to
share it and maybe these two projects

was located in the same department of
the business you were working with then

later as these she had the shared
library should be shared with all the

people in the organization you want to
set something up on the CI that might

also publish this one and support
semantic versioning or you can just keep

using this one if if not having semantic
versioning is okay for your needs

thank you for watching and remember to

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to Set up a CI pipeline with Azure Pipelines and Nx

It goes without saying that having a CI pipeline for your Angular apps is a must. Setting one up for regular Angular apps is fairly straightforward but when you have an Nx monorepo there are certain other challenges that you have to overcome to successfully orchestrate a “build once, deploy many” pipeline. This post will

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »