ionic2 not loading javascript import in UWP app - javascript

I have an ionic2 app that works great in the browser however when I try to run it as a UWP app it fails with the following error:
JavaScript runtime error: Uncaught (in promise): Error: Error in :0:0 caused by: 'Oidc' is undefined
I'm using an oidc library in just one class so I went and looked there and I have the following:
import * as Oidc from 'oidc-client';
This seems to work fine when running the app in the browser but it doesn't seem to get picked up when run as an app. I don't know if this is a ionic build issue/ webpack / or most likely just my ignorance since i'm relying on a lot of pieces I don't fully understand.
I fixed this issue by directly referencing the script in my index.html file:
<script src="oidc-client.min.js"></script>
but that really seems like the wrong solution. Can someone point me in the right direction? I want to understand why my import sometimes works.
edit: Also no errors made it back to ionic cli. I had to load this up in Visual Studio to find the problem

I can't say for sure since I'm not familiar with Oidc, but sometimes doing 'import *' or 'export ' can break things when working with ionic 2 or just straight up angular 2. I think it's more of a webpack related issue. We've had weird build issues or stupid 'X is undefined' issues in our development and oftentimes it's been related to using the wildcards (I think technically they're called barrels?). Also, some libraries don't play nicely with ES6 modules, although that might not be your case since it runs fine in the browser. Once though I had a really small use case for jquery in an angular 2 app, and the only way to get it in the app was by sticking a link in the index.html. But my gut tells me your problem is with the import statement.

Related

Handling module import errors in react native android emulator

Development Error: 500
This is an error is have seemingly been completely unable to solve on my own, it appears to have something to do with importing modules and dependencies. however, I have tried everything I could within that perceptive and it has become clear that I have asbolutetly no clue how to solve this seemingly simple problem.
let me know if you have experience solving this issue, it seems all the other postings on stacking and GitHub are mostly useless.

How to configure WebStorm for firebase use?

I've been looking around for an answer, but failed to find one.
I can't seem to understand how to configure my WebStorm properly for my html+javascript project, so it compiles and debugs correctly.
I've tried clicking yellow tooltips next to <script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
and downloading libraries, but that doesn't help. Setting up library manually by going into settings - > javascript - > libraries and adding firebase.js also doesn't help.
After running the code, all I'm getting is:
firebase.initializeApp(config);
^
ReferenceError: firebase is not defined
I didn't see a single thing concerning this on web, am I doing something wrong, or..?

Why my angularJS errors are showing like this in the firefox console and firebug?

I'm working in an angularjs application but somehow this plugin 'smart-table' it's not being added to my app modules array but that's not the problem, I want to know why firefox and firebug show the error like this, and if there's a way to fix this
this is how firefox and firebug show the error in the console. I tried using only the firefox console without a firebug but it's the same they both show the error the same way
why it appears all those percentage symbols and big letter cases 'F'?
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=SistemaActividades&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dsmart-table%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253Dsmart-table%250AG%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A24%253A186%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A23%253A251%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A23%253A494%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A38%253A117%250An%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A37%253A488%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A38%253A134%250An%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A37%253A488%250Aeb%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A41%253A249%250Ayc%252Fc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A19%253A463%250Ayc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A294%253A192%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A175%253A62%250AIf%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A35%253A365%250AHf%252Fd%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A35%253A314%250A%0AG%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2F
This error is thrown by angular when it cant find the module that you are trying to pass, it is actually a link to angular docs that describe the error.
Try to check if the js of smart table is loaded before you pass to your app
load angular.js, than smarttable.js
then use it
angular.module('myApp',['smart-table']
That error happens when you have a dependency that you that you have not included the proper files for. This can happen when using third-party modules that you find from repositories.
Often times the module that you use will have it's own dependencies with it's own required files as well. Just ensure that all your dependencies are fulfilled.

Ember Run Loop in testing mode

I'm using https://github.com/ride/ember-stripe-service add-on and everything worked nicely until Ember 1.10.1, but since Ember 1.11.0 Ember's run loop start crashing in E2E testing saying that we were trying to access a destroyed object, I have been trying to fix it but I couldn't so I made a PR https://github.com/ride/ember-stripe-service/pull/32 reproducing the error in tests/dummy and tests/integration but neither they know how to fix it, please help.
We think is something related with Stripe.js (https://js.stripe.com/v2/) because they embed an Iframe when the script in loaded in the browser.

AngularJS $sce.getTrustedResourceUrl(templateUrl) error

I am working on a simple application in RhoMobile and I am using AngularJS with it.
When defining routeProvider, I have come to the strangest issue I have seen.
I tried many things, like chaning the path for templateUrl defining an explicit one, but with no success. But if I use template property instead of templateUrl it works.
I am getting this error:
Error: 'undefined' is not a function (evaluating '$sce.getTrustedResourceUrl(templateUrl)')
I am using AngularJS v1.2.16 and I am out of ideas.
EDIT: I set up an example RhoMobile application with angular-seed which has the error, you can find the application here
UPDATE:: I got reply from RhoMobile core developers that this will be fixed in 4.2
It works just fine when served statically, so RhoMobile is probably screwing up the origins, and running your app into CORS issues.
git clone https://github.com/TheCodeDestroyer/rhomobile-angular
cd rhomobile-angular/
python -m SimpleHTTPServer
open "http://localhost:8000/public"
# click around... it works!
Indeed, issue has no any relation to rhomobile code. Rhomobile used opal.rb/opal.js conflicted with angular.js until RMS4.2. Started from RMS4.2 opal.js is not in use anymore. So there may be another reason for your issue.
In case you run your application using RhoSimulator on windows it may be a bug with toLowerCase() method of String class. It looks like the bug is in the QTWebView component used for RhoSimulator. Just discovered it and fix is in the progress. Issue appears only on windows. On Mac OS X everything performing correctly.
Try to evaluate following expression in web console of RhoSimulator:
"RESOURCE_URL".toLowerCase()
In case it evaluates as "resource url" the angular.js will not work.
Watch for update in your RhoMobile support ticket.
It doesn't look like you're including the ngSanitize module.

Categories