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

Walkthrough: Building An Angular App Using Tailwind CSS and Nx

In this video, we will cover a walk-through from scratch covering how to Build and Angular app using Tailwind CSS and Nx including Angular standalone components. 🖌 Tailwind CSS setup and usage⚙️ Nx monorepo configuration🧍‍♂️ Standalone components✅ Building a complete app in less than 2 hours with best practices ⏳ Timestamps:0:00 – Intro1:00 – Tailwind

Read More »

18 Performance Optimization Techniques For Angular Applications (podcast with Michael Hladky)

Performance is extremely important in front-end applications as they directly impact the application’s user experience. Poorly performing applications can be frustrating for the end-users. For example, an e-commerce site that is slow and unresponsive might deter users which could have a direct impact on the business.  Although there is a growing number of tools to

Read More »

Announcement: Angular Testing Workshop

I’m announcing a new live workshop: Angular Testing Workshop. It will be half-day workshops over three days, 100% online, where we will learn all the industry best practices with Angular testing so you can apply them in your daily work – taking straight out of my experience with doing Angular testing for big projects. The

Read More »

Server-side Rendering (SSR) with Angular Universal

As the name suggests, Single-page App (SPA) is a single HTML document that can be initially served to the client. Any new views required in the application can be created by using JavaScript solely on the client. Besides this, the request-response cycle still happens, but only to RESTful APIs to get static resources or images.

Read More »

How Fabrice Became An Angular Architect In 8 Weeks

Learn how Fabrice became an Angular architect in 8 weeks. He asked himself “How can I strengthen my knowledge” and he joined Angular Architect Accelerator. Fabrice shares his experience with the course and how he became a better Angular developer. Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Read More »