Angular and Copilot Coding Agents

Published on Jul 14, 2025

Introduction

The last several months have been dominated by how AI will fit in our workflows and how we will implement it in our day to day life. This has left some feeling uneasy and worried; some are avoiding AI at all costs; still others are embracing the new tools. The truth is that AI is getting better every day at helping us with the mundane parts of our job and allowing us to focus on more challenging things. I think the best option is to embrace the tools we have and use them to the best of our abilities. In this article, we'll look at one of those newer tools, GitHub Copilot's Coding Agents, and how we can use them to assist us in our work.

What are Copilot Coding Agents?

Let's start by discussing what the Copilot Coding Agents are. Coding agents are processes that Copilot can kick off that work on different tasks for you. The documentation lists the following things that the coding agents can accomplish for you:

Fix bugs
Implement incremental new features
Improve test coverage
Update documentation
Address technical debt

They are in public preview now, and can be used by those with the GitHub Copilot Pro, GitHub Copilot Pro+, GitHub Copilot Business and GitHub Copilot Enterprise plans. While they are in public preview, I can attest to the fact that they are very good at accomplishing the above use cases.

The easiest way I've found to get the coding agent working on a task for you is to create a GitHub issue and assign it to Copilot. At that point, the agent will create a PR and start a coding session. You'll be able to view the session and the steps Copilot takes to accomplish the task. At the end of the session, you can go back to the PR and review it just like you would any other PR.

Copilot coding agents also differ from agent mode in VS Code. The document (linked above) says this about the differences:

Copilot coding agent is distinct from the "agent mode" feature available in Visual Studio Code. Copilot coding agent works autonomously in a GitHub Actions-powered environment to complete development tasks assigned through GitHub issues or GitHub Copilot Chat prompts, and creates pull requests with the results. In contrast, agent mode in Visual Studio Code is part of the GitHub Copilot Edits feature that allows Copilot to make autonomous edits directly in your local development environment.

Assigning Issues to Coding Agents

Now, these coding agents can accomplish some impressive tasks, and we'll look at a few examples from my use shortly, but there are some things you need to know to make things go as smoothly as possible. The first and most important is that you need to be as clear as possible in what you want the agent to accomplish when assigning it the GitHub issue. I don't know about you, but sometimes the tickets I get have the something like the following as the description:

Description

The checkout process isn't working. I tried to buy the new featured product, and it just failed. This is a huge problem because our big marketing campaign just launched, and we're losing sales every minute this is down. It's critical to the business that customers can check out. Please fix this ASAP! This is an emergency.

This description isn't intentionally bad; a product owner may write something like this because they don't have a technical background and they just know that something isn't working and they need it to work. When a human gets a ticket description like this, we can reason our way through what might be going on. Maybe we wrote that feature, and we know where to go to start debugging. We may also have access to a logging system like DataDog or Sentry that will give us more context about the issue. The problem is that the coding agent doesn't have any of that context. If you assign the above issue to the coding agent, it may be able to find the related components and services, and may be able to look for some obvious bugs, but it likely isn't going to be able to solve the problem. However, if you assign the agent a task that looks like this, you're more likely to be successful:

Description

When a user proceeds through the checkout flow as a guest and enters a valid United States shipping address, the final "Pay Now" button on the payment page becomes unresponsive. Clicking it produces no visual feedback or network activity. This issue has been confirmed on Chrome and Firefox but does not appear to affect logged-in users.

Expected Result

The "Pay Now" button should process the payment. The user should be shown a "Processing..." indicator, and upon successful transaction, be redirected to the order confirmation page.

This description is much more helpful, both for us as the developers, but also for an AI coding agent. We now know specifically what is happening, and what should happen. Assigning this issue to the coding agent makes it much more likely that the issue can be solved by the agent. However, I still like to take it a step further. We want to fix the bug, but we also want to ensure that the issue doesn't happen again. Ideally we would add some unit and end to end tests to ensure that the issue doesn't occur again in the future. These are things that we need to provide to the coding agent to ensure that it adds that to the PR. Here's a good final issue description:

Description

Expected Result

The "Pay Now" button should process the payment. The user should be shown a "Processing..." indicator, and upon successful transaction, be redirected to the order confirmation page.

Acceptance Criteria

When a guest user clicks the "Pay Now" button with valid information, a payment processing request must be initiated.
The UI must provide clear feedback that the payment is being processed (e.g., a loading spinner, disabled button).
Upon a successful payment, the user must be redirected to the order confirmation page.
In the case of a payment failure, a clear and user-friendly error message must be displayed.
The fix must be functional across all supported browsers, including Chrome and Firefox.

Testing Plan

Unit Tests (Angular)

Payment Component (payment.component.ts):
- Event binding for the payment submission button.
- Component state changes during payment processing (e.g., loading and disabled states).
- Proper interaction with the PaymentService upon submission.
- Correct handling of successful payment responses, including navigation.
- Correct handling of payment failure responses and error message display.
Payment Service (payment.service.ts):
- Correct formation of the HTTP request to the guest payment endpoint.
- Proper handling of both successful and error responses from the API.

End-to-End Tests (Cypress)

The complete, successful guest checkout flow, from adding an item to the cart to landing on the order confirmation page.
The guest checkout flow when a payment failure occurs, ensuring the correct error message is displayed and the user can attempt to pay again.

Now our ticket has a clear description, acceptance criteria, and a testing plan that should be implemented to ensure we fix the issue going forward. This is an issue that a Copilot coding agent could take and have a reasonable chance at successfully solving.

Issue Tips

Just a tip: use AI to format your GitHub Issues! Seriously, do it. If you have access to the Copilot coding agents, you have Copilot on your GitHub account. Click on the Copilot icon:

If you click this button while you're on the homepage of a repo, it will use that repo as context for the questions you ask it. I will usually write the description out as clearly as I can, and then use a prompt similar to the following:

Create a GitHub issue for the following, adding a testing plan and acceptance criteria ...

Copilot will then start creating the issue inline for you in the chat. You can review what it creates, make updates as needed, and ensure that everything you're hoping for is covered. Once you're satisfied with the issue, you can save it right there and assign it to Copilot.

Copilot Coding Agent in Action

Once the issue has been assigned to Copilot, you'll see a PR created almost immediately. Open it up, and you'll see a button that says "View Session". This will take you into a view that looks a lot like the overview of a GitHub action for your CI. As the agent works through your ticket, it will log out each step, and tell you what it's doing. There will be npm install steps, steps where it tells you that it is trying to understand the context of the repo, steps where it is making the change, steps where it is testing the changes made, and steps where it is finishing up.

I can't provide an exact picture of this, because the times I've used this have been on private software for my company, but the UI is very intuitive and it's easy to follow along with what is happening.

When the session is done, which I've seen take anywhere from ten minutes to 40 minutes, you'll be able to review the PR just like you're used to. You can review the changes made and ensure that everything looks good. This doesn't mean, though, that the issue will be fixed after the first session. In fact, I think most of the time I've done this it's taken a few sessions at least. If you notice something isn't correct, you can comment on the PR with what you see, and Copilot will kick off another session and begin working on it again. For example, maybe it used *ngIf and you want to use the new control flow syntax. Write that in a comment (mention @copilot if you want to be more explicit) and then watch as the change is made. Continue this until you are reasonably sure that the issue is fixed.

Manual Review

The next step is pulling down the code and manually testing the change. The agent has done a really good job for me, but I have done this each time I've used it on an issue. I will pull the code down and run the app, and then manually test the feature. After I confirm that it works, I'll review and run the unit and end to end tests. We use Nx at work, and I've also noticed that I've needed to run nx format:write and push those changes up for our CI to run successfully.

Now that the PR has been created, the work finished and manually tested, you can merge the PR and let your CI process take over from there. At this point, it's just a normal PR that you open and close every day.

Why Use Coding Agents

Now let's talk about why you might use these coding agents instead of doing the work on your own. The first reason is because AI is really efficient at solving straightforward coding problems like these ones. Like I mentioned above, I've seen coding agents solve problems in anywhere from 10 to 40 minutes, and those same tickets would have taken me anywhere from a couple hours to a day to accomplish on my own. While the agent is working on these tickets, I work on testing other tickets, or doing the really simple things like button color changes or text changes that I don't think are worth assigning an agent to. This process has allowed me to implement features on our API that are above and beyond my skillset, and have also allowed me to implement new functionality in features that I haven't worked on for several months. That second part is especially valuable, because when I come back to a feature that I haven't worked on for several weeks or months, I need some time to re-familiarize myself with the code to actually make the change. The coding agent, though, is more efficient at understanding the context of the change and takes only a couple minutes to do what might take me a half hour to do.

These coding agents can also take on a wide variety of tasks, as mentioned above. I've used it for extending functionality in existing Angular features, as well as adding new functionality on our API. It's done really well in all situations. In fact, on one issue I uploaded a rough mock of what the business wanted the feature to look like, and the agent was able to analyze the image and recreate it in HTML, matching our use of tailwind by using the context from other templates. I also used agents to implement a feature on the API that took the ID of a record, and tried to find possibly related or duplicate records based on provided criteria. It came up with the endpoint, the service method, the DTOs, the scoring criteria, and the documentation. It took a little tweaking here and there, but the majority of the work was done in under an hour. It was a feature that would have taken me a day to accomplish, at least. While the agent worked on that, I prepped the front end to call the new endpoint and display the data that would be returned. Overall, the coding agents have made me much more efficient and allowed us to close more tasks with the same number of developers on the project.

Angular Specific Notes

I do want to mention a couple things that are Angular specific as far as these coding agents go. When I've assigned the agent an API task (our API is written in .NET Core), I find that it does a pretty good job matching our existing standards and coding to those standards, including when writing unit and integration tests. But I have found that I need to be a little more explicit in how I want the Angular code to look. I imagine this is because the training dataset for modern Angular is smaller than that of C#. The agent still does a good job, but I have had to be explicit about using the new control flow syntax, telling it where to break pieces out into new components, and similar items to that. Those extra directions have made the resulting code better match what our Angular code looks like and match our coding standards.

Conclusion

Just like anything related to AI today, you should not just blindly accept the code generated by these coding agents. Double check the code it produces. Have a coworker or co-maintainer review the code in addition to your review. Manually test things before deploying them. It's no different really than any code you use in your app that you didn't write yourself. However, I can promise you that as you embrace what AI can do for you, you will become a more efficient developer, and your skillset will grow. Even though I've had the agents helping me on a lot of my backend tickets, I have learned a lot by reviewing the code it produces for me. I have started to learn some patterns and techniques, I have reviewed the generated tests and learned some good practices for those tests. These are things that I would have eventually learned anyways, but I am able to learn while also still providing a lot of value to my team.

Don't be afraid of AI. It's not going anywhere. Instead, use it to your advantage, just like you would any other tool. You likely wouldn't turn down a better editor just because it makes things easier (otherwise we'd all just be using Notepad instead of IDEs to develop), and AI tools like this are no exception.