Google's gapi js library wants an onload function specified like this:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
How do I interoperate this with ReactJS?
I tried using react-script-loader (https://github.com/yariv/ReactScriptLoader) which ran into some troubles because gapi doesn't yet exist when the script loader thinks it has completed returning it.
Don't know if you're still looking for this answer but I faced the same problem and the best option that I found was creating this package with all gapi script code, so now I just have to import it into my react app and I doesn't even have to wait the gapi script loaded from google apis link.
gapi-script package
I also created an example showing how you can use this package:
gapi-script example
Related
I have a tricky situation over here. I have used an npm module:- use-places-autocomplete to get autocomplete suggestions from google maps autocomplete API. Below is the link for the npm module and the CDN link I am using in my react app in public index.html.
Link:- https://www.npmjs.com/package/use-places-autocomplete
CDN:- "https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&libraries=places®ion=us"
The issue is coming when I am testing this link in tests. I am using Jest and React testing library. I am not getting any response (mock response which i have hardcoded in the codebase) when i start typing in the address.
I have tried the following things:-
Mocking the use-places-autocomplete response. But it did not work.
Using MSW for intercepting the CDN. It also didnt work.
In the test suite, adding the script of Google API in beforEach and then rendering the component. It also didnt work.
Can anybody please help me in this. Thanks in advance.
Goal:
Enable to run the tensorflow.js toxicity classifier demo in the local computer.
Problem:
Based on instruction "https://github.com/tensorflow/tfjs/issues/149"
"You cannot call imports in a browser since browsers don't support such imports. Instead of loading tfjs as import * as tf from '#tensorflow/tfjs';, you need to import the library by either transpiring the node module and load it as a bundle using tools like webpack or load it using ready-to-use cdn mentioned here."
I have removed "import * as tf from '#tensorflow/tfjs';" and started to use
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#latest"></script>
But I still retrieve an error message
"Uncaught (in promise) ReferenceError: toxicity is not defined
at predict (index.js:71)
at index.js:95"
What part do I need to fix in order for everything to be working?
https://jsbin.com/wiqigayoqu/edit?html,js,console,output
Thank you!
Info:
*I'm new in Tensorflow.js
*The raw of the source code is located "https://github.com/tensorflow/tfjs-models/tree/master/toxicity/demo"
* https://github.com/tensorflow/tfjs-models/tree/master/toxicity
*I don't know if you are enabled to see the code problem at jsbin and I have used the file index.html and index.js from "https://github.com/tensorflow/tfjs-models/tree/master/toxicity/demo" and used it in my local computer.
https://stackblitz.com/edit/typescript-tkmkho
Apply the code as typescript in stackblitz.
I'm currently trying to build a web app compatible with the Google Progressive Web Apps specs. To do this i use Angular with Dart and Polymer based Webcomponents instead of the Angular components. So far everything works as expected. To make the app offline capable utilizing the Service-Worker API i use the following dart lib: https://github.com/isoos/service_worker
Using either Polymer or Service-Worker works fine but combining booth just exits with an error on app startup.
This is my AppComponent startup routine:
// ... other imports
import 'package:service_worker/window.dart' as sw; // <-- import alone causes the error
Future main() async {
await initPolymer(); // <-- causes the error in combination with the import above
bootstrap(AppComponent);
if (sw.isNotSupported) {
print('ServiceWorkers are not supported.');
return;
}
//... initializing service worker
}
The error occurs even if i'm not initializing the Service-Worker, importing the Service-Worker module is enough to cause the error.
Building the app works without any errors.
I'm new to Dart and the Polymer and Angular eco systems and the error message i get is not very helpful to me:
Uncaught Error: NoSuchMethodError: method not found: js_helper.dart:1742 'h' (J.Q(...).h is not a function)
at Object.J.H (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9747:15)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10559:1584
at Isolate.e.(anonymous function) (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:10608:15)
at Object.yK (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9291:22)
at http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:9282:10
at yM.a (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2612:72)
at yM.dart.yM.$2 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2828:24)
at y9.dart.y9.$1 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:2824:31)
at xM.bi (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3767:40)
at xk.$0 (http://127.0.0.1:8080/index.bootstrap.initialize.dart.js:3167:16)
Can you give me a hint what could cause the error and how to fix it? I would very much like to use the Polymer components instead of the plain Angular components but i need the Service-Worker for offline caching support.
This looks like an issue caused by incompatibility between dart:js (the old style, used by the original polymer package) and package:js (the new style, used by all new packages, including package:service_worker).
You might want to have a look at the polymerize project, which brings Polymer via the new-style interop. Then you'll have no conflict.
Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!
just purchased Angle - Bootstrap Admin app from wrapbootstrap
Tried to run the angular-meteor version of the app
The first issue was that meteor did not like the contents of the default index.html, so I renamed the file to be index.ng.html
Now the error I'm getting in the browser console is:
TypeError: $browser.addPollFn is not a function angular-cookies.js:60
What can be done to fix this?
Not sure about wrapbootstrap, but generally this error means you are using incompatible versions of angular and angular-cookies.
The external angular modules you use (e.g. ngAnimate, ngCookies, ngResource, ngRoute etc), should always be the same version as angular.
This issue can be Resolved by using same Version of angular.min.js and angular-cookies.js.
It always good to use same version of files