I have seen quite a number of similar posts on SO about this error but so far don't think there has been any convincing answer, which is quite surprising given this error seems to be quite common in each version of Angular 1.x.
The official angular doc suggests the template path is probably misspelled but don't think that's the case; I have attached a photo of the folder structure. I get this error when routing to both main.html and second.html
EDIT1: tried to use absolute path and didn't make any difference.
EDIT2: Here is the full error:
Error: [$compile:tpload] http://errors.angularjs.org/1.5.6/$compile/tpload?p0=%2Fpage%2Fsecond.html&p1=-1&p2=
at Anonymous function (https://code.angularjs.org/1.5.6/angular.min.js:156:275)
at Anonymous function (https://code.angularjs.org/1.5.6/angular.min.js:130:399)
at m.prototype.$eval (https://code.angularjs.org/1.5.6/angular.min.js:145:96)
at m.prototype.$digest (https://code.angularjs.org/1.5.6/angular.min.js:142:158)
at m.prototype.$apply (https://code.angularjs.org/1.5.6/angular.min.js:145:399)
at l (https://code.angularjs.org/1.5.6/angular.min.js:97:233)
at D (https://code.angularjs.org/1.5.6/angular.min.js:101:373)
at e (https://code.angularjs.org/1.5.6/angular.min.js:102:448)
angular.js (13642,11)
First of all; thanks for the downvotes! Totally deserve it:D
As said in the original question, there are many similar questions on SO without good/accepted answers. I am posting my way to resolve it here in case it might help someone who, like me, are new to angular.
Secondly, Phil's comment about using un-minified version of angular during development is useful as it gives better error messages.
Thirdly, use a browser with better develop tool when learning or developing. This is partially why I got into this error without any clue how to fix it.
Finally, the real reason why I got this error is because I am opening the index.html file directly from a browser (Microsoft Edge, for some reason Chrome developer tool can't be open after an upgrade). In Edge, it only throws the error saying Error: $compile:tpload. Whereas if I use Chrome Canary, it throws two errors and the first errors saying xmlhttprequest Cross Origin requests are only supported for protocol schemes: http, https... This makes sense when I am opening the html file directly from a browser. This post has a number of good answers to resolve this.
In short, two ways to solve this: a) use a local server e.g. http-server if you have node.js install to render the html
b) Use ng-template directive to include the templates by adding the templates inside script tags in the index.html e.g. this is what I added to index.html for my case
<script type="text/ng-template" id="main.html">
This is {{name}}
</script>
<script type="text/ng-template" id="second.html">
This is {{name}}
</script>
Then when configuring the routing, simply use the template id e.g.
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "main.html", //NOTE: use included template id
controller: 'mainCtrl'
})
.when('/second', {
templateUrl : 'second.html',
controller : 'secondCtrl'
})
.otherwise({redirectTo : '/'});
})
Then everything will work just fine when opening the html directly from a browser. For more information how this works see the official angular doc
Related
I am working on an Angular grid project and i am facing a minor error while using angular-grid.
Heres the error- Module 'angularGrid' 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.
So i thought i am missing out on something. I checked a JSfiddle and was not able to view the output there. So i checked the console for errors. here also the same error is displayed.
JSfiddle is not even edited by me. I am just viewing the link. Yet i get the same error.
http://jsfiddle.net/9b5gnjf1/8/
<md-toolbar class="md-whiteframe-z2">
<div class="md-toolbar-tools">Toolbar</div>
Just adding the above 2 lines from the link so that stackoverflow lets me paste the jsfiddle link. without any code written, it doesnot allow to post the link here.
anyone knows what kind of error is this and how to solve it ?
There's a 404 error resolving the external link to the javascript file that the angular-grid module lives in.
Looks like either it's a bad link, or the rawgit servers are down.
You can either wait and hope the link comes back to life, or replace the broken external resource with a working one.
I am working through an eBook to learn the whole MEAN stack and came across an odd problem when working with angular.
Specifically, I was adding angular-route to my application to render a template. At first I could not get it to work and went over the code several times looking for any error I might have made. In the end, I had typed the order of two dependencies for the main application module differently than the book had shown.
This didn't work
var mainApplicationModule = angular.module(mainApplicationModuleName, ['example', 'ngRoute']);
This worked
var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'example']);
So I don't have a problem exactly, but I was wondering if anyone could explain why this works this way? I have not been able to find anything about the order of dependency declaration mattering. I can post more of my code if it would be helpful.
This comes from Brad Dayley's book on the Subject.
The order matters in that the the list of modules(dependencies) to be injected has to be in the the order of "required". So if the example module requires the ngRoute then ngRoute has to be before example.
The angular.module() method uses following syntax:
angular.module(name, [requires],[configFn])
The name parameter is the name under which the module is registered in the injector service. The requires parameter is an array of names of modules that are added to the injector service for this module to use.
This explanation does beg for answer about possibility of circular module references in more complicated case. Here is some light on that by David M. Karr SO Answer Link.
I've developed my first spa application in Angular js but I've done it on localhost.
Now it's time to test it online. I'm sure that everything works localy but simply I can't make it work online.
It seems to me like controllers are not being loaded although they are linked well.
Routing works because html templates change but THERE ARE NO CONTROLLERS ???.
Here is sample output from console :
First,for every controller in my app I get this (total 5 times) :
Uncaught SyntaxError: Unexpected token <
And after that I get this for controller that is being used right now:
Error: [ng:areq] http://errors.angularjs.org/1.3.5/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at https://code.angularjs.org/1.3.5/angular.min.js:6:416
For every single controller I get the same error.
I followed rule to inject dependacys (found that on stackowerflow but it doesn't help at all) so my every controller looks like this:
myApp.controller('nearCtrl',
['$scope', 'geolocation', 'nearApartments', 'uiGmapGoogleMapApi',
function ($scope, geolocation, nearApartments, uiGmapGoogleMapApi) {...}])
Does anyone have an idea what could I do to fix this ?
Ok I found the solution,as usual it was trivial and now I feel like I shot myself in leg.
The thing was that I was very stupid and didn't follow good
practices as NAMING CONVENTION from the BEGINING of the
project !
In my index.html file there was an issue because few controllers were named by lowercase like myController.js and their real name on server was different like MyController.js so there's a problem.
I worked with git,merged branches and stuff and probabbly git messed up something with names(explains how it worked on localhost I guess) but that wouldn't happen if I had followed rules from the start.
To every wannabe Angular.js developer like me there are some great design guides and good practices described on link below.
Use them !
https://github.com/mgechev/angularjs-style-guide
Tnx everyone who tried to help me, Angular has really great community.
The trouble is with your server routing. You're serving your whole app instead of the individual JS files. First thing you should do is make sure 188.226.150.65/app/components/about/aboutController.js serves correctly the JS for aboutController.js.
Looking at each of your component folders, it seems all your controller.js files all have the same error:
Error in exception handler: The stream or file "/var/www/html/zimmer-
production/app/storage/logs/laravel.log" could not be opened: failed to open stream:
Permission denied in /var/www/html/zimmer-production/bootstrap/compiled.php:9016
The only controllers that seem to actually have any Javascript are the signup controllers and the apartmentControler. I'd check the permissions in your production environment, as that seems to be the problem.
In my angular code, to avoid code duplication, I inject a same factory into multiple services. At first, when I did this it started throwing errors Error: [$injector:unpr] Unknown provider
After some debugging, it became obvious that this was a load order issue. To get around it, in my build.config.js file, I changed module.exports.app_files.js so that factories were loaded before services.
My build.config.js file now has this in it
module.exports = {
build_dir: 'build'
compile_dir: 'bin',
app_files: {
modules: [
'src/**/*.js',
'!src/**/*.spec.js',
'!src/**/*-service.js',
'!src/**/*-controller.js',
'!src/**/*-config.js',
'!src/**/*-directive.js',
'!src/**/*-factory.js',
'!src/**/*-filter.js',
'!src/**/*-run.js'
],
js: [
'src/**/*-factory.js',
'src/**/*-service.js',
'src/**/*-controller.js',
'src/**/*-config.js',
'src/**/*-directive.js',
'src/**/*-filter.js',
'src/**/*-run.js',
'!src/**/*.spec.js'
],
...
The source code of the angular application is here and the modification is here
It would seem that I'm forced to have a hierarchy and that I could never have a factory-named file that has a dependence on a service named file. Whether one should or shouldn't is not the debate here; I'm more concerned about the hierarchy.
I would like to know if there is an alternative way around this?
[edit] : I think I have found the source of the problem (fingers crossed that it stays fixed). I was developing using grunt watch. However, when I stopped the process and simply ran grunt, everything is happy again. Thanks to the people below for asking questions and ascertaining that this was not normal behaviour!
I've put a JSfiddle here so you can see code that is actually working...
http://jsfiddle.net/vtKqG/1/
Unfortunately this does not work on my local machine even though everything else does (I have other angular code running fine).
On my local machine I only see my html in the output if i use..
ng-bind-html-unsafe="message.content"
instead of...
ng-bind-html="message.content"
So, on JSfiddle it works when I leave the "unsafe" off, but on my local machine the unsafe has to be there, which seems undesirable from a security point of view.
I am loading the same version of Angular and sanitize, in the same order and my code I think is identical, only the environment seems to be different.
Any ideas?
You need to add your module to ng-app:
<html ng-app='myApp'>
...
If you don't specify this, angular will only load module 'ng', not ng-sanitize. ng-bind-unsafe is in module ng, not ng-sanitize, which is why this accidently worked.
Apparently in new version of AngularJS 1.2+ they change it, since then you have to use trustAsHtml() method to disable Html escaping.
Solution can be find here