CODEWITHSUNDEEP
angularjswebpackangular-ui-routerbundle
Francesco
Francesco

Reputation: 10810

angular module reference in webpack bundle lead to exception

I am testing Webpack with a simple angular application and I use angular-ui-route by importing its default module.
When I bundle the application the name of the imported ui-router module and the one used as reference in the main angular module do not match. This lead to the following error: 

Uncaught Error: [$injector:modulerr] Failed to instantiate module weather due to:
Error: [$injector:modulerr] Failed to instantiate module undefined due to:
Error: [ng:areq] Argument 'module' is not a function, got undefined

Main module (app.ts)

import * as angular from "angular";
import uirouter from "angular-ui-router";

angular.module('weather', [uirouter]);

webpack.config

module.exports = {
entry: "./src/app/app.module.ts",
output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
},

resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module: {
    loaders: [{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }],
    preLoaders: [{ test: /\.js$/, loader: "source-map-loader" }]
  }
};

Generated bundle (bundle.js)

/***/ function(module, exports, __webpack_require__) {

"use strict";

var angular = __webpack_require__(1);
var angular_ui_router_1 = __webpack_require__(3);

angular.module('weather', [angular_ui_router_1.default]);

The reference name angular_ui_router_1 .default does not match with the variable angular_ui_router_1. If I remove I remove the "default" suffix, the html page loads Angular without any exception.
To what is due the naming mismatch and I can I solve it?

Upvotes: 0

Views: 492

Answers (1)

Francesco
Francesco

Reputation: 10810

I was able to fix the issue by importing the ui-router module in the following way:

import 'angular-ui-router';

And then registering it in the main module:

angular.module('weather', ['ui.router'])

Upvotes: 1

Related Questions