# How to unbind Elm App

**URL:** <https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202>\
**Category:** Learn\
**Created:** [October 13, 2018, 2:23pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202 "2018-10-13T14:23:27Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![lukas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lukas/32/316_2.png) [@lukas](https://discourse.elm-lang.org/u/lukas)\
**Post date:** [October 13, 2018, 2:23pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/1 "2018-10-13T14:23:27Z")

</div>

Hi all,

We are in a process of migrating our legacy Angular 1.x SPA app to Elm where we still have some parts of the app in Angular and still using its router plus we have couple of Elm apps which are embedded to DOM nodes when route is changed (to e.g. #/moduleX ).

What I noticed is that if I navigate away to other route (with Angular components) and the original DOM node where the Elm app was embedded was destroyed - I still see subscriptions from the app firing HTTP requests.

I’m not sure if there is anything particular that needs to be done to correctly unload/unbind application (e.g. in Angular $onDestroy hook) but the return value from embed() function is just an object with ports. Just FYI we are embedding Navigation.programWithFlags apps which are subscribing to location changes.

Any help, suggestion would be very appreciated 🙂

Thanks

---

<div class="post-metadata">

**Author:** ![JordyMoos](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jordymoos/32/744_2.png) [@JordyMoos](https://discourse.elm-lang.org/u/JordyMoos)\
**Post date:** [October 13, 2018, 3:44pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/2 "2018-10-13T15:44:41Z")

</div>

I would also like to know if there is a solution in 0.19

In 0.18 the best we could do is stop the subscriptions…

---

<div class="post-metadata">

**Author:** ![Brian\_Carroll](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/brian_carroll/32/444_2.png) [@Brian\_Carroll](https://discourse.elm-lang.org/u/Brian_Carroll)\
**Post date:** [October 13, 2018, 7:18pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/3 "2018-10-13T19:18:27Z")

</div>

There have been some previous discussions here about that. Search for “unmount”. This one has a suggested technique. I think it’s probably 0.18, haven’t re-read it in detail to check. But may give you ideas.

> [@Unmountable Elm programs](https://discourse.elm-lang.org/t/unmountable-elm-programs/1515):
>
> Hi. Elm programs could be used at least in following ways (1) as a fullscreen program or (2) is embed program. It does make sense to start a new web app with a fullscreen program. However, when one wants to introduce Elm to existing code base then embed is the way to go. When DOM element which was used to embed Elm program is removed from the DOM one need to manually kill(unembed, unmount or whatever is called) the Elm program to prevent memory leaks. Memory leaks can be introduced by subscript…

---

<div class="post-metadata">

**Author:** ![lukas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lukas/32/316_2.png) [@lukas](https://discourse.elm-lang.org/u/lukas)\
**Post date:** [October 14, 2018, 6:22am UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/4 "2018-10-14T06:22:09Z")

</div>

Thanks Brian! That helped a lot.

---

<div class="post-metadata">

**Author:** ![akoppela](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/akoppela/32/250_2.png) [@akoppela](https://discourse.elm-lang.org/u/akoppela)\
**Post date:** [October 17, 2018, 8:40am UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/5 "2018-10-17T08:40:14Z")

</div>

It’s still the same for 0.19. I’ve prepared a package to automate this work but have not published yet. It seems it’s not possible to publish modules with ports for 0.19. Hope I can find time to publish the package soon.

---

<div class="post-metadata">

**Author:** ![lukas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lukas/32/316_2.png) [@lukas](https://discourse.elm-lang.org/u/lukas)\
**Post date:** [October 23, 2018, 2:36pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/6 "2018-10-23T14:36:06Z")

</div>

Hi,

Sorry for late reply. I think it’s a bit more complicated (not even sure if it can be done) when you use Navigation.programWithFlags as the subscription to URL changes is added (via Sub.Batch) in programWithFlags function. I don’t think it’s possible to ‘disable’ that subscription. Or do you see any option here ?

---

<div class="post-metadata">

**Author:** ![Qqwy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/qqwy/32/1062_2.png) [@Qqwy](https://discourse.elm-lang.org/u/Qqwy)\
**Post date:** [October 23, 2018, 3:19pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/7 "2018-10-23T15:19:40Z")

</div>

Do you have a code example? I _think_ (but could be wrong) that you can also just swap out that subscription for a `Sub.none` variant.

---

<div class="post-metadata">

**Author:** ![lukas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lukas/32/316_2.png) [@lukas](https://discourse.elm-lang.org/u/lukas)\
**Post date:** [October 23, 2018, 6:30pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/8 "2018-10-23T18:30:39Z")

</div>

Well, our Elm app is initiated via Navigation.programWithFlags as below:

```elm
main : Program AppFlags Model Msg
main =
    Navigation.programWithFlags UrlChanged
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

```

But Navigation.programWithFlags is adding it’s own subscription to the list of our app subscriptions so the program is still receiving URL updates even if our subscriptions = Sub.none. The only workaround that I could come up with so far is just to ignore the UrlChanged message when Unmount msg is sent via the port but the subscription is still there so it’s not ideal…

---

<div class="post-metadata">

**Author:** ![Qqwy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/qqwy/32/1062_2.png) [@Qqwy](https://discourse.elm-lang.org/u/Qqwy)\
**Post date:** [October 23, 2018, 8:29pm UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/9 "2018-10-23T20:29:50Z")

</div>

Assuming you are using Elm 0.18’s [Navigation.programWithFlags](https://package.elm-lang.org/packages/elm-lang/navigation/2.1.0/Navigation#programWithFlags): You can see that the `subscriptions` function takes your `model` as input, which lets you switch between whatever subscriptions you have and `Sub.none`. Or am I misinterpreting your question?

_Side note: This language is called ‘Elm’ (as in the tree) rather than ‘ELM’ (it’s not an abbreviation)._

---

<div class="post-metadata">

**Author:** ![lukas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lukas/32/316_2.png) [@lukas](https://discourse.elm-lang.org/u/lukas)\
**Post date:** [October 24, 2018, 7:36am UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/10 "2018-10-24T07:36:54Z")

</div>

The issue is that you’re still receiving URL updates even if subscriptions = Sub.none because Navigation.programWithFlags subscribes to it (not the application code itself).

Thanks for the Side note 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [November 3, 2018, 7:36am UTC](https://discourse.elm-lang.org/t/how-to-unbind-elm-app/2202/11 "2018-11-03T07:36:58Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.