Idea - no more Module() / Module.add() (optional)

[egor-smirnov]

Thank you for your brilliant work!

I have one idea. While transitioning application to usage of decorators you've created, I thought that we could get rid of Module and Module.add().

Let's think about angular.module() from some other perspective. We now have ES6 modules. This could lead to conclusion that angular.module()'s are just lines of extra code (which are not very necessary).

What do you think if components will be always registered under one module with predefined name (ie. angular-decorators)?

By default we'll have the behaviour we have at the moment (with Module and Module.add()). But we could also have an API to switch on behaviour I am describing in this ticket.

if this is something that might look interesting, I will provide more concrete examples of how I am envisioning all that stuff.

[MikeRyanDev]

Hi Egor,

Haven't overlooked this issue. I'd be interested in seeing a proof-of-concept of what this would look like. A few considerations to keep in mind:

• Need to be able to catch and warn about naming conflicts, especially for services
• In unit tests it is typically advantageous to mock out a module that only contains the service or component you are unit testing
• Need to be able to declare module dependencies anywhere

[egor-smirnov]

Hi Mike. Here is how I see it.

components/someComponent/someComponent.js

import {Component, Inject} from 'angular-decorators';

@Component({ selector : 'some-component' })
export default class SomeComponent {
    constructor() {}
}

app.js

import 'angular-ui-router';
import 'angular-ui-bootstrap';
import {Module} from 'angular-decorators';

// this 'singleModuleMode' is an optional behaviour, by default we have behaviour we have right now

Module.enableSingleModuleMode();

// this method sets module used by all the decorators, additionally accepting list of dependant modules
// will throw exception if module with this name already exists
// inside it will call 'angular.module()'

Module.setModule('companyName.core', ['ui.router', 'ui.bootstrap']);

// now we just import components without 'Module.add'

import SomeComponent from './someComponent/someComponent.js';

[egor-smirnov]

About various points from your post:

Need to be able to catch and warn about naming conflicts, especially for services

I guess this could be done with usage of this package - https://github.com/bahmutov/stop-angular-overrides. I am finding it really nice and no need to reimplement all this stuff ourselves.

In unit tests it is typically advantageous to mock out a module that only contains the service or component you are unit testing

Unfortunately, with approach I am proposing I don't see any possibilities to do so. User will have to instantiate the whole module which was set by Module.setModule.

Need to be able to declare module dependencies anywhere

If I understand this correctly signature if Module.setModule already will have this feature.

[MikeRyanDev]

Hi Egor,

I'm working with a few other annotation library authors to create a unified library. You can view and comment on the design doc here: https://docs.google.com/document/d/1oq0T0-jicGzc5uYJc0LE1ZBHm0w1lhVB4IVqUPXWSCg/edit

We're actively working on ideas for using just vanilla ES6 modules instead of angular modules. I'd appreciate any input you may have as what this would look like over in the design doc.

Thanks!