I am experiencing an issue about webpack: if I set config.optimization.minimize: false, webpack produces not-minified bundle files (polyfills, vendor and app), then I run the server and all works fine. If I change the option to config.optimization.minimize: false I am getting following AngularJS (1.7.9) error:
jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module saServer2App due to:
Error: [$injector:modulerr] Failed to instantiate module saServer2App.account due to:
Error: [$injector:unpr] Unknown provider: e
https://errors.angularjs.org/1.7.9/$injector/modulerr?p0=saServer2App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20saServer2App.account%20due%20to%3A%0AError%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.9%2F%24injector%2Fmodulerr%3Fp0%3DsaServer2App.account%26p1%3DError%253A%2520%255B%2524injector%253Aunpr%255D%2520Unknown%2520provider%253A%2520e%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.9%252F%2524injector%252Funpr%253Fp0%253De%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A837%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A23977%250A%2520%2520%2520%2520at%2520u%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25576)%250A%2520%2520%2520%2520at%2520s%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25881)%250A%2520%2520%2520%2520at%2520Object.invoke%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25969)%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25365)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25009%250A%2520%2520%2520%2520at%2520x%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A1529)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24869)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24955%250A%2520%2520%2520%2520at%2520x%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A1529)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24869)%250A%2520%2520%2520%2520at%2520We%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24189)%250A%2520%2520%2520%2520at%2520i%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A10341)%250A%2520%2520%2520%2520at%2520Object.Et%2520%255Bas%2520bootstrap%255D%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A10656)%250A%2520%2520%2520%2520at%2520HTMLDocument.%253Canonymous%253E%2520(http%253A%252F%252Flocalhost%253A9000%252Fapp.bundle.js%253A348%253A233259)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9000%252Flibs%252Fjquery.min.js%253A2%253A30005)%250A%2520%2520%2520%2520at%2520t%2520(http%253A%252F%252Flocalhost%253A9000%252Flibs%252Fjquery.min.js%253A2%253A30307)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A837%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A25194%0A%20%20%20%20at%20x%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A1529)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24869)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24955%0A%20%20%20%20at%20x%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A1529)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24869)%0A%20%20%20%20at%20We%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24189)%0A%20%20%20%20at%20i%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A10341)%0A%20%20%20%20at%20Object.Et%20%5Bas%20bootstrap%5D%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A10656)%0A%20%20%20%20at%20HTMLDocument.%3Canonymous%3E%20(http%3A%2F%2Flocalhost%3A9000%2Fapp.bundle.js%3A348%3A233259)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9000%2Flibs%2Fjquery.min.js%3A2%3A30005)%0A%20%20%20%20at%20t%20(http%3A%2F%2Flocalhost%3A9000%2Flibs%2Fjquery.min.js%3A2%3A30307)
at vendor.6729935a0c85787ce014.bundle.js:895
at vendor.6729935a0c85787ce014.bundle.js:5819
at x (vendor.6729935a0c85787ce014.bundle.js:1144)
at g (vendor.6729935a0c85787ce014.bundle.js:5779)
at We (vendor.6729935a0c85787ce014.bundle.js:5696)
at i (vendor.6729935a0c85787ce014.bundle.js:2719)
at Object.Et [as bootstrap] (vendor.6729935a0c85787ce014.bundle.js:2740)
at HTMLDocument.<anonymous> (app.js:74)
at e (jquery.min.js:2)
at t (jquery.min.js:2)
This is a bit strange, especially to me that I am new in AngularJS and Webpack. The only thing I change between the two scenarios is only the minimize flag. What could be wrong?
Feel free to ask some portions of my files/codes I needed.
AngularJs dependency injection is based on the function argument names.
For example:
class AuthService {
constructor(otherService) {
// ------------^ will inject otherService
}
}
angular.module('my-app', []).service('authService', AuthService);
The problem is that when you minify your code, the minifier will replace function arguments into something shorter (usually one char).
This is what happens in your case, this explains why the angular tries to inject e (Error: [$injector:unpr] Unknown provider: e).
In order to overcome this issue, angular supports array notation which defines the dependencies as a string.
// Given
const MyController = function (obfuscatedScope, obfuscatedRoute) {
// ...
};
// Define function dependencies
MyController['$inject'] = ['$scope', '$route'];
There is a webpack plugin which annotates automatically, ng-annotate-webpack-plugin.
It handles most of the cases, but sometime you need to help it by adding a special comment.
class AuthService {
/* #ngInject */
constructor(otherService) {
// ------------^ will inject otherService
}
}
angular.module('my-app', []).service('authService', AuthService);
If you are a babel user, check this babel plugin.
I've been trying to understand how to set up Stripe for my app but am having problems with the implementation of the module. Normally when using a module i would require it in the top of the file to be able to use it but when i do it in the paymentCtrl file it doesn't work and i get the two errors below: where am i supposed to declare it for me to be able to use it? Well as you see i'm quite new to this and would like to understand how to structure this so that the payments work.
errors:
Unexpected token.
and
Failed to instantiate module paymentController due to:
Error: [$injector:nomod] Module 'paymentController' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
paymentCtrl:
angular.module('paymentController', [])
var stripe = require('stripe')('sk_test_....');
.controller('paymentCtrl', function($scope) {
});
app.js:
angular.module('userApp', ['appRoutes', 'userControllers', 'userServices', 'ngAnimate', 'mainController', 'authServices', 'managementController', 'paymentController'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptors');
});
try to move line:
var stripe = require('stripe')('sk_test_....');
above line:
angular.module('paymentController', [])
I am developing an AngularJS application. To ship the code in production, I'm using this Grunt configuration/task:
grunt.registerTask( 'compile', [
'sass:compile', 'copy:compile_assets', 'ngAnnotate', 'concat:compile_js', 'uglify', 'index:compile'
]);
It's really hard to debug, and it's kind of a question to people who already ran into such problems and can point to some direction.
My main module is including those submodules:
angular
.module('controlcenter', [
'ui.router',
'ui.bootstrap',
'templates-app',
'templates-common',
'authentication',
'api',
'reports',
'interceptors',
'controlcenter.websites',
'controlcenter.users',
'controlcenter.campaigns',
'controlcenter.reports',
'controlcenter.login'
])
.run(run);
The error I get is following:
Uncaught Error: [$injector:modulerr] Failed to instantiate module controlcenter due to:
Error: [$injector:modulerr] Failed to instantiate module controlcenter.websites due to:
Error: State 'websites'' is already defined
If I remove the websites module, I get the same error for
controlcenter.users.
I am using the ui-router to handle routing inside the app.
After my build process (for integration testing), everything works just fine:
grunt.registerTask( 'build', [
'clean', 'html2js', 'jshint', 'sass:build',
'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets',
'copy:build_appjs', 'copy:build_vendorjs', 'copy:build_vendorcss', 'index:build', 'karmaconfig',
'karma:continuous'
]);
So maybe ngAnnotate or or concat/uglify are doing weird things here?
UPDATE 1:
It has something to do with my configuration of the modules. Here is the code:
angular
.module('controlcenter.websites',
[
'ui.router'
]
)
.config(config);
config.$inject = ['$stateProvider'];
function config($stateProvider) {
$stateProvider.state( 'websites', {
url: '/websites',
views: {
"main": {
controller: 'WebsitesController',
templateUrl: 'websites/websites.tpl.html'
}
}
});
}
When I change the name of the state to websites_2, I get an error
with 'websites_2 is already defined'.
When I remove the module completely, the next one hast the same problem inside the config file. So is the structure wrong?
Update 2:
The problem seems concat related.
It takes every JS file and adds it one after another to one, bigger file. All of my modules are at the end. The last module always has the problem with 'state already defined'. So it's not just the order of the modules appending to each other, it's something elsse...
Update 3:
I placed my code (I've excluded every Controller-Code and functions, just the scaffold) in a gist. This is the outcome after my compile process, without uglifying it.
Issue:
You have multiple files that contains a config function to configure your module, like this:
angular
.module('controlcenter.websites', [])
.config(config);
function config() {
// ...
}
The problem is that after you concatenate all files you end up with a big file with multiple declarations of config. Because of JavaScript's variable hoisting, all declarations are moved to the top and only the very last of them is evaluated, and this one is:
function config($stateProvider) {
$stateProvider.state( 'websites', {
url: '/websites',
views: {
"main": {
controller: 'WebsitesController',
templateUrl: 'websites/overview/websites.tpl.html'
}
},
data : {requiresLogin : true }
});
}
Hence, each time you .config(config) a module, you are telling Angular to configure your module with that particular configuration function, which means that it executes multiple times and tries to define the state websites more than once.
Solution:
Wrap each JavaScript file code with a closure. This way you will avoid declaring a variable/function more than once:
(function (angular) {
'use strict';
angular
.module('controlcenter.website.details', ['ui.router'])
.config(config);
config.$inject = ['$stateProvider'];
function config($stateProvider) {
$stateProvider
.state( 'websiteDetails', {
url: '/websiteDetails/:id',
views: {
"main": {
controller: 'WebsiteDetailsController',
templateUrl: 'websites/details/website.details.tpl.html'
}
},
data : {requiresLogin : true }
})
.state( 'websiteDetails.categories', {
url: '/categories',
views: {
"detailsContent": {
templateUrl: 'websites/details/website.details.categories.tpl.html'
}
},
data : {requiresLogin : true }
})
;
}
})(window.angular);
Edit:
I strongly recommend you wrap your files into closures. However, if you still don't want to do that, you can name your functions according to their respective modules. This way your configuration function for controlcenter.website.details would become controlcenterWebsiteDetailsConfig. Another option is to wrap your code during build phase with grunt-wrap.
window.angular and closures: This is a technique I like to use on my code when I'm going to uglify it. By wrapping your code into a closure and giving it a parameter called angular with the actual value of window.angular you are actually creating a variable that can be uglified. This code, for instance:
(function (angular) {
// You could also declare a variable, instead of a closure parameter:
// var angular = window.angular;
angular.module('app', ['controllers']);
angular.module('controllers', []);
// ...
})(window.angular);
Could be easily uglified to this (notice that every reference to angular is replaced by a):
!function(a){a.module("app",["controllers"]),a.module("controllers",[])}(window.angular);
On the other side, an unwrapped code snippet like this:
angular.module('app', ['controllers']);
angular.module('controllers', []);
Would become:
angular.module("app",["controllers"]),angular.module("controllers",[]);
For more on closures, check this post and this post.
If you check it in the concatenated file, do you have the states defined twice? Can it be that you are copying the files twice? Check the temporary folders from where you are taking the files (also in grunt config, what you are copying and what you are deleting...).
So I had the same problem but with the following setup:
yeoman angular-fullstack (using typescript)
Webstorm
With the angular-fullstack configuration, the closures were already implemented (as Danilo Valente suggests) so I struggled quite a bit until I found out that in Webstorm, I had the typescript compiler enabled which compiled all of my *.ts files to *.js. But since Webstorm is so 'smart', it does not show these compiled files in the working tree. Grunt however concatenated of course all files regardless if it is typescript of JS. That's why - in the end- all of my states were defined twice.
So the obvious fix: Disabled typescript compiler of webstorm and deleted all the generated *.js files and it works.
I have been trying to find the problem but Im not capable, so
Eco:
Angular and Angular-mocks #1.4.3
Here my karma config file with correct order?
...
files: [
'../../www/lib/angular/angular.js',
'../../www/lib/angular-mocks/angular-mocks.js',
'../../www/js/core/app.js',
'../../www/js/core/**/*.js',
'../../www/js/feature/**/*.js'
],
...
My controller test
describe('HomeCtrl', function () {
beforeEach(function() {
module('app');
});
beforeEach(inject(function() {
}));
})
Error
/Users/rmas/src/node_modules/angular/angular.js:4386:53
forEach#/Users/rmas/src/node_modules/angular/angular.js:336:24
loadModules#/Users/rmas/src/node_modules/angular/angular.js:4346:12
createInjector#/Users/rmas/src/node_modules/angular/angular.js:4272:22
workFn#/Users/rmas/src/node_modules/angular-mocks/angular-mocks.js:2393:60
So I think the problem is angular-mocks ? I have tried with 1.5 version (angular and angular-mocks).
Module is 'app' is not a typing error.
Thanks for your help !
I had a similar problem, the issue was that I was not loading all needed modules, I missed the uiBootstrap module from loading and it was causing that issue as it was a dependency in my app.
Please verify if you have all required modules loaded in the Karma Configuration before trying to inject dependencies.
I have problem with adding Angulartics.
In my app.js I just added that two dependencies (Angulartics and the last one) you can see:
var smsApp = angular.module('smsApp', [
'ngRoute',
'smsControllers',
'smsFilters',
'google-maps',
'pascalprecht.translate',
'angulartics',
'angulartics.google.analytics',
]);
and then in my index.html I added: <script src="./js/angulartics.js">
<script src="./js/angulartics-ga.js"> ---- paths to these files are ok
but when I want to create that module with:
var injector = angular.injector(['smsApp', 'ng']);
I got this error:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24rootElementProvider%20%3C-%20%24rootElement%20%3C-%20%24location
Without Angulartics it goes well! Please help me :) thanks
I'm following this tutorial.
Assuming you're reading the docs here: https://github.com/angulartics/angulartics
You need to install the angularitics.google.analytics plugin by running 'bower install angulartics-google-analytics --save'
Why are you using injector?
If you're using injector, you're not using the regular AngularJS bootstrapping code, so $rootElement is not defined.
You could mock the object:
<script src="/path/to/angular-mock.js">
...
var injector = angular.injector(['smsApp', 'ngMock', 'ng']);
Or define it in your app explicitely
smsApp.config(['$provide', function($provide) {
// Should match the element that contains your ng-app="smsApp" attribute
$provide.value('$rootElement', angular.element(document.body));
}]);