{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/22243","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/22243/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/22243/comments","events_url":"https://api.github.com/repos/angular/angular/issues/22243/events","html_url":"https://github.com/angular/angular/issues/22243","id":297555304,"number":22243,"title":"Feature Request: Support Dynamic, At-Runtime Lazy-Loading ","user":{"login":"bmbell","id":2934363,"avatar_url":"https://avatars3.githubusercontent.com/u/2934363?v=4","gravatar_id":"","url":"https://api.github.com/users/bmbell","html_url":"https://github.com/bmbell","followers_url":"https://api.github.com/users/bmbell/followers","following_url":"https://api.github.com/users/bmbell/following{/other_user}","gists_url":"https://api.github.com/users/bmbell/gists{/gist_id}","starred_url":"https://api.github.com/users/bmbell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bmbell/subscriptions","organizations_url":"https://api.github.com/users/bmbell/orgs","repos_url":"https://api.github.com/users/bmbell/repos","events_url":"https://api.github.com/users/bmbell/events{/privacy}","received_events_url":"https://api.github.com/users/bmbell/received_events","type":"User","site_admin":false},"labels":[{"id":375501288,"url":"https://api.github.com/repos/angular/angular/labels/comp:%20core%20&%20compiler","name":"comp: core & compiler","color":"c7def8","default":false},{"id":130606845,"url":"https://api.github.com/repos/angular/angular/labels/type:%20feature","name":"type: feature","color":"EEEEEE","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/angular/angular/milestones/82","html_url":"https://github.com/angular/angular/milestone/82","labels_url":"https://api.github.com/repos/angular/angular/milestones/82/labels","id":3045967,"number":82,"title":"Backlog","description":"Milestone for triaged issues that have not yet been scheduled for resolution.","creator":{"login":"IgorMinar","id":216296,"avatar_url":"https://avatars3.githubusercontent.com/u/216296?v=4","gravatar_id":"","url":"https://api.github.com/users/IgorMinar","html_url":"https://github.com/IgorMinar","followers_url":"https://api.github.com/users/IgorMinar/followers","following_url":"https://api.github.com/users/IgorMinar/following{/other_user}","gists_url":"https://api.github.com/users/IgorMinar/gists{/gist_id}","starred_url":"https://api.github.com/users/IgorMinar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IgorMinar/subscriptions","organizations_url":"https://api.github.com/users/IgorMinar/orgs","repos_url":"https://api.github.com/users/IgorMinar/repos","events_url":"https://api.github.com/users/IgorMinar/events{/privacy}","received_events_url":"https://api.github.com/users/IgorMinar/received_events","type":"User","site_admin":false},"open_issues":1443,"closed_issues":47,"state":"open","created_at":"2018-01-18T16:52:20Z","updated_at":"2018-02-16T08:49:37Z","due_on":null,"closed_at":null},"comments":2,"created_at":"2018-02-15T18:47:31Z","updated_at":"2018-02-16T13:45:50Z","closed_at":null,"author_association":"NONE","body":"<!--\r\nPLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.\r\n\r\nISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.\r\n-->\r\n\r\n## I'm submitting a...\r\n<!-- Check one of the following options with \"x\" -->\r\n<pre><code>\r\n[ ] Regression (a behavior that used to work and stopped working in a new release)\r\n[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->\r\n[x] Feature request\r\n[ ] Documentation issue or request\r\n[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n</code></pre>\r\n\r\n## Current behavior\r\n<!-- Describe how the issue manifests. -->\r\nCurrently, lazy loading is tightly-coupled to the Angular Router and also requires static declarations of the lazy-loaded routes in the primary Angular application.  Furthermore, the primary method of compilation of Angular applications (via webpack) requires the application to compile all parts of the application, including external dependencies such as npm libraries (which can be specified in the Angular Package Format).  \r\n\r\nThis scenario does not work well in an Enterprise environment unless all teams/applications are setup to be in one mono-repository (as recommended by Nrwl).  Unfortunately, this is not a realistic setup for many Enterprise environments, due to various issues.    The parent/host application should not be required to know much about the child application/module, and it should not have to compile the child application.\r\n\r\n## Expected behavior\r\n<!-- Describe what the desired behavior would be. -->\r\n\r\nThe child module needs to be compiled in a way that it can be dynamically loaded into the parent/host application at runtime.  The child module could have its own set of routes, which could be added to the parent/host application's routing table and the parent/host application could discover the child dynamically (e.g. via a web service, a file, etc).  \r\n\r\nThe parent/host application should not be required to compile the child modules.  While this may result in less code optimization and some repeated code, it is a necessary trade-off in an Enterprise environment that could have hundreds of applications, each in different repositories, scattered around the globe.\r\n\r\n## Minimal reproduction of the problem with instructions\r\n<!--\r\nFor bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via\r\nhttps://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).\r\n-->\r\nWith the current tooling and Angular documentation: \r\n\r\n1. Create two Angular applications using the Angular-CLI:\r\n   - App-A - The child module to be lazy-loaded\r\n   - Platform - The parent/host application that \r\n2. Use ng-packagr to turn App-A into a module that adheres to the Angular Package Format\r\n3. Host AppA in npm (or just fake it - move it over to the node_modules directory of the host application)\r\n4. Setup a simplerouting table of the Platform application (note this has to be declared statically):\r\n\r\n```\r\nconst routes: Routes = [\r\n  { path: \"\", component: HomeComponent },\r\n  { path: \"app-a\", loadChildren: \"../../node_modules/app-a\" }\r\n];\r\n\r\n@NgModule({\r\n    imports: [\r\n        RouterModule.forRoot(\r\n            routes\r\n        )\r\n    ],\r\n    exports: [\r\n        RouterModule\r\n    ]\r\n})\r\n```\r\n\r\n5. Observe that the Angular-Cli (or Webpack on its own) will compile the child application code with the parent/host application.  The child code will be separate from the parent code, but the webpack references will be heavily intertwined.  Furthermore, the parent/host module has to statically declare the existence of the child module before compilation.\r\n\r\n## What is the motivation / use case for changing the behavior?\r\n<!-- Describe the motivation or the concrete use case. -->\r\nThe above scenario is fairly easy to implement in AngularJS.  This is because the child modules could be loaded in script tags, and could register themselves with Angular without tightly coupling themselves to the parent/host module.  Therefore, Additional tooling, API-support, and/or walk-throughs for this scenario in Angular would really help Enterprise clients move from AngularJS to Angular.  \r\n\r\n## Environment\r\n\r\n<pre><code>\r\nAngular version: 5.*\r\nAngular-CLI version: 1.6.8\r\n</code>\r\n</pre>"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/366238900","html_url":"https://github.com/angular/angular/issues/22243#issuecomment-366238900","issue_url":"https://api.github.com/repos/angular/angular/issues/22243","id":366238900,"user":{"login":"mlc-mlapis","id":5693835,"avatar_url":"https://avatars3.githubusercontent.com/u/5693835?v=4","gravatar_id":"","url":"https://api.github.com/users/mlc-mlapis","html_url":"https://github.com/mlc-mlapis","followers_url":"https://api.github.com/users/mlc-mlapis/followers","following_url":"https://api.github.com/users/mlc-mlapis/following{/other_user}","gists_url":"https://api.github.com/users/mlc-mlapis/gists{/gist_id}","starred_url":"https://api.github.com/users/mlc-mlapis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mlc-mlapis/subscriptions","organizations_url":"https://api.github.com/users/mlc-mlapis/orgs","repos_url":"https://api.github.com/users/mlc-mlapis/repos","events_url":"https://api.github.com/users/mlc-mlapis/events{/privacy}","received_events_url":"https://api.github.com/users/mlc-mlapis/received_events","type":"User","site_admin":false},"created_at":"2018-02-16T13:45:50Z","updated_at":"2018-02-16T13:45:50Z","author_association":"NONE","body":"@bmbell ... it is true that especially adding additional routes from ad-hoc programmatically loaded modules (which have no route definitions in the main app till the moment of their loading) is the area which is has very poor / or none documentation and there are many unsolved / unclear points = very time consuming for anybody who wants to use that.\r\n\r\nThe comparison to .NET world would fine except the moment when you need .NET Framework to be installed to run these *.dll. And that is the area which is actually solvable either as `super optimized AOT tree-shakeble` process which is unique for each compilation build of the whole app or using just native shareable UMDs Angular libs (even with advantages of a browsers caches) when it is prepared for running of any NgModule.\r\n\r\n\r\n"}}
{"actor":{"display_login":"mlc-mlapis"}}