We Keep Coding

Vue warn: Error in created hook: "TypeError: Cannot read property 'get' of undefined"

When I use axios I got this error:
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'get' of undefined"
export default {
methods: {
loadUsers(){
axios.get("api/user").then(data => (this.users = data));
}
},
created() {
this.loadUsers();
}
}
Routes:
api.php
Route::apiResources(['user' => 'API\UserController']);
Controller:
API/UserController.php
public function index()
{
return User::latest()->paginate(5);
}

You need to import Axios first:
import axios from 'axios'
export default {
// ... axios.get will work now
}

I was getting same error .this error comes due to the vue cannot identify the get property which is belongs to the 'vue-resource' package so my recommendation is need to import package it will help to resolse this issue follow below step
first check 'vue-resource' installed on your project
otherwise install it
npm install vue-resource
In main.js file include this
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);

Ionic 3 app with cordova-plugin-chrome-apps-sockets-tcp. Livereload trouble

I am using cordova-plugin-chrome-apps-sockets-tcp in my android application. In this app I am trying to connect to TCP/IP server. Example of my code:
export class HomePage implements OnInit {
constructor(public navCtrl: NavController) {}
ngOnInit() {
(<any>window).chrome.sockets.tcp.create({}, createInfo => {
let socketTcpId = createInfo.socketId;
(<any>window).chrome.sockets.tcp.connect(socketTcpId, "127.0.0.1", 12345, result => {
console.log("Connected to server");
});
});
} ...
I uploaded this code to android emulator V 7.1.1 using command:
ionic cordova run android --prod --emulator --livereload --consolelogs
During the first run my application succesfully connects to TCP/IP server. But if I will press CTRL-S and livereload process will starts, after reloading I see error and warn messages:
console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.
Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'sockets' of undefined at HomePage.ngOnInit
I tried to fix it with reinstalling of plugin, removed and added android platform, I tried to use window.plugins or window.cordova.plugins, but them are undefined and solved my problem. Can you help me, please?
After declaration of chrome variable, code:
import {
Component,
OnInit
} from '#angular/core';
import {
NavController
} from 'ionic-angular';
declare var chrome;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {
constructor(public navCtrl: NavController) {}
ngOnInit() {
chrome.sockets.tcp.create({}, createInfo => {
let socketTcpId = createInfo.socketId;
chrome.sockets.tcp.connect(socketTcpId, "127.0.0.1", 12345, result => {
console.log("Connected to server");
});
});
}...
First run - all working. After livereload I see message: ReferenceError: chrome is not defined. After that if I will replace declaration of chrome:
} from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
declare var chrome;
export class HomePage implements OnInit {
it will call the Runtime error "'Home Page' declared by the module...", and after that if I will put declaration back and press CTRL-S - all will work again and I will connect to server, where am I wrong?

You must call it with (<any>window)
Example:
(<any>window).chrome.sockets.tcpServer.create({}, function(createInfo) {
alert('Created')
this.listenAndAccept(createInfo.socketId);
});

Trying to integrate braintree-web into Angular2

I am trying to use the Braintree SDK (braintree-web) in my Angular2 app. I'd really appreciate any pointers on how to get this working. I think it is because I am not importing the braintree-web module, but I can't figure out how to to that either. I can find any exports in the whole module.
Here is where I am:
I've imported the braintree-web library and a typings file I found.
ng install --save braintree-web
npm install #types/braintree-web#3.0.1
I tried to hack the JS example Braintree provides into a Angular2 TS Component, but I keep getting an error:
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in
./UpaccountComponent class UpaccountComponent - inline template:5:7
ORIGINAL EXCEPTION: TypeError: this.braintree.setup is not a function
Here is the .ts file.
import { Component, OnInit } from '#angular/core';
declare var braintree:any;
#Component({
selector: 'up-btcheckoutform',
templateUrl: './btcheckoutform.component.html',
styleUrls: ['./btcheckoutform.component.css']
})
export class BtCheckoutFormComponent implements OnInit {
braintree = require('BrainTreeWeb');
// braintree = require('braintree-web');
integration: any
constructor() { }
ngOnInit() {
var c = this;
var clientToken = "CLIENT_TOKEN_GOES_HERE";
braintree.setup(clientToken, "dropin", {
container: "payment-form",
onReady: function(int) {
c.integration = int
}
});
}
ngOnDestroy() {
this.integration.teardown();
}
}

I'm not sure about the usage of braintree-web specifically, but if you're using webpack, remove the lines declare var braintree:any; and braintree = require('BrainTreeWeb');
You'll also need to add the braintree-web/index.js file to the bundle, unless they've got a UMD module.
From a quick glance at braintree-web, it looks like braintree.setup(..) isn't a function. Something like this might be equivalent:
braintree.client.create({
authorization: "long-token-string"},
(err, client) => {
// Do stuff here
client.request({..});
});
With the package installs, you'll need to have added --save-dev to the types install.

I have integrated the brain-tree the same way as you have done and it works.
I've just installed one more command
first install
npm install #types/braintree-web#3.0.1er
then install
npm install --save braintree-web#2.30.0
and use
braintree = require('braintree-web');
Again if it asks for braintree is not defined then remove declare var braintree:any;
and replace bellow code
braintree.setup(clientToken, "dropin", {
container: "payment-form",
onReady: function(int) {
c.integration = int
}
});
with
this.braintree.setup(clientToken, "dropin", {
this.container: "payment-form",
onReady: function(int) {
c.integration = int
}
});
Edit:
just declare the var after import declare var braintree:any; if your working with angular 4 then declare declare var require: any;

You can also import it via:
import * as braintree from 'braintree-web';

Refer this:
Refrring 3rd party JS libraries in angular 2
It's a universal solution. You don't even need to use any npm packages. Just simply refer BrainTree JS libarary in index.html and follow the steps documented in above link. It's applicable for any JS library.

Auth0-js with Angular 2 (RC5), Webpack and CLI

I'm trying to implement auth0 into my Angular 2 project, and I don't want to use the lock widget but instead customize my own login form and buttons for social login. So I want to use the auth0-library on it's own. And I want it to be bundled, so not import it in index.html.
I've used the CLI to scaffold my project (1.0.0-beta.11-webpack.2) and installed auth0-js with NPM. I can find the 'auth0-js'-folder in my node_modules, now I just have to connect it to my app somehow.
// login.component
import { Component } from '#angular/core';
import * as Auth0 from "auth0-js";
#Component({
selector: 'app-login',
templateUrl: 'login.component.html',
styleUrls: ['login.component.css']
})
export class LoginComponent implements OnInit {
auth0: any;
constructor() {
this.auth0 = new Auth0({
domain: 'myDomain',
clientID: 'myClientId',
callbackURL: '{http://localhost:4000/}', // in dev-mode
callbackOnLocationHash: true
});
}
loginWithGoogle(connection) {
this.auth0.login({
connection: 'google-oauth2'
});
}
}
But I get this console message from Webpack:
ERROR in [default] ......... /node_modules/#types/auth0-js/index.d.ts' is not a module.
It seems the app is working, although the typings doesn't work. I've installed with npm i #types/auth0-js --save and it installs the typings to my node modules as expected.
Seems it's something wrong with the typings, but what? And is it something I can fix myself or do I have to wait until someone updates the typings to be modular?
Thanks!!

I have not used Auth0. But I think this should work.
main.ts
import 'auth0-js/standalone';
// Add this to test it.
var auth0 = new Auth0({
domain: 'mine.auth0.com',
clientID: 'dsa7d77dsa7d7',
callbackURL: 'http://my-app.com/callback',
responseType: 'token'
});
Quick typings work around src/typings.d.ts
declare var Auth0: any;
A better way to do typings:
Install the auth0 typings https://www.npmjs.com/package/#types/auth0
Update your tsconfig "types": ["auth0"]

How to get systemjs to load module from CDN that is in global format?

The error that I am getting is:
EXCEPTION: ReferenceError: cast is not defined in [null]
Writing a custom Chromecast receiver application requires the use of the following js file that exposes the functionality via a global 'cast' variable:
//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js
I want to load this script as a module using systemjs instead of having a script tag in index.html.
This is an Angular2 and TypeScript application so in some service, MyService, I want to be able to import 'cast' and use it.
index.html
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
'cast': '//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js'
},
meta: {
'//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js': {format: 'global'}
},
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
myService.ts
import {Injectable} from 'angular2/core';
import cast from 'cast';
#Injectable()
export class MyService {
public init = () => {
cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.NONE);
}
...
}
A sample Angular2 + TypeScript + Chromecast Receiver application can be cloned from:
https://github.com/rmtuckerphx/angular2-chromecast-receiver-starterkit
This code doesn't currently have any code to load 'cast' using systemjs but could be quickly modified by updating index.html and cast-receiver-manager.service.ts

Try adding
map: {
cast-receiver: '//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js'
}
to your system config then declaring the thing you would like to import from the script in your service via,
declare var cast;
this will allow your compiler to recognize the name of the thing you are importing.