Exporting and importing modules in Angular 1 using Webpack 2

Question

Exporting and importing modules in Angular 1 using Webpack 2

Seeking clarification on why the current implementation is not working as expected. It seems like a simple oversight, especially since it works fine without Webpack.

I prefer to stick with the current implementation, where each component/controller/etc is registered in its own file and then referenced in the relative module. However, if this approach is not considered best practice, I am open to alternative suggestions.

The root.module file defines the root module, and the root.component file adds the component to that module.

Current implementation that does not 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 modify the code as shown below, the module loads 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 structure:

├── ./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

javascript angularjs webpack angular-ui-router

Answer 1

Answer №1

One crucial step is to import a file (specifically using the require method, as the application depends on CommonJS modules) before it can be executed.

In a given scenario, if the file root.module.js does not include require('./root.component'), then the code in root.component.js will not run.

The correct sequence should therefore be:

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

require('./root.component');

Note that importing root.component.js must occur after defining the root module; reversing this order may lead to a $injector:modulerr error.

An effective way to prevent race conditions and promote modularity is by organizing one Angular module per file. In such cases, the file import order becomes less critical. It is customary to export and import the name property of an Angular module from files containing 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 approach facilitates managing a well-structured hierarchy of modular units, enhancing code reuse and simplifying testing.

Answer 2

One crucial step is to import a file (specifically using the require method, as the application depends on CommonJS modules) before it can be executed.

In a given scenario, if the file root.module.js does not include require('./root.component'), then the code in root.component.js will not run.

The correct sequence should therefore be:

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

require('./root.component');

Note that importing root.component.js must occur after defining the root module; reversing this order may lead to a $injector:modulerr error.

An effective way to prevent race conditions and promote modularity is by organizing one Angular module per file. In such cases, the file import order becomes less critical. It is customary to export and import the name property of an Angular module from files containing 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 approach facilitates managing a well-structured hierarchy of modular units, enhancing code reuse and simplifying testing.

Answer 3

Answer №2

Just wanted to share my personal approach that I've been using successfully for a while now.

// 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 './products';

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

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

Answer 4

Just wanted to share my personal approach that I've been using successfully for a while now.

// 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 './products';

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

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

Exporting and importing modules in Angular 1 using Webpack 2

Answer №1

Answer №2

Similar questions

Removing an HTML element entirely

"Learn the process of incorporating a trendline into a line chart using Highcharts by manipulating the

Combining NPM Script Commands: A Comprehensive Guide

Is there a way to bring in both a variable and a type from a single file in Typescript?

Looking for an alternative to document.querySelectorAll?

How can we integrate Cordova plugins into Vue-Cordova framework?

Reloading data in Angular using jQuery DataTables

What is the best way to add an element conditionally within a specific Vue Component scope?

ReactJS - Error: Attempting to access the property 'raw' of an undefined variable

Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Altering webpage content through the use of Ajax

Material UI Snackbar background color not able to be changed

Ways to limit date selection with JavaScript or jQuery

When a directive generates an element, the ng-click function may not function as expected

A new sub-schema has been created in the JSON schema specifically tailored to a certain property

Vue Router generates a URL containing %2F when dealing with slug routes

Is fs-extra the best tool for working with a .bundle file?

Field for user input along with a pair of interactive buttons

Using v-on:click to dynamically update multiple sections of content in a Vue.js and Liquid environment

Access the data within a jsonArray using Cypress