{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/772","repository_url":"https://api.github.com/repos/NativeScript/nativescript-angular","labels_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/772/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/772/comments","events_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/772/events","html_url":"https://github.com/NativeScript/nativescript-angular/pull/772","id":225294295,"number":772,"title":"feat(Modal): allow modal to be lazily loaded from a module on demand","user":{"login":"NathanWalker","id":457187,"avatar_url":"https://avatars1.githubusercontent.com/u/457187?v=3","gravatar_id":"","url":"https://api.github.com/users/NathanWalker","html_url":"https://github.com/NathanWalker","followers_url":"https://api.github.com/users/NathanWalker/followers","following_url":"https://api.github.com/users/NathanWalker/following{/other_user}","gists_url":"https://api.github.com/users/NathanWalker/gists{/gist_id}","starred_url":"https://api.github.com/users/NathanWalker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NathanWalker/subscriptions","organizations_url":"https://api.github.com/users/NathanWalker/orgs","repos_url":"https://api.github.com/users/NathanWalker/repos","events_url":"https://api.github.com/users/NathanWalker/events{/privacy}","received_events_url":"https://api.github.com/users/NathanWalker/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-04-30T00:15:02Z","updated_at":"2017-05-08T13:11:05Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/pulls/772","html_url":"https://github.com/NativeScript/nativescript-angular/pull/772","diff_url":"https://github.com/NativeScript/nativescript-angular/pull/772.diff","patch_url":"https://github.com/NativeScript/nativescript-angular/pull/772.patch"},"body":"* Allows a `NgModule` to be lazily loaded **on-demand** (ie, via tap of a button **without a route config**) using the [NSModuleFactoryLoader](https://github.com/NativeScript/nativescript-angular/blob/master/nativescript-angular/router/ns-module-factory-loader.ts)\r\n* Allows a `Component` to be opened in a modal even if it was lazily loaded on demand\r\n* Does not disrupt any current api's\r\n* No breaking changes\r\n* Provides tests for this feature (could be cleaned up with some help)\r\n* Also cleans up `template` usage throughout tests to use Angular 4 `ng-template`\r\n\r\nAssuming usage of the following in the module and/or a component's providers:\r\n```\r\n  ...\r\n  providers: [\r\n    { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }\r\n  ]\r\n  ...\r\n```\r\n\r\nExample Usage in a `Component`:\r\n\r\n```\r\nconstructor(\r\n  private moduleLoader: NgModuleFactoryLoader, \r\n  private vcRef: ViewContainerRef,\r\n  private modalService: ModalDialogService\r\n) {}\r\n\r\npublic buttonTap() {\r\n  // could be wired to any button (tap) event in a component view, etc.\r\n\r\n  // Lazily load a module, gain access to a component from that new module\r\n  // immediately open the new lazily loaded component in a modal\r\n  (<NSModuleFactoryLoader>this.moduleLoader)\r\n    .loadAndCompileComponents('./lazy-loaded.module#LazyModule')\r\n    .then((mod: ModuleWithComponentFactories<any>) => {\r\n      const moduleRef = mod.ngModuleFactory.create(this.vcRef.parentInjector);\r\n      // find component factory to ref the correct componentType\r\n      let lazyCmpFactory: ComponentFactory<any>;\r\n      for (let cmp of mod.componentFactories) {\r\n        if (cmp.selector === \"modal-lazy-comp\") { // find by Component's selector\r\n          lazyCmpFactory = cmp;\r\n          break;\r\n        }\r\n      }\r\n                    \r\n      this.modalService.showModal(lazyCmpFactory.componentType, {\r\n        moduleRef,\r\n        viewContainerRef: this.vcRef,\r\n        context: {}\r\n      });\r\n  });\r\n}\r\n```\r\n\r\n/cc @vakrilov \r\n"},"comment":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/comments/299862496","html_url":"https://github.com/NativeScript/nativescript-angular/pull/772#issuecomment-299862496","issue_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/772","id":299862496,"user":{"login":"sis0k0","id":7893485,"avatar_url":"https://avatars1.githubusercontent.com/u/7893485?v=3","gravatar_id":"","url":"https://api.github.com/users/sis0k0","html_url":"https://github.com/sis0k0","followers_url":"https://api.github.com/users/sis0k0/followers","following_url":"https://api.github.com/users/sis0k0/following{/other_user}","gists_url":"https://api.github.com/users/sis0k0/gists{/gist_id}","starred_url":"https://api.github.com/users/sis0k0/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sis0k0/subscriptions","organizations_url":"https://api.github.com/users/sis0k0/orgs","repos_url":"https://api.github.com/users/sis0k0/repos","events_url":"https://api.github.com/users/sis0k0/events{/privacy}","received_events_url":"https://api.github.com/users/sis0k0/received_events","type":"User","site_admin":false},"created_at":"2017-05-08T13:11:05Z","updated_at":"2017-05-08T13:11:05Z","body":"Hey, @NathanWalker!\r\n\r\nAwesome PR! Can you attach a project with example usage, so we can integrate it in our e2e tests?"}}
{"actor":{"display_login":"sis0k0"}}