How to PROPERLY Clean Up Angular Services on Route Deactivation

Added: 2026-05-09

[00:00:00]Hi.

[00:00:01]I would like to challenge you with a Quick question that... a lot of Angular developers fail at interviews... the question is very simple, and it goes like: will the data pulling service be destroyed when the user navigates away from the user's route?

[00:00:22]Well, despite it being so natural to think that the service instance will be destroyed, that is not true.

[00:00:30]By default, the injector created for that particular route is retained in memory forever.

[00:00:38]The great news is that In modern Angular, we can change this behavior 🎉 and in this video I will show you how to do that and some real life use cases where it might be applicable.

[00:00:57]So let me quickly walk you through the app we are working with.

[00:01:02]So here we have a user's route, and when a user navigates to it, a data polling service starts a polling session in the background, checking the server for new data.

[00:01:15]And you might be curious why I initialize the polling session inside the environment Initializer, instead of doing it in the user dashboard component, for example.

[00:01:28]if you would like to learn more about Environment Initializer and why I use it here, I have a dedicated video where I covered all this things, so you can check this video out later if you want.

[00:01:41]So now that you know the setup, let me show you what the actual problem looks like.

[00:01:47]So we start polling session when user navigates to users' route.

[00:01:52]Now imagine the user navigates away what happens?

[00:01:57]Right?

[00:01:58]The polling keeps running and the service instance is still sitting in memory.

[00:02:04]And it will stay there for the entire lifetime of the app.

[00:02:09]This is not necessarily a problem.

[00:02:11]Sometimes it is the desired behavior, but otherwise it might cause unnecessary load on your server.

[00:02:19]So how did people deal with this issue before Angular 21.1?

[00:02:25]there were a few options and honestly, none of them are great.

[00:02:30]The first option would be to stop polling inside the root component in geo destroy, lifecycle hook, but that couples the service, uh, or polling lifecycle with a specific component, and that is quite fragile and not scalable.

[00:02:49]The second solution would be using that can deactivate router guard, but this idea is even worse because.router guards are designed for the navigation control and not for performing something like cleanup logic or things like that.

[00:03:07]The third option would be to build a separate service that would listen to the router events and detect when a specific route gets deactivated.

[00:03:17]This might work, but in my opinion, it requires a lot of code for something that should be simple, if not default.

[00:03:25]And on top of that, none of those solutions are actually destroy the service instance.

[00:03:33]So the injector stays in memory either way.

[00:03:37]The cool thing is that in Angular 21.1, a new router feature was introduced that solves exactly this problem, and it is called without cleanup, injectors.

[00:03:52]Now let me quickly show you how it works.

[00:03:55]To enable it, you have to go to your app config ts file.

[00:03:59]Then you have to import this feature function.

[00:04:03]And added to the router feature list when you configure your angular router, and that's it, one line of configuration.

[00:04:13]So now whenever the user navigates away from the user's route, the corresponding route injector is destroyed and the polling service instance is destroyed along with it.

[00:04:25]And this is exactly what we need.

[00:04:28]Right now, however, you can see that the polling is still ticking, but this is because the RXGS subscription in the polling service is kind of leaking, so... to fix this, we have to go to the service and stop our sub subscription explicitly in the ngOnDestroy Lifecycle hook.

[00:04:50]So now, once we save this change.

[00:04:52]Our polling stops immediately when user navigates away from the user's page, and then polling starts again when we come back to it.

[00:05:04]That's cool.

[00:05:05]But what could go wrong here?

[00:05:07]Well, it might happen that you want to stop a service subscription when a service gets destroyed, but you have no access to the service, uh, source code, for example, the service is coming from third party library.

[00:05:25]What to do in this case?

[00:05:27]The solution is pretty simple.

[00:05:30]Angular has a special injectable class called Destroy Rev, which allows you to define certain cleanup logic that runs when the corresponding injector gets destroyed.

[00:05:44]This class can be injected almost everywhere, including inside the environment.

[00:05:50]Initializer callback since it is being executed in the injection context.

[00:05:57]So once you have it injected, you can define there on destroy.

[00:06:02]Call back and stop the app polling session by calling the corresponding stop method.

[00:06:07]So now if you have the auto cleanup injectors router feature enabled for your application and the user leaves the user's route, for example then the on Destroy lifecycle hook we just registered will be invoked and the polling subscription is stopped.

[00:06:29]And we could achieve that without modifying the source code of the polling service itself.

[00:06:36]But is there anything else we should care about?

[00:06:39]Let's figure it out.

[00:06:40]If you decided to enable the auto cleanup injectors feature in your angular application, please keep in mind one edge case where it might not work as expected.

[00:06:52]So if your router is configured with a custom route to use strategy, you might need additional configuration to make it work.

[00:07:02]The first thing you have to do is to check if your custom reuse strategy class extends the base route reuse strategy.

[00:07:11]And if it does and you want the route injector to be destroyed after the activation, then you should do nothing.

[00:07:21]It will work as expected automatically but otherwise, your custom reuse strategy class must implement a new method called shouldDestroyInjector, which should return true or false depending on the behavior you want to achieve.

[00:07:39]So in this way, your reuse strategy will work correctly with the new auto cleanup injector router feature.

[00:07:48]All right I,think we covered pretty much everything so let's do a quick recap.

[00:07:54]So using withAutoCleanupInjectorsinjector router feature, we can implement a clean data polling solution.

[00:08:02]It starts when user enter a particular route and stops when the user leaves it.

[00:08:09]The polling data service is decoupled from any component lifecycle, which makes this solution flexible, scalable, and predictable.

[00:08:18]But this is more than just a polling solution!

[00:08:21]If you think about it, combined with environment Initializer, we now have something like onInit and onDestroy lifecycle hooks for the route injector.

[00:08:33]And this is really cool because it opens doors for a lot of other interesting architectural decisions and solutions.

[00:08:42]So enable this feature if you want to clean up memory by destroying service instances from the inactive route.

[00:08:49]If you want to perform cleanup logic when the particular route is deactivated Or use it in combination with the DestroyRef to achieve more flexibility.

[00:09:00]But before using it, please keep in mind the following.

[00:09:03]This feature is available starting from Angular 21.1.

[00:09:08]This is still experimental feature, so the API and its behavior might change in the future.

[00:09:16]And also it can be a breaking change for your application, especially if you use route reuse strategies, so make sure that you test things properly after you enable this feature.

[00:09:31]and talking about testing.

[00:09:33]I cannot go without mentioning my friends from test Sprite.

[00:09:36]I.

[00:09:37]? It is an AI testing agent that I have already mentioned before and it fits really well if you are adopting AI tools in your workflow.

[00:09:46]The setup of test Sprite is extremely simple.

[00:09:50]You just have to create a free account on their website and connect the MCP server to tools like CLO Code or coor, and then you simply ask it to test your application.

[00:10:05]It'll analyze your code base and ask for a product requirement document, which is a simple MD file that describes what your application is doing in order to understand what to test, and based on that, it generates a test plan, it creates tests, executes them, and gives you a final report.

[00:10:27]What is cool is that now you can actually observe the whole testing process in real time, including live status updates, detailed logs, recordings of how exactly your application or component has been tested.

[00:10:43]And maintaining tests over time got easier as well since you can edit your test directly using the interactive UI tools.

[00:10:53]If it looks exciting and you would like to play with test Sprite more, you can get one month free on their starter plan following the link in the description.

[00:11:04]Alright, my friends, if you want to continue sharpen your angular knowledge about related topics, there are few videos on my YouTube channel I would recommend watching Next.

[00:11:16]The first video is obviously about environment initializer that I already mentioned in the beginning of this video.

[00:11:23]You can learn more about, root level injectors in my another dedicated video and also I think I mentioned memory leaks, and, about this topic, I have even two great videos where I show how to debug them and how to fix them.

[00:11:41]So if you want, you can check them out right now.

[00:11:45]and if you find this video useful and you would like to see more videos like this, the best way you can support my channel is to subscribe to it and share this video with someone on your team who works with Angular and want to improve the skills.

[00:12:02]It really helps and I appreciate it so, so much.

[00:12:07]Otherwise, thank you so much for watching this video until the end.

[00:12:11]I wish you productive week ahead.

[00:12:13]Stay safe and see you in the next video.