Using Webpack to bring in AngularJS modules

Question

Using Webpack to bring in AngularJS modules

Our current project is transitioning from AngularJS to Angular 4, and as part of this process, we are first rewriting everything in TypeScript and converting AngularJS components. To facilitate this transition, we have set up a new project using AngularJS + Webpack + TypeScript, where we are converting legacy AngularJS modules to TypeScript. However, due to the size of the project, we need to temporarily include the 'old' AngularJS modules and execute their scripts to ensure that the project functions correctly.

We are facing challenges in integrating these old modules into our project structure. Our app.module.ts file looks something like this:

import * as angular from 'angular';
import { moduleName as convertedModule1 } from './app/converted.module1';
import { moduleName as convertedModule2 } from './app/converted.module2';

export const moduleName =
    angular.module('application', [
        convertedModule1,
        convertedModule2,
        'legacy_module_3',
        'legacy_module_4'
    ]).name;

While convertedModule1 and convertedModule2 have been successfully migrated to TypeScript, 'legacy_module_3' and 'legacy_module_4' remain in their original AngularJS form. We are looking for a way to reference these old modules (located at '/frontend/module3.js' and '/frontend/module4.js') within our webpack setup so that their JavaScript code can be executed. Any suggestions on how we can achieve this integration?

angularjs typescript webpack

Answer 1

Answer №1

Instead of tackling each module individually, consider taking the plunge and doing a minimal conversion on everything at once.

I recently underwent a similar process when converting an existing angularjs project to utilize webpack. The changes required for each module were minor enough that I decided to convert all modules in one go. For instance:

angular.module('somemodule').controller(function(){ ... })

was converted to:

export default function SomeController() { ... }

and the module declaration files now look like this:

import SomeController from './some.controller'
export default angular.module('SomeModule', [])
.controller(SomeController)
.name;

At the top level:

import SomeModule from './some/module'
angular.module('app', [ SomeModule ]);

It took some time, but since most changes were straightforward, I was able to methodically work through the entire application. In some sub-folders where only the 'app' module name was used, I simply added a 'module.js' file with an appropriate module name, with no other significant changes needed.

I also had to convert all template urls into imports and imported the '.scss' file at the top level of the app (although it wasn't strictly necessary).

The next step will involve converting controllers and directives into components, which should be a relatively simple task at this point.

Answer 2

Instead of tackling each module individually, consider taking the plunge and doing a minimal conversion on everything at once.

I recently underwent a similar process when converting an existing angularjs project to utilize webpack. The changes required for each module were minor enough that I decided to convert all modules in one go. For instance:

angular.module('somemodule').controller(function(){ ... })

was converted to:

export default function SomeController() { ... }

and the module declaration files now look like this:

import SomeController from './some.controller'
export default angular.module('SomeModule', [])
.controller(SomeController)
.name;

At the top level:

import SomeModule from './some/module'
angular.module('app', [ SomeModule ]);

It took some time, but since most changes were straightforward, I was able to methodically work through the entire application. In some sub-folders where only the 'app' module name was used, I simply added a 'module.js' file with an appropriate module name, with no other significant changes needed.

I also had to convert all template urls into imports and imported the '.scss' file at the top level of the app (although it wasn't strictly necessary).

The next step will involve converting controllers and directives into components, which should be a relatively simple task at this point.

Answer 3

Answer №2

To organize your code properly, make sure to export each of your modules and then import them into your main app module. Take a look at this example:

// Import your other TypeScript modules
import module3 from './frontend/module3.js' // Make sure to use relative paths
import module4 from './frontend/module4.js'

export const moduleName =
    angular.module('application', [
        module1,
        module2,
        module3.name ,
        module4.name
    ]).name;

Additionally, remember that your old JavaScript modules must also export a module:

For example, the filters module.

import angular from 'angular';
import myNiceFilter from './myNiceFilter.filter';

var filters = angular.module('filters',[]);
filters.filter('myNiceFilter', myNiceFilter);

export default filters;

Answer 4

To organize your code properly, make sure to export each of your modules and then import them into your main app module. Take a look at this example:

// Import your other TypeScript modules
import module3 from './frontend/module3.js' // Make sure to use relative paths
import module4 from './frontend/module4.js'

export const moduleName =
    angular.module('application', [
        module1,
        module2,
        module3.name ,
        module4.name
    ]).name;

Additionally, remember that your old JavaScript modules must also export a module:

For example, the filters module.

import angular from 'angular';
import myNiceFilter from './myNiceFilter.filter';

var filters = angular.module('filters',[]);
filters.filter('myNiceFilter', myNiceFilter);

export default filters;

Using Webpack to bring in AngularJS modules

Answer №1

Answer №2

Similar questions

Converting a TypeScript nested dictionary into a list of strings

Deciphering a mysterious message in Typescript while defining a function for one of my tasks

Utilizing System.import with Webpack 2 and React for splitting code and managing nested routes

Leveraging React and TypeScript's capabilities to pass around arguments efficiently

Will a JavaScript source map file continue to function properly even after the source code file has been minified?

Quick method for executing TypeScript files

Transform a string into a class in Typescript/Angular

Having issues with $timeout functionality in angular.js

angular does not update dynamically created dropdowns with populated arrays

Creating dynamic columns in tables using AngularJS by clicking on ng-repeat items

Dynamic scope variables in AngularJS are powerful tools that allow you

The integrity subresource feature in webpack does not have any impact or influence

Exploring Angular 5's BehaviourSubject for validating multiple email fields

Retrieve data upon component mounting and deactivate the query in React-query

What is the reason for the presence of additional mandatory dependencies in the package-lock.json file?

Filtering by element of an array in Angular.js

One function in Typescript lodash is missing a default export

React JS displayed the string of /static/media/~ instead of rendering its markdown content

Getting the specific information you need from a JSON object in Angular 2

Having trouble resolving React within the Formik/dist package due to a custom webpack configuration