I need help using history.replaceState on an Angular 1.x app.
My Chrome extension interacts with someone else’s app, and I want to load a Url in that app with an extra query parameter that my extension can read, and then use history.replaceState to remove from the url.
Step 1: open www.otherapp.com?extensionToken=MhtkWGUyS#/settings
Step 2: read xtensionToken=MhtkWGUyS
Step 3: replace/remove token with replaceState to www.otherapp.com#/settings
The trouble is that Angular 1.x doesn’t like history.replaceState to be used on its own: https://github.com/angular/angular.js/issues/3789
Angular seems to revert my update back to the original Url, or scramble the Url altogether. Does anyone have experience using history.replaceState with an Angular app?
One solution I thought of was to use Angular’s $location to make the state-change, but I’m don’t know how to access $location outside of the Angular scope. Does anyone know how I might access that?
The tricky part of generating a reference to $location is that my code will run with many different apps, with their own unique angular ng- elements, and I don’t know what those elements are on the page. I can assume that most have Angular at window.angular, but I can’t easily assume what the Angular app element will be for each page.
Related
I love React, it has quickly become my favorite development tool. It is a fantastic library that creates the kind of flexibility I've always dreamed about.
That said, I'm having a very hard time getting Facebook login to work with React in production.
I have tried all of the following methods. In all three cases, I implemented the examples exactly as shown in the code using the simplest possible technique:
https://github.com/seeden/react-facebook
https://github.com/keppelen/react-facebook-login
http://jslancer.com/blog/2017/11/27/facebook-google-login-react/
Everything works great in development. :)
When I create the production build using create-react-app and push it live, it breaks and reports: Error: Facebook is not initialized or Uncaught TypeError: Cannot read property 'login' of undefined where undefined is FB.
Basically it seems like the Facebook javascript SDK is not loaded or initialized.
The first two links above are for existing component libraries, but the third is a custom implementation that places the Facebook initialization code in the index.html file and creates an event listener. The results are the same in all three examples.
It is as if something about the create-react-app compression method is obfuscating the variables to the point that Facebook can no longer work, or at least is not available to the react code. This includes all calls to window.FB as recommended in many tutorials.
I've been working at this for a couple of weeks now (off and on) and am now turning to the hive mind. Anyone have any ideas on how to get Facebook to actually work with Facebook's own code library (React)? It seems so painfully odd that it causes this much trouble and I have been unable to find a clear solution that works in production.
Most of the debugging steps are already mentioned in the comments section.
Here are the steps laid down:
1) Check the network tab in your browser's console and see if the request to load FB's SDK is successful or not
2) Most common culprit is some extension like Ad-Blocker blocking such async requests which loads JS on your web page. Disable it or try it incognito mode
3) Other common mistake I have seen is forgetting to use the FB.init({ // config }); function - which is the actual call which initializes the fb sdk and makes available the FB variable globally.
I'm interested in using Hot Module Replacement with a newly created React app.
Facebook Incubator's create-react-app uses Webpack 2 which can be configured to support HMR, however in order to do so, one needs to "eject" the create-react-app project.
As the documentation points out, this is a "one way" operation and cannot be reversed.
If I'm to do this, I want to know what I might be giving up. I've been unable to locate any documentation that explains the potential drawbacks of ejecting.
The current configuration allows your project to get updates from create-react-app core team. Once you eject you no longer get this.
It's kind of like pulling in bootstrap css via CDN as opposed to downloading the source code and injecting it directly into your project.
If you want more control over your webpack, there are ways to configure/customize it without ejecting:
https://www.npmjs.com/package/custom-react-scripts
Which is best way to use in protractor ?
var driver = browser.driver;
driver.get("URL")
or
browser.get("URL")
browser.manage().timeouts().implicitlyWait(browser.params.implicitWaitTime);
Currently I have used second approach to open URL and perform any browser action. Should I change everything like first approach or my approach is nice to go ahead ?
My two cents
If its a non angular application - go For browser.driver.get()
If not go for browser.get('')
browser.get understands the angular cycle and waits for the angular activity to finish
from documentation - API Documentation
Navigate to the given destination and loads mock modules before
Angular. Assumes that the page being loaded uses Angular. If you need
to access a page which does not have Angular on load, use the wrapped
webdriver directly.
If you are using browser.get() then you dont need a implicit wait and ideally you should avoid using it
I'm trying to merge large existing web app into sails.js. so I moved the folders into assets and build a custom route , 'GET /': '/assets/client/launch.html' and get 404 when I point my browser to http://localhost:1337/ as the / is correctly redirected to http://localhost:1337/assets/client/launch.html which produces the 404.
Now the file exists in the folder assets/client (and in .tmp), so I am thinking the Sails router is getting in the way.
I would leave the client (70K lines of JS) that generates all the UI dynamically and sailjs server that provides authentication separate and enable CORS but my customer wants client packaged with server. This type of operation is simple in frameworks like ASP.NET MVC but am wondering if Sails is up to the task.
Well, If everything you tried did not work out. There might be another solution ,
First of all since you are talking about sails app I am assuming other bundle must be sails as well ,
So here is what you do-
Change the port for another app that you want to attach to this.
Second whenever you want to go to page on another app simply redirect the client to another port ie
in html or esp put a href tag with different port.
<a href="localhost:PORT/route_to_file">
</a>
I got it working by placing my app into assets where we need to launch from assets/client/index.html as there would be too many dependencies to change. As I said above could not just add a route as Sails must getting in the way. However as in Chapter 3.2.2 of Sails in Action I generated a static asset npm install sails-generate-static --save. then I redirected to assets/client/index.html. As an aside that book is great and would highly recommend it.
I've started investigating alternatives to my project and a few questions came out that I couldn't answer by myself.
The problem is: I want to create a web page able to access multiple Magento instances installed in the same server. Currently, I have one Magento instance per client and this project will access several Magneto instances to export reports from each one (for example).
The alternatives I thought til this moment are:
Have another Magento instance, create a new module within it that changes its 'database target' before triggering operations/queries;
Questions until this moment:
Can I 'change the database target' of a Magento instance?
How can I access data from a Magento instance without appeal to SOAP/REST?
I want to re-use some components (grids, tabs, forms..) from Magento, that's why I'm not considering an independent project (Zend, for instance) that can access this code from another projects. Does it make sense?
Any other idea?
==Edited==
Thanks by the tips and sorry by my ignorance. The comments let me believe that I'm able to execute something like this:
// File myScript.php
require '/home/DOMAIN1/app/Mage.php';
Mage::app('default');
// get some products from DOMAIN1
require '/home/DOMAIN2/app/Mage.php';
Mage::app('default');
// get some products from DOMAIN2
Is it right? Can I execute require twice (and override things from first require)?
==Edited2==
I'm still trying to connect to several Magento instances from a single third party file. Is there any tip? I'm facing several/different errors at this moment.
The only thing I know is that I can still rely on SOAP to get the information I need, but this will be expensive.
Thanks!
The easiest way would be to include Mage.php from each shop instance. You would need to use namespaces or some other trickery to be able to load more then one.
Or if that doesn't work - make your own API in a separate file to get what you want from one shop, and combine the results in the PHP-file that calls the API.
Here's a sample on how to use Magento functionality outside of Magento:
require 'app/Mage.php';
if (!Mage::isInstalled()) {
echo "Application is not installed yet, please complete install wizard first.";
exit;
}
Mage::app()->setCurrentStore(Mage_Core_Model_App::ADMIN_STORE_ID);
// your custom code here, for example, get the product model..
$productModel = Mage::getModel('catalog/product');