{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/10552","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/10552/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/10552/comments","events_url":"https://api.github.com/repos/angular/angular/issues/10552/events","html_url":"https://github.com/angular/angular/issues/10552","id":169793021,"number":10552,"title":"NgModule on Large Projects","user":{"login":"jpsfs","id":1041209,"avatar_url":"https://avatars.githubusercontent.com/u/1041209?v=3","gravatar_id":"","url":"https://api.github.com/users/jpsfs","html_url":"https://github.com/jpsfs","followers_url":"https://api.github.com/users/jpsfs/followers","following_url":"https://api.github.com/users/jpsfs/following{/other_user}","gists_url":"https://api.github.com/users/jpsfs/gists{/gist_id}","starred_url":"https://api.github.com/users/jpsfs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpsfs/subscriptions","organizations_url":"https://api.github.com/users/jpsfs/orgs","repos_url":"https://api.github.com/users/jpsfs/repos","events_url":"https://api.github.com/users/jpsfs/events{/privacy}","received_events_url":"https://api.github.com/users/jpsfs/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":51,"created_at":"2016-08-07T11:57:31Z","updated_at":"2016-08-21T19:35:23Z","closed_at":null,"body":"**I'm submitting a ...**  (check one with \"x\")\r\n```\r\n[X] feature request / proposal\r\n```\r\n\r\nI've been reading about NgModule and I want to lay out some use cases that I'm not entirely sure the current proposal (https://docs.google.com/document/d/1isijHlib4fnukj-UxX5X1eWdUar6UkiGKPDFlOuNy1U/pub) takes into consideration.\r\n\r\n**Context**\r\n\r\nI'm part of a team building an Enterprise Framework (based on Angular 2). This framework will then be the base for other apps within the same ecosystem. \r\n\r\nWe have divided the framework into smaller projects/modules (think of them as separated npm packages). These modules are sets of controls (that are then reused across other modules) or pages that use those controls.\r\n\r\n**Example**\r\n\r\nA quick example can be:\r\n\r\n> Controls Module\r\n\r\n```ts\r\nimport {Component} from \"@angular/core\";\r\n\r\n@Component({\r\n   selector: \"my-combobox\",\r\n   ...\r\n})\r\nexport class MyComboBox{\r\n\r\n}\r\n``` \r\n\r\n> Checklist Module\r\n// Checklist module depends on Controls module. Controls is treated as a 3rd party module.\r\n\r\n```ts\r\nimport {Component} from \"@angular/core\";\r\nimport {MyComboBox} from \"controlsmodule/components/mycombobox\";\r\n// Please note that we are only loading a specific component within the module, not all components inside that module.\r\n\r\n@Component({\r\n     selector: \"my-checklist-page\",\r\n     directives: [MyComboBox, ...],\r\n     ...\r\n})\r\nexport class ChecklistPage{\r\n\r\n}\r\n```\r\n\r\nBootstrap doesn't know both Controls and Checklist modules. They are lazy loaded depending user's interaction. In this case, if the user navigates to a Checklist, the ChecklistPage component will be loaded and then the MyComboBox will also follow (because of the *import* made by ChecklistPage)\r\n\r\nChecklist module has other dozen components. Each depending on other dozen components from multiple modules.\r\n\r\nIt's impractical (not to say nearly impossible) to have all components imported into the NgModule declaration. We are talking of several hundreds of components that *might* be used during app run time.\r\n\r\nAlso, the application needs to be modular and lazy load when possible. Different interactions within the app will lead to completely different modules being loaded.\r\n\r\n**Expected/desired behavior**\r\n\r\nThe current solution, with component scoped directives, works like a charm for this use case. Not sure how this will play out with NgModule.\r\n\r\nMore than that, currently we can clearly see the dependencies needed by each component (in this case ChecklistPage). Making maintenance that much more easy.\r\n\r\nHaving all needed components imported into a NgModule, and then using them indistinctly on several components seems a fantastic solution for small applications. I feel that on a long term development, with several iterations across multiple years, with team rotation, ... having each component explicitly state on what it depends without looking into the template (and having compilation errors when something is missing) is a great advantage.\r\n\r\n**Conclusion**\r\n\r\nPlease let me know if I was clear in my explanation. The goal of this issue is to raise awareness about this situation and get feedback from you on how to proceed.\r\n\r\nWe are available to show you our current work, we have several hundred Angular 2 components across 8 projects developed in the last year (since alpha 27)."},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/241276921","html_url":"https://github.com/angular/angular/issues/10552#issuecomment-241276921","issue_url":"https://api.github.com/repos/angular/angular/issues/10552","id":241276921,"user":{"login":"radusuciu","id":1108600,"avatar_url":"https://avatars.githubusercontent.com/u/1108600?v=3","gravatar_id":"","url":"https://api.github.com/users/radusuciu","html_url":"https://github.com/radusuciu","followers_url":"https://api.github.com/users/radusuciu/followers","following_url":"https://api.github.com/users/radusuciu/following{/other_user}","gists_url":"https://api.github.com/users/radusuciu/gists{/gist_id}","starred_url":"https://api.github.com/users/radusuciu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/radusuciu/subscriptions","organizations_url":"https://api.github.com/users/radusuciu/orgs","repos_url":"https://api.github.com/users/radusuciu/repos","events_url":"https://api.github.com/users/radusuciu/events{/privacy}","received_events_url":"https://api.github.com/users/radusuciu/received_events","type":"User","site_admin":false},"created_at":"2016-08-21T19:35:23Z","updated_at":"2016-08-21T19:35:23Z","body":"This change has added a significant degree of complexity, both in terms of overall LOC and mental modeling of component dependencies. My component files are slightly cleaner but at the expense of explicit and in-place dependency definition and comes with the addition of redundant feeling .module files. \r\n\r\nReducing boilerplate sounds like a good thing but I would argue that it can be overdone. Further, it seems that this particular boilerplate reduction effort results is better described as a movement of boiler-plate as opposed to an outright reduction.\r\n\r\nI think angular is trending towards more difficult an complex quickstarts. There's already quite a bit to deal with in terms of toolchain setup and the list of files and things that must be understood (if one is to adhere to best practices) for even the most barebone application is growing."}}
{"actor":{"display_login":"radusuciu"}}