{"id":21287600,"url":"https://github.com/bkinsey808/ng-single-iframe-upgrade","last_synced_at":"2025-07-11T13:30:49.368Z","repository":{"id":65458031,"uuid":"106159187","full_name":"bkinsey808/ng-single-iframe-upgrade","owner":"bkinsey808","description":"Upgrade your AngularJS app to Angular the easy(?) way: just put your legacy app in an iframe!","archived":false,"fork":false,"pushed_at":"2017-11-25T14:05:29.000Z","size":2314,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-24T19:12:04.231Z","etag":null,"topics":["angular","angularjs","iframe","upgrade"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bkinsey808.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-08T07:53:00.000Z","updated_at":"2020-08-06T16:12:09.000Z","dependencies_parsed_at":"2023-01-24T14:30:24.363Z","dependency_job_id":null,"html_url":"https://github.com/bkinsey808/ng-single-iframe-upgrade","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkinsey808%2Fng-single-iframe-upgrade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkinsey808%2Fng-single-iframe-upgrade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkinsey808%2Fng-single-iframe-upgrade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkinsey808%2Fng-single-iframe-upgrade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bkinsey808","download_url":"https://codeload.github.com/bkinsey808/ng-single-iframe-upgrade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225477402,"owners_count":17480445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","iframe","upgrade"],"created_at":"2024-11-21T12:13:58.950Z","updated_at":"2024-11-21T12:13:59.585Z","avatar_url":"https://github.com/bkinsey808.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-single-iframe-upgrade\n\n\u003e Upgrade your AngularJS app to Angular the easy(?) way: just put your legacy\n\u003e app in an iframe!\n\nThis technique was inspired by\nhttps://github.com/jawache/alt-angularjs-migration-using-iframes-demo by Asim\nHussein and a lot of what he says are advantages for using his project should\nalso apply to this project as well. But that project has a big perf problem if\nyour AngularJS app is slow to bootstrap. Each legacy route change in that\nproject causes the iframe to refresh. This project in contrast keeps the iframe\nalways open, and visible or not depending on the route.\n\nng-single-iframe-upgrade is appropriate if you don't feel like refactoring your\nAngularJS code (or can't for various reasons including third party libs that\ndon't exists in Angular), and you would rather just let it be. This is sort of\nthe opposite of the ngUpgrade slow refactoring approach, where you have to port\nyour code to typescript, make it componentized, etc, and then figure out how to\nget Angular components inside AngularJS components and vice versa. This approach\ndoes not do that. You are either in an AngularJS legacy route, or you are in a\nmodern Angular route, and that determines whether the iframe is visible or not.\n\nWhile ngUpgrade might be appropriate in some cases, as for me, I found ngUpgrade\ntechnically challenging, and also a bit demoralizing considering I was spending\nso much time refactoring legacy AngularJS code rather than working right away\nwith Angular 4. Hopefully ng-single-iframe-upgrade makes it easier to get\nstarted building your new routes with real Angular sooner, without breaking your\nold legacy AngularJS routes, also allow you to update an entire AngularJS route\nto Angular all at once rather than going through complex and potentially\nbug-causing refactoring stages or steps. At least that's the goal.\n\nng-single-iframe-upgrade works very well with AngularJS apps that are slow to\nbootstrap/initialize, that was my initial reason for developing it. For the most\npart, the AngularJS app only has to bootstrap once, so using it is as fast and\nresponsive as if it were not in an iframe. Ideally your users will never know!\n\nOf course there are challenges with this approach. Navigating within the iframe\nshould update the browser url. I solve this with AngularJS communicating to the\nparent Angular via postMessage. Opening a link within the AngularJS app to a new\ntab should work. I solve this by having AngularJS detect that is is not in an\niframe and change the location so it can be routed by Angular. Clicking on links\nto the legacy app in Angular should have the AngularJS app in the iframe jump to\nthose links without re-bootstrapping the AngularJS app. I solve this by having\nthe parent Angular postMessage to the AngularJS in the iframe. Because if I just\nset the iframe src url, then AngularJS would have to re-bootstrap. Another\nchallenge is keeping the iframe sized so scrolling works ok. I solve this,\nsadly, by polling.\n\nThis library contains a component and a service to be able to interact with your\nlegacy AngularJS app from within your Angular app.\n\nThis project is alpha quality, and very experimental. I hope to put it into\nproduction eventually, but have not yet. I am open to ideas for how this\ntechnique could be improved. Let me know, thanks!\n\nThe structure of this project is very closely derived from\nhttps://github.com/trekhleb/angular-library-seed\n\n## Demo Server\n\nTo run the demo server, `cd demo` and `npm i` and `npm start`\n\n## Questions, comments\n\nLet me know, here or on twitter, I'm @bkinsey808\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkinsey808%2Fng-single-iframe-upgrade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkinsey808%2Fng-single-iframe-upgrade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkinsey808%2Fng-single-iframe-upgrade/lists"}