Import angularjs modules with webpack

Question

We've got a rather large project written in angularjs and are moving gradually to angular 4. The plan is to first rewrite everything to typescript + angularjs components. We've set up an empty angularjs+webpack+typescript project and are converting legacy angularjs modules to typescript. This works fine, but because of the size of the project we would like to add the 'old' angularjs modules for now and execute those scripts so we have a full working project.

I haven't found a way to make this work. So basically we've got (I've omitted some details for brevity):

app.module.ts:

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

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

So module1 and module2 are already converted typescript modules. Module 3 and module 4 not. We don't want to convert those yet but do want to reference them. Lets say those modules reside in '/frontend/module3.js' and '/frontend/module4.js', how would I make this work (executed js code) with webpack?

Answer 1

Consider just biting the bullet and doing minimal conversion on everything in one go.

I just went through a similar exercise converting an existing angularjs project to use webpack. The conversion needed for each module is small enough that I just converted all of the modules. So where we had:

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

I changed those to:

export default function SomeController() { ... }

and the module declaration files all now look like:

import SomeController from './some.controller'

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

Then the top level:

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

It took a little while, but as the changes are largely mechanical I was able to just work systematically through the entire application. Some sub-folders were just using the 'app' module name, so I added a 'module.js' file in each folder with an appropriate module name, but otherwise there weren't any real changes to be made.

I also had to change all of the template urls into imports and I imported the '.scss' file into the top level of the app (though that wasn't really required).

Next step will be to convert controllers and directives to components, but that should be pretty straightforward now.

Answer 2

You've got to export each one of your modules and then import them in your app module. Notice the following example:

//..import your other ts modules
import module3 from './frontend/module3.js' //This have to be relative path
import module4 from './frontend/module4.js'

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

Also notice that your old js modules should export a module:

e.g. filters module.

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

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

export default filters;