My website works fine on Chrome but is broken on Apple Mobile Safari.
I have troubleshot the situation and have found that it is the below line of code placed in side of my angular controller that is causing the problem. With out this code everything works fine.
The code takes all images on the page and puts them inside of an array. Anything I can do differently to ensure proper compatibility? Thank you!
$scope.load_picture_cotent = function () {
$scope.pictures = Array.from(
document.querySelectorAll
('div.album [style^="background-image"]')).map
(el=>el.style.backgroundImage.replace(/url\((.*)\)/,'$1')
.replace(/"/g,'')
.replace(/thumbnails/,'highresolution'));
console.log($scope.pictures);
}
You can also view the website here.
Please let me know if you need any more information or would like me to expand my post to include more information.
you are using ECMA 2015 lambda notation, try to wrap this with babel and try it again, did you check the browsers compatibility status with ECMA Script 2015?
Thank you bretanac93.
He was right, I was using a newer version of Javascript than is currently supported by browsers.
He recommended I use Babel which is a compiler that converts new Javascript to a compatible Javascript.
I used babel to compile the compatibility javascript and it works like a charm.
Related
This is just for describing the issue and sharing my solution, I got stuck a lot of time on it.
This issue happened after I upgraded the Angular 10 -> 11 and changed the builder from udk:udk-runner to #angular-devkit
The issue I was facing is when I set the field bundleDependencies in angular.json to true . The Puppeteer cannot start with the error cannot launch the browser
Then I found it also happened on the other external libraries I'm using at the Server side like BullJS Bull-Board Puppeteer-Cluster with the below error
Github source for demo the issue: https://github.com/phattranky/angular-ssr-error-with-pupepteer
The solution is quite simple you just need to add externalDependencies below the field bundleDependencies, which are the libraries we are using.
"externalDependencies": ["puppeteer", "puppeteer-cluster", "bull", "bull-board"]
Sample:
What is the externalDependencies ?
https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/builders/server/schema.json
If you have the better solution and any feedbacks, please share for me. Thanks
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.
I have the following line of code in an AngularJS project
$scope.listOfServices = ([].concat(...arrayOfResults.map(item =>item.data.trainServices))).filter(item => item);
This code works perfectly, however PHPStorm is kicking off saying its full of errors and it expects a new line and so on. This means on the rare occasion I reformat my code as I had a late night coding and got messy, PHPStorm moves the code around and breaks it.
I have AngularJS plugins, JavaScript plugins etc. What plugin can I install to STOP PHPStorm thinking the above line is broken.
You are right!!!
myFunction(...iterableObj); = Spread-Operator - This should be supported by PHPStorm JavaScript syntax validator.
You may going to create a bug issue over here: youtrack.jetbrains.com. PHPStorm supports JavaScript highlight / syntax autfill / validations so there should be no need for a third party plugin.
I'm using Angular on my site, but I've been having reports on it often not working. Often users have to try different browsers/devices to get it to work. On my computer it works fine on Chrome, Opera and Firefox, latest versions. I've had reports of the page not working for visitors when using Firefox (version 31.6.0) and Safari though.
I have a smartphone of brand Öwn (Chilean or Peruvian I think), and the angular code does not work on this phone. I've tried using Chrome and the Öwn browser (some browser of their own). I have expandable content powered by jQuery, and that works fine, so it's definitely only Angular the page has problems with.
I tried removing all dependencies (using ngAnimate and ui.bootstrap for datepicker, and ngDialog), but still doesn't work on my phone.
I'm sorry I don't have more details. This is the page where the problems happen:
https://www.easterisland.travel/tours/
Does anyone have a clue? Thank you!
The problem in the end was in the code of an Angular function. When declaring a new object, I hadn't applied a value to one of the variables. This:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP};
should have been this:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP: savingsPP};
It was tricky since some browsers accepted it (Chrome and later Firefox) but many didn't. To locate the problem I checked error console of Safari Mac, and all it said was that angular.min.js.map and angular-animate.min.js.map were missing. .map files are for showing debug messages with minified code. Once the .map files had been added (find .map files for angular here, clicking folder for your angular version), the error console showed me exact location of the error.
I'm working on an AngularJS web app using the ngbp framework (formerly ng-boilerplate) which by default uses AngularJS 1.2. The project is in early stages so we're experimenting with using AngularJS 1.3 instead of 1.2, as it has some nice features we'd like to make use of. We're also working under the assumption that AngularJS 1.3 will likely be the release version by the time we go live.
So I simply switched the AngularJS version number in the bower.json file and everything seems to work fine in Chrome, Safari, and Firefox except for when I enable strict dependency injection (ng-strict-di). When strict DI mode is on I get the error below (more detail here), but it only occurs in Chrome (FF & Safari both still work as expected).
Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-build.3121+sha.a4520a7/...)
at http://localhost:8080/assets/ngbp-0.3.2.js:87:12
at annotate (http://localhost:8080/assets/ngbp-0.3.2.js:3352:17)
at Object.invoke (http://localhost:8080/assets/ngbp-0.3.2.js:4036:21)
at runInvokeQueue (http://localhost:8080/assets/ngbp-0.3.2.js:3964:35)
at http://localhost:8080/assets/ngbp-0.3.2.js:3973:11
at forEach (http://localhost:8080/assets/ngbp-0.3.2.js:338:20)
at loadModules (http://localhost:8080/assets/ngbp-0.3.2.js:3954:5)
at createInjector (http://localhost:8080/assets/ngbp-0.3.2.js:3894:11)
at doBootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1494:20)
at bootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1509:12
It seems that for some reason the angular source code itself is failing the strict DI test and thus won't load in the Chrome browser from within the ngbp framework. The above error comes from a fresh clone of ngbp with the only change being the version of AngularJS (1.3), not from our actual project (though the error is the same in both cases). I know that this version of ngbp doesn't officially support Angular 1.3 but as I said the app seems to work just fine with this change, even though it fails this test. I'm wondering if anyone might have some insight into what is causing this error and whether or not it would be ill-advised to proceed with this combination of AngularJS 1.3 and ngbp (version: 0.3.2)? Is there something else within ngbp that needs to be changed along with the version of AngularJS?
If it helps I'm serving up the files locally via cd ../bin; http-server -p 8080. If any other information would help just let me know and I'd be happy to provide it if possible.
Thanks for your time.
EDIT: If it helps I tested on OS X 10.9.4 with the following browser versions:
Chrome (Version 36.0.1985.143)
64-bit Chrome (Version 37.0.2062.94)
Firefox (31.0)
Safari (Version 7.0.5 (9537.77.4))
Looks like you might be using batarang, it does not work well with ng-strict-di. Try disabling batarang from google chrome developer tools and the app should start normally again.
[edit] AngularJS batarang now support ng-strict-di since v0.5.0. This error should no longer happen.