Webpack 2 and Angular 1: exporting and import modules

Question

Hope to get some clarification on why the following doesn't work as expected, hopefully, it's something easy I may have overlooked. Without Webpack the current implementation works as expected.

Ideally, would like to keep current implementation, I feel registering the component/controller/etc should be done in its own file and just point to the relative module. But if this isn't best practice I'd also like to see another suggestion.

File root.module is where I define the root module and then in the root.component file I tack on the component to that module.

Current implementation that doesn't import the module:

//root.component.js
'use strict';

var root = {
  template: require('./root.html')
};

module.exports = angular
  .module('root')
  .component('root', root);
'use strict';

//root.module.js
module.exports = angular
    .module('root', [
        require('./common').name,
        require('./components').name
    ]);

If I do the following works and loads module as expected:

//root.component.js
'use strict';

var root = {
  template: require('./root.html')
};
module.exports = root;

//root.module.js
'use strict';

module.exports = angular
  .module('root', [
    require('./common').name,
    require('./components').name
  ])
  .component('root', require('./root.component'));

Current directory tree:

├── ./src
│   ├── ./src/app
│   │   ├── ./src/app/app.less
│   │   ├── ./src/app/app.spec.js
│   │   ├── ./src/app/common
│   │   │   ├── ./src/app/common/app.component.js
│   │   │   ├── ./src/app/common/app.controller.js
│   │   │   ├── ./src/app/common/app.html
│   │   │   ├── ./src/app/common/footer
│   │   │   │   ├── ./src/app/common/footer/app-footer.component.js
│   │   │   │   ├── ./src/app/common/footer/app-footer.controller.js
│   │   │   │   ├── ./src/app/common/footer/app-footer.html
│   │   │   │   └── ./src/app/common/footer/index.js
│   │   │   ├── ./src/app/common/header
│   │   │   │   ├── ./src/app/common/header/app-nav.component.js
│   │   │   │   ├── ./src/app/common/header/app-nav.controller.js
│   │   │   │   ├── ./src/app/common/header/app-nav.html
│   │   │   │   └── ./src/app/common/header/index.js
│   │   │   ├── ./src/app/common/index.js
│   │   │   └── ./src/app/common/sideBar
│   │   │       ├── ./src/app/common/sideBar/app-sidebar.component.js
│   │   │       ├── ./src/app/common/sideBar/app-sidebar.controller.js
│   │   │       ├── ./src/app/common/sideBar/app-sidebar.html
│   │   │       └── ./src/app/common/sideBar/index.js
│   │   ├── ./src/app/components
│   │   │   ├── ./src/app/components/auth
│   │   │   │   ├── ./src/app/components/auth/auth-form
│   │   │   │   │   ├── ./src/app/components/auth/auth-form/auth-form.component.js
│   │   │   │   │   ├── ./src/app/components/auth/auth-form/auth-form.controller.js
│   │   │   │   │   ├── ./src/app/components/auth/auth-form/auth-form.html
│   │   │   │   │   └── ./src/app/components/auth/auth-form/index.js
│   │   │   │   ├── ./src/app/components/auth/auth.service.js
│   │   │   │   ├── ./src/app/components/auth/auth.user.js
│   │   │   │   ├── ./src/app/components/auth/index.js
│   │   │   │   ├── ./src/app/components/auth/login
│   │   │   │   │   ├── ./src/app/components/auth/login/index.js
│   │   │   │   │   ├── ./src/app/components/auth/login/login.component.js
│   │   │   │   │   ├── ./src/app/components/auth/login/login.controller.js
│   │   │   │   │   └── ./src/app/components/auth/login/login.html
│   │   │   │   └── ./src/app/components/auth/register
│   │   │   │       ├── ./src/app/components/auth/register/index.js
│   │   │   │       ├── ./src/app/components/auth/register/register.component.js
│   │   │   │       ├── ./src/app/components/auth/register/register.controller.js
│   │   │   │       └── ./src/app/components/auth/register/register.html
│   │   │   └── ./src/app/components/index.js
│   │   ├── ./src/app/root.component.js
│   │   ├── ./src/app/root.html
│   │   └── ./src/app/root.module.js
│   └── ./src/index.ejs
└── ./webpack.config.js

Answer 1

A file should be imported (or more precisely, required, because the application relies on CommonJS modules) in order for it to be executed.

In the first snippet root.module.js doesn't contain require('./root.component'), so root.component.js is never executed.

It should be

//root.module.js
module.exports = anglar
  .module('root', [
    require('./common').name,
    require('./components').name
  ])
  .component('root', require('./root.component'));

require('./root.component');

Notice that root.component.js should be required after root module was defined, doing these in opposite order will result in $injector:modulerr error.

The proven way to eliminate race conditions and utilize modularity is to have one Angular module per one file. In this case it doesn't matter in which order the files are required. It is conventional to export and import module's name property from files that contain Angular modules:

//root.component.js
module.exports = angular.module('root.rootComponent', [])
  .component('root', {
    template: require('./root.html')
  })
  .name;

//root.module.js
var rootComponentModule = require('./root.component');
var commonModule = require('./common');
var componentsModule = require('./components');

module.exports = angular
    .module('root', [
        rootComponentModule,
        commonModule,
        componentsModule
    ])
    .name;

This recipe allows to maintain well-arranged deep hierarchy of highly modular units. This is beneficial for code reusing and testing.

Answer 2

just want to share my approach with you. I'm using it for quite some time already and it works perfectly.

// src/components/foo/foo.component.js

import './foo.scss';

export class FooComponent {
    static NAME    = 'foo';
    static OPTIONS = {
        controller: FooComponent,
        template  : require('./foo.template.html'),
        bindings  : {},
    };

    constructor(FooService) {
        'ngInject';
        this._FooService = FooService;
    }

    $onInit() { /* ... */ }
    $onDestroy() { /* ... */ }
    /* ... */
}

// src/components/foo/foo.service.js

export class FooService {
    /* ... */
}


// src/components/foo/index.js

import { FooComponent } from './foo.component';
import { FooService } from './foo.service';

export const FOO_COMPONENT = angular.module('components.foo', [])
    .service('FooService', FooService)        
    .component(FooComponent.NAME, FooComponent.OPTIONS)
    .name;


// src/components/index.js

export { FOO_COMPONENT } from './foo';
export { BAR_COMPONENT } from './bar';
/* ... */


// src/app/users/index.js
import { CORE } from 'shared/core';

import { 
    FOO_COMPONENT,
    BAR_COMPONENT,
} from 'components';

import { USERS_LIST_COMPONENT } from './users-list';
import { USER_PROFILE_COMPONENT } from './user-profile';

/* ... */

export const USERS_MODULE = angular
    .module('app.users', [
        CORE,
        FOO_COMPONENT,
        BAR_COMPONENT,
        USERS_LIST_COMPONENT,
        USER_PROFILE_COMPONENT,
    ])
    .name


// src/app/index.js
import { USERS_MODULE } from './users';
import { PRODUCTS_MODULE } from './users';

import { AppComponent } from './app.component';

export const APP_MODULE = angular
    .module('app', [
        USERS_MODULE,
        PRODUCTS_MODULE,
    ])
    .component(AppComponent.NAME, AppComponent.OPTIONS)
    .name;