TypeError: Cannot read property 'local' of undefined at Object.schedule (ng-cordova.js:5042) - angularjs

I have a problem scheduling local notifications with the ionic framework.
this is the angular module of my app.js
angular.module('starter', ['ionic','chart.js','ngCordova'])
with a controller
.controller("ExampleController", function($scope, $ionicPlatform,$interval,$cordovaLocalNotification)
i try to create a notification with this method
scheduleInstantNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
text: 'Value out of bound',
title: 'Anomaly'
}).then(function () {
alert("Instant Notification set");
});;
};
when running on an android device i get this error message:
TypeError: Cannot read property 'local' of undefined
at Object.schedule (ng-cordova.js:5042)
at scheduleInstantNotification (app.js:138)
at app.js:64
at ionic.bundle.js:56230
at Object.ready (ionic.bundle.js:2140)
at Object.ready (ionic.bundle.js:56223)
at app.js:62
at callback (ionic.bundle.js:25611)
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$digest (ionic.bundle.js:30211)
I suspect that this error comes from the ngCordova library the error comes from this code part of the library
schedule: function (options, scope) {
var q = $q.defer();
scope = scope || null;
$window.cordova.plugins.notification.local.schedule(options, function (result) {
q.resolve(result);
}, scope);
return q.promise;
},
the $window.cordova.plugins.notification.local object is undefined.
Did I miss something in the controller?
EDIT
adding the required plugin with:
cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications.git
causes a compiler error when running
ionic build android
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':_debugCompile'.
> Could not find any matches for com.android.support:support-v4:+ as no versions of com.android.support:support-v4 are available.
Searched in the following locations:
https://repo1.maven.org/maven2/com/android/support/support-v4/maven-metadata.xml
https://repo1.maven.org/maven2/com/android/support/support-v4/
https://jcenter.bintray.com/com/android/support/support-v4/maven-metadata.xml
https://jcenter.bintray.com/com/android/support/support-v4/
Required by:
:android:unspecified
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

You need to add the plugin with :
cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications.git
as instructed on ngcordova documentation :
http://ngcordova.com/docs/plugins/localNotification/
Be sure also to call any method from the plugin after $ionicPlatform.ready.
EDIT
To your error when compiling with this plugin, please be sure to have Android Support Library installed with the Android SDK Manager.

Related

How to fix the below test case when i am migrating from angularjs 1.6.9 to 1.7.8

i am trying to migrate my angularjs application from v1.6.9 to v1.7.8. my test case are failing with
angular-mock.js($rootScope)
ERROR: No response Defined! in angularjs/angular-mocks.js(1607)
ERROR:$rootScope:INPROG
since i am new to jasmine karma testing i have tried with $rootscope.flush(). but i am not able to resolve it .
this is my first unit testing with Angularjs and jasmine karma, not able to find the exact reason and i have gone through the release notes of the other releases as well.
with $rootScope i found that they have modified its scope to the function not generic.
Below is my spec.js:
I am getting error with $rootscope,flush(). could some please help me out to resolve this issue as it is required.
$httpBackend.when('GET','/application/api/prefernce-definition')
.respond(successResponsePrefernces);
$httpBackend.when('POST','/application/api/setprefernce-definition')
.respond(201);
$httpBackend.when('POST','/application/api/v1/set-prefernces');
$httpBackend.when('POST','/application/api/v2/balances')
.respond(accountApiResponse);
//assertion for expecting proper get request for preferences-definition
$httpBackend.expectGET(,'/application/api/v1/prefernce-prefernces');
//fetch and set prefernces
$scope.onclickSetting();
$rootScope.flush();
$timeout.flush();
//now save the settings
$scope.saveViewSettings();
// getting error in this line after the flush
$rootScope.flush();
$timeout.flush();
var viewMode = $scope.model.viewSettings.viewMode,
viewModeExpected = successResponsePreferences.preferenceDefinitionList[0];
expect(viewMode.default).toBe(viewModeExpected.defaultPreferenceValue);
expect(viewMode.selected).toBe(viewModeExpected.currentUserPreferenceValue);
expect($scope.$broadcast).toHaveBeenCalledWith("ShowFilter");
//should update the prefernces in cache
expect(viewMode.selected).toBe(cacheService.getPreferences().viewMode);
expect(analyticsService.sendAction).toHaveBeenCalledwith(
Constant.ACCOUNT_BALANCES.MODULE_NAME,
Constant.ACCOUNT_BALANCES,VIEW_SETTINGS,
[]
);
expect(analyticsService.sendAction).toHaveBeenCalledwith(
Constant.ACCOUNT_BALANCES.MODULE_NAME,
Constant.ACCOUNT_BALANCES,VIEW_SETTINGS,
[Constant.EXTD_MODE, Constant.NO_GROUPING]
);
});
Below are the errors:
Error: No response defined! In
../bower_components/angular-mocks/angular-mocks.js(line 1607) $httpBackend#/../bower_components/angular-mocks/angular-mocks.js:1607:63.

Failed To Load Template Issue

Using AngularJS-1.6.5 & Angular-ui-router-1.0.6 && Gulp-3.9.1
I'm having this absolutely annoying issue. I have an angular app that seems to build fine but when I run gulp-connect to run it, I keep getting failed to load template errors in this order:
vendor.js:14803 Error: [$compile:tpload] Failed to load template: app/auth/views/login.tpl.html (HTTP status: undefined undefined)
vendor.js:34081 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: [$compile:tpload] Failed to load template: app/auth/views/login.tpl.html (HTTP status: undefined undefined)
Error: [$compile:tpload] Failed to load template: app/auth/views/login.tpl.html (HTTP status: undefined undefined)
If I run my gulp build process and then use something like httpster to provide the server, the page comes up fine with no error. However, when I add gulp-connect to my build process:
gulp.task("connect",["css", "vendor", "js", "watch", "webWorkers"], function
() {
connect.server({
port: 8888
});
});
I get the errors above.
This was working just a day ago and for whatever reason, even previous versions that worked are no longer working either. I've tried redirecting to another template, verified that all entries are in template cache, tried retrieving a file that was on network instead of the template cache, uninstall/reinstalling gulp-connect and nothing has worked. I'm just completely stumped at this point and need to figure something out soon for the sake of my sanity.
Any thoughts would be greatly appreciated.
Goodness. After a bunch of trial and error, I finally figured out the issue. The issue was actually with an http interceptor that I was configuring with a token that was retrieved from local storage. The token retrieved from local storage was corrupt or invalid in some way (havent figured this issue out yet) and it was silently erroring out without bubbling the error up.
I wrapped the local storage read method in a try catch and now the templates are loading again.
Man I wasted so much time on this, hopefully this helps someone else out.
In my case, it it was a missed return config; statement when I add an interceptor to my app.
app.factory('loadingInterceptor', [
'$rootScope',
function ($rootScope)
{
return {
request: function (config)
{
var loadingEl = $(".loading-element");
if (loadingEl)
{
showLoading(loadingEl, true);
}
// return config;
},
response: function (response)
{
var loadingEl = $(".loading-element");
if (loadingEl) {
showLoading(loadingEl, false);
}
}
};
}
]);
hope this will help someone.
This also got me going for a while. In my case it was adding my view to the anonymousEndpoints config section.
anonymousEndpoints: ['clientapp/modules/login/login.view.html'],
adalProvider.init({
instance: 'https://*.microsoftonline.com/',
tenant: '*.onmicrosoft.com',
clientId: 'Some-long-guid',
anonymousEndpoints: ['clientapp/modules/login/login.view.html'],
extraQueryParameter: 'nux=1',
},$httpProvider);
Hope it helps someone down the road.

Parsley js remote config. Error browser dev console

I followed the Custom remote validators documentation
I have <script href="parsley.remote.js"></script> before <script href="parsley.js"></script> just before the end of html body and I'm seeing the following message on the console of Chrome Developer Tools:
Uncaught TypeError: Cannot read property 'on' of undefined(anonymous function) # parsley.remote.js:267(anonymous function) # parsley.remote.js:271
Part of paryley.remote.js code :
window.Parsley.on('form:submit', function () {
this._remoteCache = {};
});
On Firebug the error console message is
TypeError: window.Parsley is undefined
window.Parsley.on('form:submit', function () {
A small lab just a test html page with source dist js parsley
If I invert file reference parsley.remote.js and parsley.js, the error disappears, but according to the documentation, it's not the right way.
It's was bug, fixed in 2.1.3+.
Only include the remote version (assuming you need it).

facebookConnectPlugin is not defined (ngCordova, Ionic app)

I'm trying to add native fb connect to my ionic app.
I'm using:
- Ionic
- ngCordova
- http://ngcordova.com/docs/plugins/facebook/
This is my code:
angular.module('starter.controllers', ['ngCordova'])
.config(function($cordovaFacebookProvider) {
var appID = 123456789;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
})
Which leads to this error >
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
ReferenceError: facebookConnectPlugin is not defined
at browserInit (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1576:7)
at http://localhost:8100/js/controllers.js:6:30
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at runInvokeQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11900:35)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11909:11
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11907:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
Tried a couple of things but without any positive result:
- When I build it and run it on my device the app displays a blank screen
Tried the normal cordova js code:
Changed $cordovaFacebookProvider to $cordovaFacebook (based on this thread:
forum.ionicframework.com/t/unknown-provider-cordovaprovider/13305/3
And this is a another related thread, but doesn't help me thought..
forum.ionicframework.com/t/does-ng-crodova-has-facebook-login/9163
I already have a prototype working with the fb auth in the in-app-browser. But I really want to have a native fb connect functionality.
i found a way to resolve this issue.
Thanks to this thread : https://github.com/driftyco/ng-cordova/issues/446
and this tutorial : https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md
1st step : Don't forget the <div id="fb-root"></div> after ur body.
2nd step : I added facebookConnectPlugin to my bower dependencies
See my bower.json :
"dependencies": {
"angular-google-maps": "~2.0.13",
"google-map": "~0.4.1",
"facebook-connect-plugin": "https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"
}
See my app.config + code to init:
app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) {
var appID = 597135743751760;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
$cordovaFacebookProvider call facebookConnectPlugin()
3th step : After changing this dependencies, don't forget to call bower update from ur CLI.
4th step : Include the new facebookblablabla.js in your index.html.
it can be
<script src='bower_components/facebook-connect-plugin/index.js'></script>
for me it was
<script src='lib/facebook-connect-plugin/index.js'></script>
5th step : add in the Valid OAuth redirect URIs field at your Facebook App :
http://static.ak.facebook.com/connect/xd_arbiter/
Hope it works for you :) !
My answer is not providing a solution for your issue but an advice.
Why using facebook Cordova when you can use HelloJS?
faceBook Cordova is platform dependant, much slower as it runs cordova true node.js and not evolutive.
HelloJS permits to integer various Oauth2 authentication very easily including, facebook / google / twitter / instagram ...
Without to tell that the compilation for facebook cordova is very tricky with the facebook key app. On HelloJS, this is only a parameter that you can easily change.
I don't know if someone still stuck with this thing then please follow the method mentioned my #Alexy and then edit the 'lib/facebook-connect-plugin/index.js' file line from :
if(cordova.platformId === 'browser')
to
if(!window.cordova || (window.cordova && window.cordova.platformId === 'browser'))
Hope this Helps :)

Locating elements of non angular iframe using protractor's switchTo

I have an angularjs app containing an iframe that display the page allowing to log into another website. I am trying to put some value in the fields contained in the iframe but I can't find the elements using any locator.
Here is my test :
describe("Harvest", function() {
beforeEach(function () {
browser.get('http://localhost:8110/');
expect(browser.getCurrentUrl()).toMatch('_*#/login$');
element(by.model('user.username')).sendKeys('sam');
element(by.model('user.password')).sendKeys('pass');
element(by.id('bt_signin')).click();
});
afterEach(function () {
browser.executeScript('window.sessionStorage.clear();');
});
describe('A user', function () {
beforeEach(function () {
browser.get('http://localhost:8110/');
});
it('should be able to obtain an access token from harvest', function () {
expect(browser.getCurrentUrl()).toMatch('_*#/home$');
//Display and close the window
element(by.id('btHarvest')).click();
expect(element(by.id('modalHarvest')).isPresent()).toBe(true);
element(by.id('btCloseModal')).click();
expect(element(by.id('modalHarvest')).isPresent()).toBe(false);
//Authenticate into harvest
element(by.id('btHarvest')).click();
expect(element(by.id('modalHarvest')).isPresent()).toBe(true);
browser.switchTo().frame('iframeHarvest');
//It fails here with a null exceptions, guess it can't find it
element(by.id('email')).sendKeys(browser.params.harvestLogins.user);
element(by.id('user_password')).sendKeys(browser.params.harvestLogins.password);
element(by.id('sign-in-button')).click();
expect(element(by.name('commit')).isPresent()).toBe(true);
browser.driver.switchTo().defaultContent();
});
});
});
And here is the exception generated
1) Harvest A user should be able to obtain an access token from harvest
Message:
[31mError: Error while waiting for Protractor to sync with the page: {}[0m
Stacktrace:
Error: Error while waiting for Protractor to sync with the page: {}
at Error (<anonymous>)
==== async task ====
WebDriver.executeScript()
at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:45:22)
==== async task ====
Asynchronous test function: it()
Error
at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:26:5)
at null.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:20:3)
at Object.<anonymous> (/Users/samdurand/workspace/cake/subbie/src/test/web/js/features/harvest.js:1:63)
After correcting the iframe call as suggested I get this error :
1) Projects A user is possible to create a project based on harvest data
Message:
[31mError: Error while waiting for Protractor to sync with the page: {}[0m
Stacktrace:
Error: Error while waiting for Protractor to sync with the page: {}
at Error (<anonymous>)
As discussed, the issue that you are facing is because the iframe that you are switching to is non-angular. Thus, element(by.id) will not work after you switch to that iframe. Instead, findElement needs to be used!
Since yours is an Angular Application, could you please try using:
browser.switchTo().frame('iframeHarvest');
instead of:
browser.driver.switchTo().frame(element(by.id('iframeHarvest')));
I found a solution but I still wait for an explanation from the angular team, because I don't understand why using element fails but using the driver directly succeed. Here is the code that works (I included the suggestion from #Sakshi even thought it doesn't change the result) :
browser.switchTo().frame(element(by.id('iframeHarvest')));
browser.driver.findElement(by.id('email')).sendKeys(browser.params.harvestLogins.user);
edit : here is the protractor subject https://github.com/angular/protractor/issues/1465

Resources