2

Angular 2+ offers Modules (NgModule)s that "configure the injector and the compiler and help organize related things together." They are another layer of code organization, to facilitate modularity of parts of large scale applications.

I am NOT talking about Node modules. Angular has those too. NgModule is unrelated to that.

So far in learning Vue.js, I'm not coming across anything that is analogous to NgModule. Searching for this information was not fruitful on search engines. Is there anything? Or does Vue.js in some way make them not necessary?

R. Richards
  • 24,603
  • 10
  • 64
  • 64
BBaysinger
  • 6,614
  • 13
  • 63
  • 132
  • 1
    You do it manually with explicit file `import`/`export` statements. I guess the loosest comparable idea might by [Vue Plugins](https://vuejs.org/v2/guide/plugins.html). But they aren't necessary. – zero298 Jul 29 '19 at 18:56
  • @zero298, Angular has import/export as well for Node modules, which isn't related to NgModule. I'm not totally sure you are understanding the question. – BBaysinger Jul 29 '19 at 19:07

2 Answers2

3

They are another layer of code organization, to facilitate modularity of parts of large scale applications.

No, ngModule is the only way the Angular ahead-of-time compiler can discover, walk and tree shake providers that are not required for the project. This includes things like components, directives, services, etc that you would define in modules.

So far in learning Vue.js, I'm not coming across anything that is analogous to NgModule.

You shouldn't because this is an Angular specific feature. Vue has no dependency injection or lazy loading as a core feature.

Or does Vue.js in some way make them not necessary?

You might be confusing Angular NgModules with JavaScript modules. The two are not the same, because Angular uses NgModules to make it's dependency injection system work. Without the DI there really is no need for NgModule. Angular would then work the same way Vue and React work, and use the JavaScript import to resolve dependencies.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • 1
    I am definitely not confusing them. I know at least one module is required for any Angular application, but their role is more of a key factor (arguably essential) in large scale applications, and that is part of why they exist. This is one of the reasons Angular is considered better for larger app development. I'm not totally sure about your suggestion that they are only for dependency injection and lazy loading. – BBaysinger Jul 29 '19 at 19:05
  • @BBaysinger no, at least one module is required for dependency injection. Without a module there is no **root** injector, and without a root injector you can't have an Angular application. If you could strip out the dependency injection engine from Angular, then you would no longer need `NgModule` and you would have a framework that looks more like Vue. – Reactgular Jul 29 '19 at 19:41
  • Are you saying that there is absolutely no other reason for NgModule than dependency injection? Because the Angular documentation says otherwise. And you correct me, then say in more elaborate form that you can not have an Angular app without a module. – BBaysinger Jul 29 '19 at 20:36
3

Angular is an opinionated (I don't mean that as a negative) and monolithic framework. It uses ngModules for organization. They are a benefit by default. Vue is a progressive framework that allows you to include as much or as little as you want.

Vue Plugins allow for mass registration of components if you need it, but you can just as easily narrow your dependency tree using explicit import/export statements.

Vue Bootstrap has a Vue Plugin mechanism that allows you to include all of the features outright including the custom elements it provides but also allows you to import each component individually if that is what you want.

Angular Powered Bootstrap provides an ngModule in much the same way but also allows you to include components piecemeal if you want.

The key thing here is that Vue tries to be as non-opinionated as possible and lets you configure how you want dependencies included whereas Angular wants you to do everything its way. Neither way is outright better than the other. You benefit from knowing how do to things by default with the opinionated way vs having way too many choices with the non-opinionated way.

Consider this question, how do you perform network requests with each of these frameworks? The answer is obvious for Angular: HttpClient. However, you can use whatever request library you want in Vue, be it fetch, axios, jQuery.get() or anything else as long as you appropriately deal with Vue's reactivity model. You can likely do the same thing in Angular, but you're going outside of Angular's suggested approach.

You likely don't see a lot of documentation about comparable things to ngModule because Vue doesn't really push for organization in that manner. Again, not a judgement, it's just a difference in how the frameworks are intended.

tony19
  • 125,647
  • 18
  • 229
  • 307
zero298
  • 25,467
  • 10
  • 75
  • 100
  • `It uses ngModules for organization` so based upon this logic. You're telling me that the Angular team decided to force every project to execute JavaScript at **run-time** just so that people could *organizate* their source code? No, we don't use `NgModule` to *organize* things. You want to organize your project then use folders on your hard drive. `NgModules` are a technical requirement that allows the dependency manager to work, and if we **didn't** have to use them we wouldn't use them. I can organize my projects in Vue/React just fine without them, but DI doesn't work without it. – Reactgular Jul 29 '19 at 19:38
  • @Reactgular Then why do the [docs say](https://angular.io/guide/ngmodules#ngmodules) "NgModules configure the injector and the compiler **and help organize related things together**."? I don't understand what you are disagreeing with in my answer. Vue plugins are the most analogous thing to ngModules within Vue. I have stated why by citing what they can be used to do and how certain libraries accomplish the same goals using these 2 pieces. – zero298 Jul 29 '19 at 19:52
  • @Reactgular Is the issue that I say organization without mentioning its other functionality? I'm looking at this from Vue's perspective. DI with Vue is using `import`/`export` and using either `Vue.use()` or declaring component dependencies with the `components` property object. It doesn't need the functionality that `ngModules` supplies. – zero298 Jul 29 '19 at 20:00
  • I feel the answer implies that `NgModule` is part of an app's architectural design. In the organizing of how features come together. Which is a *common* misconception because it has the word "module" in it. People infer it works like other module things and that's maybe why I have an issue with the answer, because it continues an already existing bias that it solves an organizing problem. – Reactgular Jul 29 '19 at 20:03
  • The Angular team should have named it `NgProviders` which would have been a far more accurate name of what it actually does and what problem it is solving. – Reactgular Jul 29 '19 at 20:03
  • 1
    I reverted my downvote :) It's my bad for answering a broad opinionated question. I should have known better. – Reactgular Jul 29 '19 at 20:05
  • What is opinionated or broad about my question? – BBaysinger Jul 29 '19 at 20:40
  • 2
    @BBaysinger I think it might be considered too broad because it is asking for a comparison to be drawn between two languages/frameworks that seem to have a comparable feature, but may or may not. Consider why [What are the differences between Generics in C# and Java… and Templates in C++?](https://stackoverflow.com/q/31693/691711) was closed as too broad. However, I think you might want to consider your question a success considering you have 4 upvotes and 2 answers trying to help you. Don't get hung up on votes, especially when you're technically winning. – zero298 Jul 29 '19 at 20:53
  • Ok, because I think I'm asking *if* such a feature exists, which I believed would be a yes or no question. I haven't gotten far enough into Vue to see how the features you mentioned compare. – BBaysinger Jul 29 '19 at 20:58