DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Easy version stamp your Angular app🦶
Jeffrey Bosch for xLayers

Posted on • Updated on

Easy version stamp your Angular app🦶

Did you ever create bash scripts that you've used in multiple projects to do version stamp your Angular application?

Today we are very happy to announce 🎉 @xlayers/version-stamp 🎉 an Angular Builder that will help you to version stamp your Angular apps.

How to use version-stamp

1.Navigate to your Angular project

2.Add @xlayers/version-stamp to your project

ng add @xlayers/version-stamp
Enter fullscreen mode Exit fullscreen mode

The package will make some small changes to the angular.json

3.Add the following snippet (only the version property) to your environment files.

export const environment = {
    production: false,
    version: "_BUILD_HASH_"
};
Enter fullscreen mode Exit fullscreen mode

4.Use the version that the packages has provided in your environment properties.

import { environment } from "../environment";
Enter fullscreen mode Exit fullscreen mode
@Component({
    selector: "xlayers-root"
})
export class AppComponent {
    version = environment.version;
}
Enter fullscreen mode Exit fullscreen mode

5.Now you can stamp your app by running

ng run <your-app>:stamp
Enter fullscreen mode Exit fullscreen mode

or use --version for a specific version

ng run <your-app>:stamp --version="1.2.1"
Enter fullscreen mode Exit fullscreen mode

6.When we navigate to our dist folder we can look at our code and see something that is similiar to the picture below

Alt Text

Thank you

Thank you for reading our article, we hope this article encourages you to try xLayers products as it is fairly easy to use and provides a lot of value in the collaboration between designers and developers.

Would you like to help us with xLayers by contributing? We have issues for first-timers and we are willing to help you in all possible ways. Next to contributing you can help us by donating, this way we can develop more features that are on our roadmap.

Top comments (3)

Collapse
 
scooperdev profile image
Stephen Cooper

Is the picture missing at the end?

Collapse
 
jefiozie profile image
Jeffrey Bosch Author

I've added the picture thank you!

Collapse
 
jefiozie profile image
Jeffrey Bosch Author

Looks like it will update it soon. Thanks for pointing this to us

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.