Forem: Sumit Parakh

How to make angular app watch for changes in angular library and update itself?

Sumit Parakh — Sun, 01 Mar 2020 14:48:25 +0000

Angular CLI provides a command-line interface to do a lot of things like linting, changing configuration of your application, view docs, run and build your app etc etc..

Out of these commands, there is a generate command which allows us to create building blocks of our application. In this article, we are going to learn how to generate library and watch for changes in the library in an angular application.

Let's get started.

Create an empty angular application

ng new my-lib-app –createApplication false

This command will create angular application with an empty workspace.

Add a library project

Go to the root of this project and generate a library.

cd my-lib-app
ng g library lib1

This command will generate a library project for you. Now build this library:-

ng build lib1

Depending on angular.json configuration, it will generate build files in the output path. By default it should be dist/lib1.

Link this library in your local system. Go to the build folder of your library and run command:

npm link

It will globally link your library in your local system and you will be able to install it in any app in your system.

Create an angular application

Run following command to create an angular app:

ng g application myapp

Now install library which we've created earlier. But to enable watching, we’ll have to install this library with a file system url:

npm install file:./dist/lib1

Now run following commands:-

ng build lib1 --watch
ng serve

Now use any component from your library in the app. Run it. Make some changes to the library and you’ll see that app is updating automatically based on those changes.

You can find complete source code of this article here:-

sumitparakh / ng-lib-watch

Make angular app watch for changes in angular library and update itself?

NgLibWatch

This project was generated with Angular CLI version 9.0.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

How can i make my career in open source development?

Sumit Parakh — Sun, 17 Nov 2019 16:20:29 +0000

I see some people in Twitter whose bio says that they are Open source developer or open source advocate in some xyz company. I am also very much interested in open source development but not sure how to make a good career out of it.

Can anyone please guide?

How to contribute to xLayers this hacktoberfest

Sumit Parakh — Wed, 02 Oct 2019 14:29:15 +0000

The Hacktoberfest 2019 is here. :D

This event is organized by digitalocean every year in October, to celebrate the open-source community and their contributions. It not only promotes the idea of open-source but also provides a great opportunity for developers across the world, to make contributions to ANY open source project.

If you have never made any open source contribution but are willing to, then this is the best opportunity for you to begin with and learn.

Don't know how to make PR to any open source project? Well, you got to read this:

Demystifying Open Source Contributions

In order to keep the momentum of open source, we, the xLayerians also invite your contributions.

What is xLayers?

xLayers is a community driven open source project which is a perfect companion for designers who want to see their design running ;)

What does xLayers do?

Convert your sketch prototype into code of any framework.
Display your design directly on the web.
3D rotation, preview mode and zooming support
Display metadata of your design such as size, position, layout structure, etc. on the page.
Edit, run and deploy the generated code directly from your browser. Thanks to stackblitz :)
Download generated code as a zip file.

How to contribute to xLayers?

It is very simple.

Just go through this link to get a list of hacktoberfest issues.
Pick any issue you want
Read our contribution guidelines
Get started. :)

Apart from the main xLayers project, we also have few more projects in our github organization which you can look around:

xlayers-lite (Web Component of xLayers)
xlayers-vscode-extenstion (vscode extension of xLayers)

So what are you waiting for? Let’s begin. Afterall, it is open to all :)

If you have any doubt, feel free to comment here or raise an issue, or tweet/DM us :) .