Using Webpack on an existing angular 1.x application

Question

I have an existing, very large, angular 1.x application which runs today ES5 code. Almost all of the application runs on the same module. My main module is defined in the file "dashboardApp.js".

I want to start using ES6 with modules per component as the app is component structured. For it to run in develpment, I want to start using Webpack.

I tried adding Webpack so I added all the needed npm dependencies and added the following webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: '../app/dashboardApp.js',
  output:{
     path: __dirname + '/../dst/dist',
     filename: 'my.bundle.js'
  },
  module:{
    rules: [{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/
    }]
}
};

Also, I added to package.json the following property:

"scripts": {
    "build": "webpack --config webpack.config.js"
  },

and was able to successfully run build and create my.bundle.js. However, when trying to load the app using just the my.bundle.js script, I got an exception:

Uncaught Error: [$injector:modulerr] Failed to instantiate module dashboardApp due to:
Error: [$injector:unpr] Unknown provider: myConsts

myConsts is an angular constant which was included before using Webpack by loading the script and hence my question:

Whats needed in order to transform an existing angular 1.x app that used to load all scripts explicitly to be one Webpack generated script app. What changes I need to do in all my files, that are all defined on the same module, in order to be included in the generated file. I understand that webpack is a module bundler, but I lack the understanding on what I need to do in order to make the old app work with Webpack. Do I need to transform all the files to ES6 module import/export syntax? How does Webpack knows what files to load when the old angular syntax (1 controller/service/constant... per file when all on the same module)? What does it do given the entry point.

Thanks

Do I need to transform all the files to ES6 module import/export syntax? - not necessarily import/export, it can be CJS module with require, but yes. How does Webpack knows what files to load when the old angular syntax - it doesn't know. It's your responsibility. — Estus Flask
– Estus Flask, Commented Jun 13, 2017 at 13:50
So that means that the root file should include all modules necessary for the app to run, meaning that every other file that is not the root file has to be in a module different from the root file and the root file should include it (not necessarily directly, but hierarchically)? — Rotem B
– Rotem B, Commented Jun 13, 2017 at 13:54
It works best when there is 1 Angular module per 1 file (JS module). See for example stackoverflow.com/a/43858286/3731501 . Otherwise you need to have Angular module defined before files that use it with angular.module('app') will be imported. This breaks module encapsulation. — Estus Flask
– Estus Flask, Commented Jun 13, 2017 at 14:08

softvar · Accepted Answer · 2017-06-18 19:25:31Z

If your app is using requirejs, then you could achieve it using webpack2. Just configure it properly using rules and aliases. My app too uses requirejs and I successfully managed to replace Grunt with webpack2 after a lot of struggle.

Below is the webpack.config.js file:

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

let basePath = path.join(__dirname, '/');

let config = {
  // Entry, file to be bundled
  entry: {
    'main': basePath +  '/src/main.js',
  },
  devtool: 'source-map',
  output: {
    // Output directory
    path: basePath +  '/dist/',
    library: '[name]',
    // [hash:6] with add a SHA based on file changes if the env is build
    filename: env === EnvEnum.BUILD ? '[name]-[hash:6].min.js' : '[name].min.js',
    libraryTarget: 'amd',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /(\.js)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        // babel-loader to convert ES6 code to ES5 + amdCleaning requirejs code into simple JS code, taking care of modules to load as desired
        loader: 'babel-loader',
        options: {
          presets: ['es2015'],
          plugins: []
        }
      }
    }, { test: /jQuery/, loader: 'expose-loader?$' }, 
  { test: /application/, loader: 'expose-loader?application' },
  { test: /base64/, loader: 'exports-loader?Base64' }
    ]
  },
  resolve: {
    alias: {
        'jQuery': 'bower_components/jquery/dist/jquery.min',
        'application': 'main',
        'base64': 'vendor/base64'
    },
    modules: [
      // Files path which will be referenced while bundling
      'src/**/*.js',
      'src/bower_components',
      path.resolve('./src')
    ],
    extensions: ['.js'] // File types
  },
  plugins: [

  ]
};

module.exports = config;

Let me know if you have any more queries. I still remember how hard I had to try to make things work. WIll be happy to help you!

pckessel · Accepted Answer · 2020-03-19 21:11:41Z

Putting this here in case anyone else runs into this problem. Essentially what webpack is trying to do is build a dependency graph. Meaning there is an entry point, and then webpack will look at that file and see what it depends on by seeing if there are any imports or require statements in it. It will then travel to the dependency file and bundle that while also looking for more dependencies and so on. In this way, it knows what things need to be loaded before others. It sounds like you didn't alter your source code to import or require any of the module's dependencies, so Webpack simply built that one file you pointed it to instead of all of the files of your app.

Lets say ModuleA depends on ModuleB and ModuleC. in ModuleA.js, you'll import (or require) moduleB as well as ModuleC. In both ModuleB and ModuleC, you'll need to export them and make sure your exporting the .name property from the module since AngularJS wants strings for its dependencies. The tricky thing about using AngularJS with Webpack, is that Angular has its own Module system which is different from the commonJS pattern or ESModules, so its a bit of an odd combination.

Softvar's solution above works because he told webpack what to bundle when defining his modules under the resolve property. If all of your sub modules are exported, another solution to bundling all of your angular files into one parent module to export, is like this, where the file is index.js and webpack looks here as its entry point:

const modules = [];

function importAll(webpackContext) {
  // the webpackContext parameter is a function returned after invoking require.context() that has
  // access to all of the resolved paths defined in the require.context call.

  // The keys will be an array of all of the resolved module paths returned from the initial
  // require.context invocation within the importAll invocation a number of lines below this declaration.
  webpackContext.keys()

  // this will fetch each module itself and give us access to all of the exports from that module.
  // Since we are exporting the angular modules as the default export from all of our index files,
  // we are just pushing the default property into the modules array. In this case the default property
  // is the string name of the angular module.
    .forEach(modulePath => modules.push( webpackContext(modulePath).default) );
}

// recurse through all sub directories in ./src and find the path for each index.js file.
importAll(require.context("./src/", true, /index\.js$/));

// take all of the module's name strings and spread them out as module dependencies.
// export the single module all glued together.
export default angular.module("YOUR_MODULE_NAME", [...modules]).name;

Collectives™ on Stack Overflow

Using Webpack on an existing angular 1.x application

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related