I did the lighthouse test on my website the report shows some issues but I don't know where to start to fix these issues
I see one of the issues fix to enabling text comparison
I am using Angular.JS with gulp
my backend Node.js
I tried using https://www.npmjs.com/package/compression but nothing changed
function shouldCompress(req, res) {
if (req.headers['x-no-compression']) {
// don't compress responses with this request header
return false;
}
// fallback to standard filter function
return compression.filter(req, res);
}
app.use(compression({ filter: shouldCompress }));
Related
I have been using prerenderIO for the past 3 years, but with recent changes to their subscription plan, it has become too expensive. I'm in need of a new solution as soon as possible. I use MEAN stack (MongoDB, Express, AngularJS) and don't have the time to learn server-side rendering, which is why I initially used prerenderIO.
Despite my attempts to return a static .html file, it still runs my AngularJS code and retrieves data from MongoDB.
I have tried debugging the crawl using the Facebook Debugger, but the issue remains unresolved.
app.get('/blog/best-place-in-xxx', (req, res, next) => {
if (!isCrawler(req.headers['user-agent'])) {
// Serve the pre-rendered HTML file
res.sendFile(__dirname + '/app/public/best-place-in-xxx.html');
return;
} else {
next();
}
});
function isCrawler(userAgent) {
const crawlers = [
'googlebot','bingbot','yandexbot','baidubot','facebot'
];
for (const crawler of crawlers) {
if (userAgent.toLowerCase().indexOf(crawler) !== -1) {
return true;
}
}
return false;
}
Can someone help me find a good alternative that won't negatively impact my Google ranking?"
I have migrated our Angular JS app to Hybrid app. I am using Angular6/AngularJS (1.6) hybrid app. I am trying to run protractor e2e of the existing e2e tests for angular js pages. All test case are failing with the below reason.
button is not clickable at point (386, 20)
I am using Angular-Cli project. If I am trying to run this test individually they are passing. They fail when I am running in multiple tests together in a suite.
My protractor version : protractor": "^5.3.2
"webdriver-manager": "12.0.6",
"selenium-webdriver": "4.0.0-alpha.1",
I also tried with different version of protractor and selenium, but still got the same problem. I also tried applying the fixes below. That is also not working.
1)
var elem = element(by.id('yourId'));
browser.actions().mouseMove(elem).click();
2)
browser.waitForAngularEnabled(false);
Failed: unknown error: Element ... is not clickable at point (386, 20). Other element would receive the click: ...
(Session info: chrome=67.0.3396.99)
(Driver info: chromedriver=2.40.565498 (ea082db3280dd6843ebfb08a625e3eb905c4f5ab),platform=Windows NT 10.0.15063 x86_64)
at Object.checkLegacyResponse (\node_modules\selenium-webdriver\lib\error.js:546:15)
at parseHttpResponse (\node_modules\selenium-webdriver\lib\http.js:509:13)
at doSend.then.response (\node_modules\selenium-webdriver\lib\http.js:441:30)
Node Version: `8.11.3
Protractor Version: 5.3.2
Angular Version: 6.0.4
AngularJS Version: 1.6.4
Browser(s): Chrome, firefix
Operating System and Version Windows 10
Your protractor configuration file
A relevant example test
Output from running the test
Steps to reproduce the bug
The URL you are running your tests against (if relevant)
Thanks,
Abhishek
So one thing you could do was to do clicking by javascript. This could be achieved using following function:
async function sendClick(element: ElementFinder): Promise<boolean> {
try {
await browser.executeScript('arguments[0].click();', await element.getWebElement());
return true;
}
catch (err) {
return false;
}
}
Note
When clicking via javascript the click event is sent directly to the element and is not really simulated as a user would click it. So if the element is present on the page but not visible for example, it would still receive the click!
When using element.click() the element is scrolled into view and only clicked if it's clickable by mouse. So when using my provided technique, error's like these won't be found.
For having a reliable click function for clicking you'll have to add proper checks on your own. That could look as follows:
async function sendClick(element: ElementFinder): Promise<boolean> {
try {
if(!await element.isDisplayed()) {
return false;
}
await browser.executeScript('arguments[0].click();', await element.getWebElement());
return true;
}
catch (err) {
return false;
}
}
Cheers!
I have a simple angular resource that I've defined as below:
CompanyService.factory('CompanyService',
function ($resource) {
return $resource('https://baseurl.com/api/values/');
}
);
I then have a controller that calls that resource passing in a success and fail function:
.controller('companyList', function($scope, CompanyService) {
$scope.companies = CompanyService.query(
function(data) {
console.log(data);
return data;
},
function(error){
console.log("Error:");
console.log(error);
}
);
The rest API is a .NET MVC Web API that is extremely basic. I've configured it to return JSON and it simply returns an array of two objects like below. I've also enabled CORS so my angular app, which is hosted in a different domain, can call the api.
[{ID:1, Name:"TEST1"}, {ID:2, Name:"TEST2"}]
I've tested the REST call using jquery and just straight call through browser. All was functional (including the cross site scripting when calling from my angular app just using a straight JavaScript HTTP call).
When I try to call the api from my controller however, it always ends up in the error function. The error object contains a data property that is always populated with the string "resource is required|resource is required|undefined"
When I check the network I see no call to the values end point. It's as if the call is failing before ever being made.
If I change out the url to point to some sample REST api like https://jsonplaceholder.typicode.com/users/ it works fine and I'm able to see the call to "users" in the network traffic, which makes me think there is something wrong with my C# REST endpoint, however all my tests to call the REST endpoint outside of angular work successfully.
Can anyone help? I can't find anyone reporting this issues before anywhere on the net.
should the code be the one below? i didn't test it, just guess.
myModule.factory('CompanyService',
function ($resource) {
return $resource('https://baseurl.com/api/values/');
}
)
.controller('companyList', function($scope, CompanyService) {
CompanyService.query(
function(data) {
$scope.companies = data;
console.log(data);
return data;
},
function(error){
console.log("Error:");
console.log(error);
}
);
I ended up rebuilding my angular app from scratch. My first app was from the angular-seed github and had a handful of libraries already added in for testing and other things. One of those things is was was leading to this error as once I started a new project completely from scratch and added in angular and my REST call things worked perfectly. I've already spent too much time working through this so not going to spend any more time identifying exactly what it is but in case anyone else runs into the problem I did want to answer this one and close the book on it.
i'm newbie in angular js, have created a project in angular js and want to maintain log on server for all the issues occuring at the client side.
Gone through various blogs and found few suggestions for applying stack js but couldn't understand the implementation for same.
Please suggest if it is possible to log all the errors in project from one single point of client side, at the server through factory or service method using angular js.
This is possibly by overriding angulars built in $exceptionHandler. Below is the snippet of code from my own app that logs any failures to the backend, but also prints them into the console, in case the backend logging fails. As my javascript is minified, I use StackTrace to turn this back into an un-minified stack trace, and send that to my backend.
function exceptionLoggingService($injector) {
function error(exception, cause) {
// preserve the default behaviour which will log the error
// to the console, and allow the application to continue running.
var $log = $injector.get('$log');
var $window = $injector.get('$window');
$log.error.apply($log, arguments);
var errorMessage = exception.toString();
StackTrace.fromError(exception).then(function (arrayStack) {
var exceptionData = angular.toJson({
errorUrl: $window.location.href,
errorMessage: errorMessage,
stackTrace: arrayStack,
cause: ( cause || "" )
});
// now post this exceptionData to your backend
}).catch(function (backendLoggingError) {
$log.warn("Error logging failure.");
$log.log(backendLoggingError);
});
}
return(error);
}
angular.module('dashboard-ui').factory('$exceptionHandler', ['$injector', exceptionLoggingService])
I am running an Angular app with a Parse backend. When I make a query, the app freezes, even when the DOM doesn't depend on the data being grabbing at the time. That is why this answer was not so helpful. Is there any way to have the rest of the app run along while some request is in progress?
Below is the code that freezes everything until the request resolves. The Parse Javascript SDK comes with promises, which is what 'QS.errorQuery.find()` returns.
function get() {
var queries = [
QS.errorQuery.find(),
QS.resLogQuery.find()
];
return $q.all(queries)
.then(function(res) {
return {
errors: res[0],
logs: res[1]
}; //end return
}); //end return
}; //end get
get().then(function(res) {
$scope.lineData = DP.bigLineParser(res.errors, res.logs);
});
The request is async so as the response is coming in, your UI wont freeze up. The long delay is probably happening when Parse gets its response from the server and parses it.