Angular component in locale usage

Photo by Domenico Loia on Unsplash

Sometimes it happens, that you need some component(s) reused. You have two possibilities. You can publish your component in npm or you can create the local link. In the First way is your component available for all users (or pay private repository). But sometimes it is only for internal using and I would like to show how you can create your library component. Go ahead!

1) Create a new Angular project for our libraries

I have decided, that we can develop together one awesome component for the calculation of fuel consumption. It will be contained only two fields:

• Consumption: how many liters of fuel was consumed
• Distance: we were driven.

From these two values, you can very easily calculate the average consumption. It is of course very easy example but I would like to show the step-by-step to use the component as a library. You can create of your own choice.

Nevertheless, if you don’t want to waste the time creating the library you can download the template from the public repository and install the dependency. Of course, you can develop from the beginning.

GitHub - MV-Tutorials/angular_lib

gh repo clone MV-Tutorials/angular_lib
npm install

For the rest of us, we create the library project with the command:

ng new mv-angular-lib --create-application=false

Figure 1: Output after the creation of libraries

Now we have to generate components:

ng generate library average-fuel-consumption

After this command, you can see sometimes. It can be a little different depending on your version and settings.

Figure 2: Library project structure

2) Logic of library

I would like to show you the implementation of the logic. It is really minimalist implementation because I would like to present primarily all steps for creating the locale component.

Code 1: Component

Code 2: Logic of component

3) Build our component

Now our library is ready to build. First of all, go to your directory of project. In our example is it:

cd projects/average-fuel-consumption/

and build our project with the following command.

ng build average-fuel-consumption --configuration production

If your build is correctly passed, you can see the output in the terminal:

Figure 3: Successful build of the library

At the same time, you can check that in folder dist was generated built code.

Figure 4: Built code of the library in dist-folder

4) Use In Local Environment

Now if your project is built problem-free, you can create a local link. Go to the folder, where the codes were built. In this case, it is:

cd ../../dist/average-fuel-consumption/

The last thing, which we have to do, is created the local link. If you are interested in all options see official documentation (npm link). Please take into account, that you are in Dist-Folder. Sometimes it is necessary to execute this link with admin rules. In Linux operation system put sudo into the terminal.

npm link

If you are not sure, that everything is right, check the list of all simlink. In Terminal you can see a list of all local simlink.

npm list -g

Figure 5: List of locale links

It can happen, that you create the link from the wrong location (it has happened to me many times 😀). In this case, you can delete this connection with the command. There is also essential execution with admin rules.

npm rm --global average-fuel-consumption

5) Connect library component

Now your component is ready to use. If you have some angular-Project, you can skip this chapter and continue with chapter 6. The others have to create some demo-application. Go to the folder, where you can create the application and enter:

ng new try-lib-project --style=scss

Figure 6: Demo-application is creating

6) Add the local component to project

In our case, we will add the local component to our demo application. You have to move to the root folder of the project. The root folder is the folder with file package.json. If you follow this article, move you to the root folder by:

cd try-lib-project

Now you are in the root folder, you can create a connection. The command contains the name of the component from Figure 5.

npm link average-fuel-consumption

Figure 7: Local package was added

7) Using the local library in demo app

Now our connection was created and we can use it very easy the component in our demo application. First of all, open your project with some IDE (I prefer WebStorm). In project update app.module.ts and add created locale component (see Figure 8).

Figure 8: Using locale library in the project

Last but not least, add a tag of the component in our component. In this case, we have deleted all HTML code, which was generated and paste.

Figure 9: HTML-Code in root website

Now you have to only start the application. That is all.

8) Error state in demo project

It can happen, that after the start of the demo application you can see nothing. In this case, please open web-console and if there is following error:

ERROR TypeError: Cannot read properties of null (reading 'bindingStartIndex')

you have to activate the preservation of symlinks. Open angular.json file and find options in build in architect and add (see Figure 10)

"preserveSymlinks": true

Figure 9: Allow preservation in your demo project

Photo by Alexas_Fotos on Unsplash

If you want to support me: give me a like, subscribe, or invite me to coffee.