Once Upon a Library (1/3)

Your first Angular scoped library within a GIT submodule

Published in

Dev Friends

4 min readMar 27, 2019

I was developing a new feature for an Angular 7 project and noticed that the code I was writing would be used in many other projects within the company. So, I decided to encapsulate the code into an independent angular library that could be shared among the other projects. I spent some time reading about it and had an insight about writing this article to keep track of what I was doing and the results achieved.
This is the first story of a series of three (3) called: “Once Upon a Library”.

Quick information about the environment and background knowledge

For this series, I will assume that you know Angular 7 and have your environment setup for working with it.

Why GIT Submodule?

I wanted to make it easier for the other developers to clone and maintain the libraries we create; so, organizing it in git submodules will allow any developer to clone the library code inside any other project that uses it, make the needed modifications and publish it from inside the main project.

Creating the Workspace Project

For creating an Angular library, you need a parent Angular project. The library folder itself does not work.

To create a new angular project for hosting your lib, you will need to run the following command:

ng new once-upon-library --create-application=false

As spotted by Todd Palmer in his article, when set to false, the flag — create-application “tells ng new not to create the initial Angular application in the Workspace”. So, you should end up with a workspace like this:

Ignore .idea folder unless you are using IntelliJ

Angular has also initiated a GIT repository for your new project. So, you should perform you first commit in order to keep the branch updated.

Creating the library within a submodule

Before you create your library and setup the submodule, you should start a brand new git repository to store it. In my case it is under git@github.com:dev-friends/df-library.git

After setting up your repo, create the angular library by executing the command in your project’s root directory:

ng g library @devfriends/df-library --prefix=df

Where:

@devfriends is my scope
df-library is the library’s name
— prefix=df is the prefix to use in my components

After running this command, you should get a folder structure like following:

ATTENTION: DO NOT commit nor add the files under /devfriends/df-library to once-upon-library repo.

The next step is generating the git submodule under projects/devfriends/df-library.

Switch into projects/devfriends/df-library
run git init to initialize a new repo
git remote add origin git@github.com:dev-friends/df-library.git
git pull to synchronize the repo
switch back to the project’s root folder
create the submodule by running the command:

git submodule add git@github.com:dev-friends/df-library.git projects/devfriends/df-library

Where:

git@github.com:dev-friends/df-library.git is the git URL; and
projects/devfriends/df-library is the library folder

After this you should have a new file called .gitmodules with the following content:

[submodule "projects/devfriends/df-library"]
  path = projects/devfriends/df-library
  url = git@github.com:dev-friends/df-library.git

You should now:

Commit the changes of the library folder to the library repo;
Commit the changes of the root project into its own repo.

After doing this, your repo for the root project will have only a reference to the library repo as following:

If you click on df-library you will be redirected to its own repository.

Your library is now ready to be enhanced and published. For the next part of this series, I will be showing you how to publish you library into NPM and into your own repository manager.