I keep making baby steps in writing code. I added a simple service for getting categories. It was importing a Category class and returning mock data – simple, as I said, and even working. Then I added a method for getting advertisements in a particular category, which required an additional import of Advertisement. Now I got an error. In Opera it was:
GET http://localhost:3000/app/view-models/advertisement.js net::ERR_BLOCKED_BY_CLIENT
(SystemJS) XHR error loading http://localhost:3000/app/view-models/advertisement.js
Error: XHR error loading http://localhost:3000/app/view-models/advertisement.js
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:420:38) [<root>]
Error loading http://localhost:3000/app/view-models/advertisement.js as “../view-models/advertisement” from http://localhost:3000/app/services/categories.service.js
What the heck? Why blocked? What is zone.js doing in my application illegally? Some StackOverflowers pointed at something missing in a config file, but it turned out that in my case the reason was… Adblock Plus. It has a filter defined for URLs containing “/advertisement”. What a coincidence. 🙂 I checked the page in Opera and Firefox, both having Adblock and reporting the error, so I thought the reason was in my code. The solution is obviously just whitelisting localhost. What is nasty is that the Firefox version of the extension doesn’t mention blocking by client in console, there is only the mysterious zone.js stack trace. In order to see that Adblock has something in common with it, one needs to deliberately go to the list of blocked elements, which is not my first thought when I see an error on localhost… Fortunately, thanks to Opera I got to that thread.