I spent a couple hours trying to find an issue that gave me any clues to solve my issues, but couldn't find anything relevant.
I am working on some SEO for a website (I'm no SEO specialist, am currently taking some courses and reading lots of articles on it), and one thing that I found out was the "Fetch and Render" as Google on Google Search Console.
However the website, which has loads of AngularJS (1.5.x) components, was just rendered the header, which I implied meant that the js didn't load properly and the Angular components couldn't been initialized.
Since, I then found out (can't confirm) that Google Search Console used PhantomJS to render the pages, so I decided to give it a try on my local environment.
We use Webpack to bundle all js files together, and it works as expected both on local and production environments, however it appears that PhantomJS has some problems when trying to render the bundled files.
Every module a page tries to bootstrap throws an error when running PhantomJS:
[$injector:nomod] Module '(moduleName)' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
But as I said, all browsers correctly loads all modules, apparently there is no error on the modules declaration, all imports are in order, everything should work as expected. Except it doesn't.
If you think an excerpt of the script could bring some light to the matter, I'll include when required, as the code is a bit sensitive, there is a lot of it (couldn't think about a bit that could be helpful), and since it works correctly almost everywhere it doesn't seem to me to be the issue, but I could definitely be wrong.
I'm sorry, I hate to post questions without code, but I'm a bit overwhelmed by this one.
Has anyone faced a similar issue?
Any help would be much appreciated.
Kind regards.
Related
I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2
I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too
I've inherited an ASP.Net / MVC / Angular project coded by an outside consulting company. Angular is completely foreign to me, 90% of my coding has been in C# but I've managed to fumble my way through a number of small side tasks in this project.
All was well and good until one of our external users attempted to use the app in IE 11. There are 130+ errors that show in the console just from bringing up the home page. I've done quite a bit of searching, found all kinds of things related to polyfills and es5/es6 shims etc., but after attempting those changes, the only progress I've been able to make is clearing some of the errors related to unsupported arrow functions and parameter default values. As those disappear, I'm left with a slew of
SCRIPT5009: 'ng' is undefined
errors in the developer tools console. In almost all those cases, the error relates to trying to reference ng.core as in the following example
(function (app) {
app.Routes = ng.core.
Injectable()
.Class({
constructor: function () {...
I'm frankly struggling to even understand whether this is an AngularJS or Angular2 project as both are referenced (i.e., the current code makes use of bundling and creates an angular bundle referencing angular.js, angular-ui-router.js etc., as well as an angular2 bundle that references the angular2 files in the node_modules directory) Interestingly enough, if I remove the angularjs bundle and the reference to it in the #Scripts.Render() of the shared layout.cshtml file, I get the same number of errors which leads me to believe the app was initially started as an AngularJS one but went Angular2 and wasn't cleaned-up. That being said, there's no project-specific use of TS, only the standard TS files from the npm install are there.
The "'ng' undefined" error feels to me like there's some DI not happening properly but I can't make heads or tails of this.
The mandate to get this working in IE 11 "ASAP" has me ripping out what little hair I have left. Any pointers on where to even start looking or whether it's obvious from the description that there are architectural choices that have been made which dictate starting over in some sense, I'd really appreciate it.
We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.
If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".
i am having trouble with heroku messing up my image formatting. i don't get any image problems in my localhost development.
so if you visit novulty.herokuapp.com/services and scroll to the 'our results' section, you'll see that some of the logos are wrongly formatted. if you keep refreshing the page, you'll see different logos get wrongly formatted. i am really not sure what the case is.
i've tried precompiling my assets (rake assets:precompile) but that doesn't seem to be do the trick. next, i thought it was an issue of loading my javascript later as opposed to earlier in the file, but if i load it in the beginning (in the <head>) the javascript doesn't even work... so i am very confused.
feel free to take a look at my code at https://github.com/sambaek/novulty
could anyone help me? thanks!
UPDATE:
this problem is happening on localhost. a lot less often though. i wonder if it's a javascript/css issue or rails/heroku one?
It's likely your issue has to do with running in Production versus Development, and the order in which your assets are being read. In development, the order works, but in Production, where your css and javascript is likely all concatenated into single files, you might be overriding classes and having other conflicts.
To test this theory, just run locally your app in production. I don't do this often, but the commands are likely
RAILS_ENV=production rake assets:precomiple
RAILS_ENV=production rails s
Assuming that you'll see the same errors, you might next figuring out if its your CSS or javascript. Inspect your images and make sure the classes and attributes are as you expect. Check for overwritten classes.
Lastly, if still an issue, I'd focus on your javascript. Remember that if you put it into multiple js files, they'll all be combined into 'application.js', assuming you are using the default setup. If you have a developer mode on your browser (I use Chrome), check the javascript inspector to see for any errors.