Skip to content

ES6 modules migration

gberaudo edited this page Nov 22, 2017 · 19 revisions

ES6 modules migration

Preparation

Modular Angular architecture

Previous architecture / shortcomings

  • a unique "one-ring to rule them all" ngeo Angular module (+ one for gmf)
  • src/ngeo.js / contribs/gmf/src/gmf.js is an holdall (namespace, root Angular module, ...)
  • each Angular piece of code goog.require('ngeo') and registers itself into the "one-ring" module;
  • a ton of "ignore unused require" annotations.

New modulular architecture:

  • the ngeo namespace stays in src/ngeo.js
  • the ngeo Angular module moves to src/module.js and is renamed "ngeo.module"
  • the dist entrypoint is created in src/distmodule.js and is named "ngeo.distmodule" it requires all top level Angular modules and extras and add them to its dependencies. It is used to generate dist/ngeo.js containing all the library
  • each Angular file is wrapped in a dedicated Angular module and exports is the Angular module itself ex for a component: goog.module('ngeo.mycomponent') ... exports = angular.module('ngeo.mycomponent', dependencies).component('ngeo.mycomponent', descr) if the component requires some other service / partial, it should require them and add their modules as dependencies (use [] if no dependency) the created angular module is added as dependency to the "one-ring" module (with ngeo.module.dependencies.push(theModule.name))
  • Angular files are grouped in Angular "top level" modules Ex: the search top level module goog.requires the searchdirective (module) and adds it as dependency How to split the library in consistent toplevel modules is to be discussed with someone like Stéphane and Alexandre
  • partials, services, ... are moved to the directory of their top level Angular module, there are no more "partials" or "services" directories Angular submodules goog.require their content and add them as dependencies:
  • Some code may be very specific or requiring extra dependencies compared to the rest of the module. In that cases an extra module is created next to the toplevel module: ex: search/extramodule.js where all these Angular files are added as dependencies.

Notes: Applications are expected to require toplevel Angular modules. When they require more they will also depend on individual pieces of code. During migration, the modules of Angular files are added as dependencies both to:

  • the "one-ring" ngeo Angular module (legacy);
  • its top level or extra module. At the end of the migration we will remove the "one-ring" module (and the associated goog.require and module.dependencies.push code)
Clone this wiki locally