Video details

Angular Evergreen VS Code Extension | Doguhan uluca | Lightning Talks 2021 #ngconf


Learn about the open-source Angular Evergreen project and how it helps a team to be up-to-date with the latest versions of Angular. The VS Code extension helps you reliably test your application after an upgrade, and helps you install npm scripts to avoid merge conflicts or resolve team arguments about code styling. The extension is open to your ideas and contributions.
Learn the best ways to build reliable web applications, write quality code, choose scalable architectures, and create effective automated tests at the Reliable Web Summit this August 26-27, 2021. Powered by the team at ng-conf.
Get your ticket 👉
ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1000's of developers from across the globe join together to attend talks and workshops by the Angular team and other community experts.
Follow us on twitter​
Official Website:


John, I'd love to learn a little bit more about yourself. Like where are you from? Tell us a little bit about your background. I'm from Washington, DC. I am a technical fellow at this company Excel, and I'm also an Angular Gde. Nice, and I also have a couple of books published. So excited to talk about this Visual Studio code extension today. Yeah, great. Okay, well, I'll just turn it right over to you then. Awesome. Thank you. Let me start by sharing my screen and are you able to see my screen? Yes. Yeah. Okay. Ok. Alright. So today we'll be talking about Angular Evergreen Angular Evergreen as an open source Visual Studio code extension that's published on the marketplace. We have about 2500 active installs at the moment, which is great, and we have a pretty robust set of contributors myself or this bumper Cost and other Angular GD Kenton Ballcock, Burning Cockins, Alex Hoffman and Brendan Sawyer from the Angular BC community, so definitely not possible to do it alone. So that features of this extension or notification of Angular releases within your IDE checking for the latest Send Rick releases on the fly. Being able to run Ng update from the comfort of your IDE, run a post update checkup after you've done your upgrades and then auto configuration scripts to configure your Angular projects for Vs code. So while an extension first off, it's very easy to get into, there are no subscriptions or sinus required, and as developers, we need focus to develop and we kind of live inside of our IDs, so we don't really start our day and think like, oh my God, I wonder if there's a new patch release for Angular. We just don't do that. So being able to get that right there within the ID push to us will make us more aware of what's going on in the Angular world. Also, your multiple projects came here on different releases, so you might not necessarily have the awareness of which patch or which minor version a particular project is on. This is also useful for tracking next releases right now. Angular RC Zero is out. Did you know that being able to aware helps you get prepared for the upcoming releases? And it is really important to be up to date on Angular? So one thing the extension does is whenever you launch your project, they'll tell you if you're already Evergreen or if you're out of date. So once you're in the IDE, you can right click on your Angular JSON file and hit check for updates. They'll run the Ng update command for you so you can see what you're behind off. And for me more detailed information, you can use the Sidebar, which is versions, quick commands and a help section. So that's a quick demo here. So here I'm going to start an existing project Local weather app, which is also featured in my book, and here on the bottom right corner. It's going to tell me. Yeah. So my Angular is out of date. So let's find out more about it. So currently I'm on Eleven one, but the latest is eleven two. I can also see twelve RC zero is out. So here I have my various commands here. I can run the Angular update CLI and core command right here, and then I'll start running that command for me. And then if I need more help, I can just hit this how to Update link here, which will go ahead and bring up the annual update guide for me. So if I'm not familiar with these tools will be informed. And then the last project I want to show you is the one that I just created yesterday, and that one that's going to show us that it's already evergreen. So good job. I know on top of it. And the one thing I want to show you is is this configure vs code for Angular scripts, which kind of goes ahead and adds a lot of prettier and NPM scripts et cetera to your project for linting and styling rules. Lots of helpers that give you a good start for your project. Angular Evergreen attempts to keep you in your ID, keep you focused on what you're doing. It also aims to make beginners more comfortable executing Ng update commands, and you can reliably verify your upgrades with the post update script and then keep your Angular Evergreen. So we're looking for contributors. We need your ideas. You can submit issues and PRS on GitHub to the project. You can contact us to become a contributor on Twitter, at DeLuca and at a Benecos as shown here. And finally, I just wanted to wrap up saying the second edition of my book is out for Enterprise early Web applications. You can check that out on Age for Enterprise. Com and my colleague our Status Bumppos his second edition of his book is coming out this July, which is also great and the link of that year and then the slides will be live after this. So if I wanted to check on Twitter for Angular ever gain, go to Angular evergreen lock.