Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

babel-plugin-ng-component-module

langdonx1381.0.4

Transforms the directive 'ngComponentModule' into a series of import/angular statements to lessen the amount of boilerplate.

readme

About

Writing import, export, angular.module, and angular.component statements all day long is no fun. This plugin automatically generates those statements after inspecting the filesystem at compile time.

It's being used in angular-2017-starter repo, where the components directory contains logically grouped components together that are lazy loaded on demand at runtime.

Given the following directory structure:

src/components/todo/
-------------------/index.js
-------------------/todo/
------------------------/todo.html
------------------------/todo.js
------------------------/todo.scss
src/components/todo/todo-list/
-----------------------------/todo-list.html
-----------------------------/todo-list.js
-----------------------------/todo-list.scss

Using 'ngComponentModule' inside todo/index.js will generate the following code prior to compilation:

import todo from './todo/todo'
import todoList from './todo-list/todo-list'
var todoModule = angular.module('app.todo', [])
todoModule.component(todo.name, todo)
todoModule.component(todoList.name, todoList)

To Do

  • Add some elaborate integration test
  • Allow for root namespace to be configured (perhaps 'ngModelComponent:app')
  • Maybe allow a comment (/* ngComponentModule */) in lieu of a directive
  • Maybe figure out how to add semicolons even though they're not necessary
  • Maybe figure out how to chain .component() calls off of .module() (hint: loop)

Note