How to use angular-acl in a angular-meteor project? - javascript

I'm pretty new to Angular and Meteor. I'm trying to create a project using Angular-Meteor.
A part of my Angular app.js is as follows.
import AclService from 'angular-acl';
angular.module('myApp', [angularMeteor, uiRouter,AclService, 'accounts.ui']);
I'm trying to use the Angular-ACL plugin.
When I run the app, I get the following error in the browser console.
VM4605 modules.js?hash=afc491d…:232 Uncaught Error: [$injector:modulerr]
Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.5.3/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
at http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:232:12
at assertArg (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:2008:11)
at assertArgFn (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:2018:3)
at http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4697:11
at forEach (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:485:20)
at loadModules (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4672:5)
at http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4689:40
at forEach (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:485:20)
at loadModules (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4672:5)
at createInjector (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4594:19)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=%7B%7D&p1=Error%3A%…2Fmodules.js%3Fhash%3Dafc491df237c732f4ec721460c9455fc18cc0d9d%3A4594%3A19)
at http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:232:12
at http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4711:15
at forEach (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:485:20)
at loadModules (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4672:5)
at http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4689:40
at forEach (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:485:20)
at loadModules (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4672:5)
at createInjector (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:4594:19)
at doBootstrap (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:1874:20)
at bootstrap (http://localhost:3000/packages/modules.js?hash=afc491df237c732f4ec721460c9455fc18cc0d9d:1895:12)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=myApp&p1=Er…2Fmodules.js%3Fhash%3Dafc491df237c732f4ec721460c9455fc18cc0d9d%3A1895%3A12)(anonymous function) # VM4605 modules.js?hash=afc491d…:232(anonymous function) # VM4605 modules.js?hash=afc491d…:4711forEach # VM4605 modules.js?hash=afc491d…:485loadModules # VM4605 modules.js?hash=afc491d…:4672createInjector # VM4605 modules.js?hash=afc491d…:4594doBootstrap # VM4605 modules.js?hash=afc491d…:1874bootstrap # VM4605 modules.js?hash=afc491d…:1895angularInit # VM4605 modules.js?hash=afc491d…:1780(anonymous function) # VM4605 modules.js?hash=afc491d…:30873fire # VM4606 jquery.js?hash=649d9f4…:3185self.fireWith # VM4606 jquery.js?hash=649d9f4…:3297jQuery.extend.ready # VM4606 jquery.js?hash=649d9f4…:3509completed # VM4606 jquery.js?hash=649d9f4…:3540
Any ideas on what might have gone wrong?

OK I swear I was searching an answer for this since yesterday. But seems like I did not Google enough before posting this question. Really sorry about that.
Anyway I found the answer myself.The required tip came from the article[angularJS]How to use angular-acl?
I changed my code as follows and everything is working fine now.
angular.module('myApp', [angularMeteor, uiRouter,'mm.acl', 'accounts.ui']);
The reason for this that(I think) the plugin Angular-ACL is defined in the angular-acl.js is as follows.
angular.module('mm.acl').provider('AclService', [
function () {
Hope this helps anyone else who's having a similar problem. Cheers!

Related

Cannot read property 'call' of undefined from webpackAsyncContext (Webpack error)

I am getting the following error for certain pages on my website. It is related to Webpack.
TypeError: Cannot read property 'call' of undefined
Why is this error happening?
The stack trace doesn't show any of my code. It is happening in Webpack code:
function webpackAsyncContext(e) {
if (!n.o(r, e))
return Promise.resolve().then((function() {
var t = new Error("Cannot find module '" + e + "'");
throw t.code = "MODULE_NOT_FOUND",
t
}
));
var t = r[e]
, o = t[0];
return Promise.all(t.slice(1).map(n.e)).then((function() {
return n(o) // <---- ERROR HAPPENING HERE
}
))
}
UPDATE 1:
Error stacktrace is as follows:
main-client.js?v=HBU…YpSTrLMew46Jy0:1644 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main-client.js?v=HBU…HNYpSTrLMew46Jy0:20)
at main-client.js?v=HBU…pSTrLMew46Jy0:38946
at ZoneDelegate.invoke (main-client.js?v=HBU…pSTrLMew46Jy0:39643)
at Object.onInvoke (main-client.js?v=HBU…YpSTrLMew46Jy0:7197)
at ZoneDelegate.invoke (main-client.js?v=HBU…pSTrLMew46Jy0:39643)
at Zone.run (main-client.js?v=HBU…pSTrLMew46Jy0:39537)
at main-client.js?v=HBU…pSTrLMew46Jy0:40017
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at Object.onInvokeTask (main-client.js?v=HBU…YpSTrLMew46Jy0:7189)
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at resolvePromise (main-client.js?v=HBU…pSTrLMew46Jy0:39975)
at resolvePromise (main-client.js?v=HBU…pSTrLMew46Jy0:39952)
at main-client.js?v=HBU…pSTrLMew46Jy0:40018
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at Object.onInvokeTask (main-client.js?v=HBU…YpSTrLMew46Jy0:7189)
at ZoneDelegate.invokeTask (main-client.js?v=HBU…pSTrLMew46Jy0:39656)
at Zone.runTask (main-client.js?v=HBU…pSTrLMew46Jy0:39568)
at drainMicroTaskQueue (main-client.js?v=HBU…pSTrLMew46Jy0:39754)
defaultErrorLogger # main-client.js?v=HBU…YpSTrLMew46Jy0:1644
ErrorHandler.handleError # main-client.js?v=HBU…YpSTrLMew46Jy0:1663
next # main-client.js?v=HBU…YpSTrLMew46Jy0:7472
i # main-client.js?v=HBU…YpSTrLMew46Jy0:6748
SafeSubscriber.__tryOrUnsub # main-client.js?v=HBU…pSTrLMew46Jy0:27250
SafeSubscriber.next # main-client.js?v=HBU…pSTrLMew46Jy0:27224
Subscriber._next # main-client.js?v=HBU…pSTrLMew46Jy0:27204
Subscriber.next # main-client.js?v=HBU…pSTrLMew46Jy0:27196
Subject.next # main-client.js?v=HBU…pSTrLMew46Jy0:36275
EventEmitter.emit # main-client.js?v=HBU…YpSTrLMew46Jy0:6735
(anonymous) # main-client.js?v=HBU…YpSTrLMew46Jy0:7207
ZoneDelegate.invoke # main-client.js?v=HBU…pSTrLMew46Jy0:39643
Zone.run # main-client.js?v=HBU…pSTrLMew46Jy0:39537
NgZone.runOutsideAngular # main-client.js?v=HBU…YpSTrLMew46Jy0:7232
onHandleError # main-client.js?v=HBU…YpSTrLMew46Jy0:7206
ZoneDelegate.handleError # main-client.js?v=HBU…pSTrLMew46Jy0:39645
Zone.runGuarded # main-client.js?v=HBU…pSTrLMew46Jy0:39550
_loop_1 # main-client.js?v=HBU…pSTrLMew46Jy0:39890
Zone.__load_patch.n.microtaskDrainDone # main-client.js?v=HBU…pSTrLMew46Jy0:39896
drainMicroTaskQueue # main-client.js?v=HBU…pSTrLMew46Jy0:39760
Promise.then (async)
scheduleMicroTask # main-client.js?v=HBU…pSTrLMew46Jy0:39741
ZoneDelegate.scheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39652
onScheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39617
ZoneDelegate.scheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39648
Zone.scheduleTask # main-client.js?v=HBU…pSTrLMew46Jy0:39586
Zone.scheduleMicroTask # main-client.js?v=HBU…pSTrLMew46Jy0:39592
scheduleResolveOrReject # main-client.js?v=HBU…pSTrLMew46Jy0:40011
resolvePromise # main-client.js?v=HBU…pSTrLMew46Jy0:39971
(anonymous) # main-client.js?v=HBU…pSTrLMew46Jy0:39928
webpackJsonpCallback # main-client.js?v=HBU…YHNYpSTrLMew46Jy0:5
(anonymous) # 0.js:formatted:1
UPDATE 2:
Error stacktrace after upgrading from Angular 7.2 to 9.1. Still the same issue.
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:24)
at Module.280 (3.js:1)
at __webpack_require__ (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:24)
at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:57250
at ZoneDelegate.invoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58417)
at Object.onInvoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:13800)
at ZoneDelegate.invoke (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58417)
at Zone.run (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58227)
at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58839
at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
at resolvePromise (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58793)
at resolvePromise (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58761)
at main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58840
at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
at Object.onInvokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:13791)
at ZoneDelegate.invokeTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58440)
at Zone.runTask (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58267)
at drainMicroTaskQueue (main-client.js?v=En9ov5sOxlQIVwZOduy8ehlKv7mPkjk-C6t7aJXanQY:formatted:58572)
UPDATE 3:
It has something to do with lazy loading. When I changed it to default loading (importing modules directly), it worked. (I have also updated hrefs and replaced them with routerLink.)
Right now, it has default loading.
I'm going to write an answer because it's too long as a comment. I suspect that this is because of the service worker.
I can reproduce your issue by navigating to the food link, or another link after having the page rendered once. I then have a blank page with the same error.
If before navigating to another page I unregister the service worker, the navigation works successfully.
To test and disable the service worker, open chrome's debugger, go to the Application tab, then click Service Workers on the left, and then click unregister on the right.
You'll need to activate source maps to identify the exact error, but I tracked it down to the line 279 (once formatted) of the file 3.js.
ForumSubforumFormComponent
}()
, F = o(294) // <=== error here
, C = function() {
function Topic(t) {
this.contentItem = t,
When service worker is registered, F is a function
console.log(F)
ƒ hooks(){return a.apply(null,arguments)}
When the service worker is registered, o(294) throws an error, probably because it's not included in webpack.
When looking at the requested files in the network tab, it looks like there are 2 different version of the main-client.js file that are requested (depending on wether the page has been requested by the browser or the service worker).
This might be the cause of the issue.
Also service workers can only be registered using HTTPS, which would explain why the problem did not occur before using http. Testing http on your website is not possible anymore, since there is a 307 redirection to https.
Note As indicated in one of the comments, the navigation is a bit weird on your website.. it refreshes the whole page everytime you navigate. Also, angular universal does not seem to always render
In the terms and conditions you reference the AuthService and PageService.
I don't find where they are declared. This one i.e. could miss the AuthService:
https://github.com/jasebanico/banicocms/blob/master/src/Banico.Web/ClientApp/app/shared/shared.module.ts
Or this one the PageService:
https://github.com/jasebanico/banicocms/blob/master/src/Banico.Web/ClientApp/app/plugins/modules/page/page.module.ts
Alternatively you could use
#Injectable with providedIn
Does this help?
Otherwise I find it a bit hard to debug.
So I'd suggest using ng new to create a new project structure (you can add options to ignore the creation of the git repo) and merge your code into. This way you don't have to deal with adapting webpack and so on when doing upgrades.

2Checkout Payment Extension Magento Error "'href' of undefined" prototype.js:612:64)

I try to use the 2Checkout Payment Extension Magento I got the error to process Payment the console print like this. Anyone knows the issue.
prototype.js:828 Uncaught TypeError: Cannot set property 'href' of undefined
at eval (eval at <anonymous> (https://example.com/js/prototype/prototype.js:612:64), <anonymous>:4:55)
at https://example.com/js/prototype/prototype.js:612:64
at https://example.com/js/prototype/prototype.js:865:29
at https://example.com/js/prototype/prototype.js:825:18
at Array.forEach (native)
at Array.each (https://example.com/js/prototype/prototype.js:824:12)
at Array.collect (https://example.com/js/prototype/prototype.js:864:10)
at String.evalScripts (https://example.com/js/prototype/prototype.js:612:34)
at Function.<anonymous> (https://example.com/js/prototype/prototype.js:391:23)
at https://example.com/js/prototype/prototype.js:416:23
(anonymous) # VM297:4
(anonymous) # prototype.js:612
(anonymous) # prototype.js:865
(anonymous) # prototype.js:825
each # prototype.js:824
collect # prototype.js:864
evalScripts # prototype.js:612
(anonymous) # prototype.js:391
(anonymous) # prototype.js:416
Finally, I fixed that error. I changed the code on observer.php
It's located in /app/code/local/Craig/Tco/Model / observer.php
under if (Mage::getStoreConfig('payment/tco/inline')
if ($$("a.top-link-cart")) { //old observer.php line 70
I changed this to
if ($$("a.top-link-cart").length) {
and also samething in else
if ($$("a.top-link-cart")) {
to
if ($$("a.top-link-cart").length) {
You can find more about this error on 2Checkout-Magento-Error

Error with Humanizer.Js

I recently tried Humanizer.Js. I added a nuget reference of the same from here, and added it in my page as <script src="~/Scripts/humanizer/humanizer.js"></script>.
However in my page load I am getting an error:
"Uncaught TypeError: Cannot read property 'prototype' of undefined" at humanizer.js:409. The stack trace looks like below:
Uncaught TypeError: Cannot read property 'prototype' of undefined
__extends # humanizer.js:409
(anonymous function) # humanizer.js:416
Humanizer.Configuration.Humanizer.Configuration # humanizer.js:422
Humanizer # humanizer.js:424
(anonymous function) # humanizer.js:426
I have also created a plunk here to replicate the error. Also note that .humanize() also doesn't work.
Any suggestions?
I just released version 1.5 on NuGet, should fix your error

How to use the aurelia-dialog plugin with Aurelia?

I'm having trouble setting up the aurelia-dialog plugin (0.2.0) with my test Aurelia app.
Unfortunately, the README.MD file that details how to accomplish this has some serious holes. First, it doesn't mention having to inject the aureliaDialog into your class, so I tried this first:
#inject(HttpClient, DialogService)
export class MyClass{
constructor(http, dialogService) {
this.http = http;
this.dialogService = dialogService;
}
...
}
I tried to invoke the dialog box using:
this.dialogService.open({ viewModel: Prompt, model: 'Good or Bad?' })
The above results in the following errors:
Unhandled promise rejection ReferenceError: info is not defined
at Container.invoke (http://127.0.0.1:9000/jspm_packages/github/aurelia/dependency-injection#0.10.0/aurelia-dependency-injection.js:401:30)
at Array.<anonymous> (http://127.0.0.1:9000/jspm_packages/github/aurelia/dependency-injection#0.10.0/aurelia-dependency-injection.js:272:44)
at Container.get (http://127.0.0.1:9000/jspm_packages/github/aurelia/dependency-injection#0.10.0/aurelia-dependency-injection.js:329:24)
at http://127.0.0.1:9000/jspm_packages/github/aurelia/templating#0.15.1/aurelia-templating.js:3685:75
at run (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/es6.promise.js:91:43)
at http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/es6.promise.js:105:11
at module.exports (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.invoke.js:6:25)
at queue.(anonymous function) (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.task.js:40:9)
at Number.run (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.task.js:27:7)
at listner (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.task.js:31:9) Unhandled promise rejection ReferenceError: info is not defined(…)(anonymous function) # es6.promise.js:139module.exports # $.invoke.js:6queue.(anonymous function) # $.task.js:40run # $.task.js:27listner # $.task.js:31
Next, I tried to add the configuration of the plugin to my main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-animator-css')
.plugin('aurelia-dialog'); // <----- this is what I added
aurelia.start().then(a => a.setRoot());
}
Now my app doesn't start at all and produces the following error while trying (and failing) to start:
DEBUG [aurelia] Configured plugin aurelia-dialog. aurelia-logging-console.js:38
DEBUG [templating] importing resources for undefined [] es6.promise.js:139
Unhandled promise rejection Error: Cannot read property 'querySelectorAll' of undefined(…)
(anonymous function) # es6.promise.js:139module.exports # $.invoke.js:6queue.
(anonymous function) # $.task.js:40run # $.task.js:27listner # $.task.js:31
I am now at a loss of what to try next. Thanks for any insight you can offer with this issue.
I'm also hopeful that the maintainer of the aurelia-dialog plugin revises the docs to make the setup process less painful.
Thanks,
Greg
In the end, the problem turned out to be a bug in aurelia-dialog 0.2.0. Version 0.2.1 fixes the issue I couldn't resolve on my own: https://github.com/aurelia/dialog/pull/24.
The other steps that I had to follow are still necessary - you will need to inject the DialogService class and modify your main.js file to add the configuration.

How to most meaningfully use Angular error

Lots of times when I am debugging in the browser, some mistake in my code will trigger an error in the angular.js file. Something like:
TypeError: Cannot read property '0' of undefined angular.js:11699
at new <anonymous (bundle.js:1068)
at Object.invoke (VM3011 angular.js:4219)
at $get.extend.instance (VM3011 angular.js:8525)
at VM3011 angular.js:7771
at forEach (VM3011 angular.js:334)
at nodeLinkFn (VM3011 angular.js:7770)
at compositeLinkFn (VM3011 angular.js:7149)
at nodeLinkFn (VM3011 angular.js:7795)
at VM3011 angular.js:8030
at processQueue (VM3011 angular.js:13292)
(anonymous function) # VM3011 angular.js:11699
$get # VM3011 angular.js:8628
processQueue # VM3011 angular.js:13300
(anonymous function) # VM3011 angular.js:13308
$get.Scope.$eval # VM3011 angular.js:14547
$get.Scope.$digest # VM3011 angular.js:14363
$get.Scope.$apply # VM3011 angular.js:14652
done # VM3011 angular.js:9734
completeRequest # VM3011 angular.js:9924
requestLoaded # VM3011 angular.js:9865
Okay. So Angular is pissed off. Clicking on that line number will take me there in the angular.js file:
return logFn.apply(console, args);
I want to make the best use of all of this information. Instead of putting in a bunch of breakpoints everywhere and stepping through all of of the script, is there some way this can help me narrow down where the problem is? I mean, surely it wouldn't be being logged if it weren't useful to someone. But it just looks like gibberish to me. What's are my next steps.

Categories

Resources