Create module per component/service

[SamVerschueren]

At the moment, we only have one global module where all the services, components, ... are defined in. This is not entirely correct. If we have this tree

- A
  |--- B
  |--- C
       |--- D

Where D is defined like this

@Component({
    providers: [C]
})
class D {
    constructor(private c: C) {

    }
}

D only should be available for all the children of C. But because they are now placed in the global module, D will also be available for B.

Solution

Create an angular.module() per component, service, ... Inject the modules accordingly.

For the example above, it would look like.

const aModule = angular.module('A', []);
const bModule = angular.module('B', []);
const dModule = angular.module('D', []);
const cModule = angular.module('C', ['D']);

which will limit the usage of D to everything inside the C module.

[SamVerschueren]

This doesn't work because angular 1 only has one DI, unless we would implement our own DI system.