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.
Related
Error Snapshot Development when using ng-strict-di
I am developing project in meteor , If I don't use ng-strict-di in development it works fine but then in production(after making build ) I face following issue :
Error In Production Meteor
Development Error:
Error columnNumber: 12 fileName:
"localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6"
lineNumber: 895 message: "[$injector:strictdi] AdminCtrl is not using
explicit annotation and cannot be invoked in strict
mode\nerrors.angularjs.org/1.6.8/$injector/strictdi?p0=AdminCtrl"
stack:
"minErr/<#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:895:12\nannotate#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:5039:17\ninjectionArgs#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:5833:21\ninvoke#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:5868:18\n$controllerInit#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:11846:24\nnodeLinkFn#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:10709:35\ncompileTemplateUrl/<#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:11117:13\nprocessQueue#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:17939:37\nscheduleProcessQueue/<#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:17987:27\n$digest#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:19122:15\n$apply#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:19419:13\nbootstrapApply#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:2737:9\ninvoke#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:5876:16\ndoBootstrap#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:2735:5\nbootstrap#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:2755:12\nangularInit#localhost:3007/packages/modules.js?hash=f352b06ef868d8ef612a0e02d3fc1da778e4f6d6:2640:5\nangular.js/proto: Object { … }
Production(Build )
Error: [$injector:unpr] Unknown provider: tProvider <- t
errors.angularjs.org/1.6.8/$injector/unpr?p0=tProvider%20%3C-%20t
Stack trace:
r/<#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:7828
he/b.$injector<#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:30527
r#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:29436
he/E<#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:30610
r#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:29436
i#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:29741
a#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:29962
t#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:12:25404
p#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:12:11871
ht/<#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:12:17718
u#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:13:15438
l/<#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:13:15884
$digest#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:13:21599
$apply#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:13:23411
t#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:16603
a#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:30066
a#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:16522
lt#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:16810
ct#localhost:3008/7084ab3720bb9d2b53502cd2b81dce478c095b4c.js?meteor_js_resource=true:11:16046
angular.js/
You're bootstrapping Angular in strict dependency injection mode. This causes angular to throw exceptions when it encounters a dependency that isn't explicitly annotated. This is a way to enforce developers to guard against names of dependencies getting minified.
From the documentation:
If this attribute is present on the app element, the injector will be
created in "strict-di" mode. This means that the application will fail
to invoke functions which do not use explicit function annotation (and
are thus unsuitable for minification), as described in the Dependency
Injection guide, and useful debugging info will assist in tracking
down the root of these bugs.
The error tells you that you havn't explicitly annotated your AdminCtrl-controller. To fix this, your code should look similar to this:
angular.module('app').controller('AdminCtrl', ['firstDependency', 'secondDependency',
function(firstDependency, secondDependency){
// Controller body
}]);
or using $inject:
angular.module('app').controller('AdminCtrl', AdminCtrl);
AdminCtrl.$inject = ['firstDependency', 'secondDependency'];
function AdminCtrl(firstDependency, secondDependency){
// Controller body
}
The second method can be done for you automatically if you use build tools such as grunt, gulp or webpack, along with the ngAnnotate package.
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', [])
A good practice when using Angular is to separate module definition from each usage of this module (one usage per file).
For instance:
//HomeModule.js
angular.module('home', []);
//HomeService.js
angular.module('home')
.service('HomeService', HomeService);
Classic issue is regarding files concatenation:
If HomeService.js is injected before HomeModule.js in the final file, this would result in this error:
Uncaught Error: [$injector:modulerr]
Using gulp, there's a handy gulp-angular-sort that could manage it for us.
How to handle Angular files ordering when dealing with WebPack and files concatenation, to prevent this kind of disorder?
I disagree, this line .service('HomeService', HomeService); belongs to module, not service. So you have following setup:
HomeService.service.js:
export default ['$timeout', ..., ($timeout, ...) => { /*some code*/}]
HomeModule.js:
import HomeService from 'HomeService.service.js'
angular.module('home', [])
.service('HomeService', HomeService);
You do not have any problems with order in this case.
I am trying to consume the browser portion of the OSC library here: https://github.com/colinbdclark/osc.js in my TypeScript AMD website (Using RequireJS.)
I intend to write the definition file at least to the extent that I use it. However, when I import the (minified or not) osc-browser js file via require:
//From the require config
oscbrowser: ["/scripts/lib/osc.js/dist/osc-browser.min"],
...
oscbrowser: {
export: "osc"
},
...
//From the typescript file
declare var osc;
Requirejs gives me the following javascript error at runtime:
Uncaught Error: Module name "events" has not been loaded yet for
context: _. Use require([])
I have updated to the latest library per Colin's comment below and the error changes to reference the slip library.
Uncaught Error: Module name "slip" has not been loaded yet for
context: _. Use require([])
When I pull in all components via the require config like so:
EventEmitter: ["/scripts/lib/eventEmitter/EventEmitter"],
slip: ["/scripts/lib/slip.js/dist/slip.min"],
osc: ["/scripts/lib/osc.js/src/osc"],
osctransports: ["/scripts/lib/osc.js/src/osc-transports"],
oscbrowser: ["/scripts/lib/osc.js/src/platforms/osc-browser"],
and
EventEmitter: {
export: "EventEmitter"
},
osctransports: {
deps: ["slip", "EventEmitter"]
},
oscbrowser: {
export: "osc",
deps: ["slip","EventEmitter", "osc", "osctransports"]
},
The error returns to the events error:
Uncaught Error: Module name "events" has not been loaded yet for
context: _. Use require([])
If I change the line in osc-transports.js from
EventEmitter = EventEmitter || require("events").EventEmitter;
to
EventEmitter = EventEmitter || require("EventEmitter") || require("events").EventEmitter;
because I believe that the prior require only works with the NPM version of EventEmitter the javascript error goes away and the library appears to work.
Does anyone with more experience with RequireJS than me have an idea as to why I can't use just the dist/ocs-browser versions of the library?
I'm the creator of osc.js. Until recently, osc.js didn't directly support asynchronous module loaders. After seeing your question, I added support to the library for the universal module definition style boilerplate, so osc.js version 1.1.3 and above should work with Require.js now.
I am working on angularjs and node.js.
Problem:
I am getting following error in minified version of controller(Angular Controller js file). But it is working in the normal version.
Error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.25/$injector/unpr?p0=eProvider%20%3C-%20e
at Error (native)
at http://localhost:8080/assets/lib/js/angularjs/angular.min.js:6:450
at http://localhost:8080/assets/lib/js/angularjs/angular.min.js:36:202
at Object.c [as get] (http://localhost:8080/assets/lib/js/angularjs/angular.min.js:34:305)
at http://localhost:8080/assets/lib/js/angularjs/angular.min.js:36:270
at c (http://localhost:8080/assets/lib/js/angularjs/angular.min.js:34:305)
at d (http://localhost:8080/assets/lib/js/angularjs/angular.min.js:35:6)
at Object.instantiate (http://localhost:8080/assets/lib/js/angularjs/angular.min.js:35:165)
at http://localhost:8080/assets/lib/js/angularjs/angular.min.js:67:419
at link (http://localhost:8080/assets/lib/js/angularjs/angular-route.js:907:26) <div ng-view="" class="ng-scope">
I am using gulp-uglify to minify the controller
Code
gulp.task('buildControllerScript', function(){
return gulp.src(paths.controllers)
.pipe(concat('controllers.js'))
.pipe(gulp.dest('./public/dist/controllers/'))
.pipe(rename('controllers.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./public/dist/controllers/'));
});
Note:
Seems to be something wrong while uglify.
I cannot expose the controller code due to privacy rules
Any suggestion will be grateful.
Since Angular's dependency injection depends on the names of your function parameters, you either need to use dependency annotation or replace the uglify gulp plugin with gulp-ng-annotate.