We are using a directive that allows users to input their date of birth. This works absolutely fine on the local gulp dev build, however when we move across to a distribution build, it says this template cannot be found. There are no errors in the gulp:dist process or errors in console when using the directive in a local dev build
Here is the error message from the dist build
GET http://localhost:3000/app/_common/form-dob/form-dob.tpl.html 404 (Not Found)(anonymous function) # generated.js:20178l # generated.js:62054v # generated.js:19971c # generated.js:19681u # generated.js:24202(anonymous function) # generated.js:24218h.$eval # generated.js:25462h.$digest # generated.js:25280h.$apply # generated.js:25570o # generated.js:20002g # generated.js:20200w.onload # generated.js:20141
generated.js:21933 Error: [$compile:tpload] Failed to load template: /app/_common/form-dob/form-dob.tpl.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.4.9/$compile/tpload?p0=%2Fapp%2F_common%2Fform-dob%2Fform-dob.tpl.html&p1=404&p2=Not%20Found
at generated.js:9279
at s (generated.js:27164)
at u (generated.js:24202)
at generated.js:24218
at h.$eval (generated.js:25462)
at h.$digest (generated.js:25280)
at h.$apply (generated.js:25570)
at o (generated.js:20002)
at g (generated.js:20200)
at XMLHttpRequest.w.onload (generated.js:20141)
Is there a specific reason for this? Can't seem to find any invalid JavaScript in the file.
The directive is very long so haven't included it here. Here is the first part:
(function() {
'use strict';
angular
.module('smApp')
.directive('smFormDob', smFormDob);
smFormDob.$inject = ['angular', 'moment'];
function smFormDob(angular, moment) {
var controller = function($scope, $timeout) {
The issue was the templateUrl had a / at the beginning and that was causing the issue
Here's the broken:
templateUrl: "/app/_common/form-dob/form-dob.tpl.html"
Here's the fixed:
templateUrl: "app/_common/form-dob/form-dob.tpl.html"
Related
I'm using yeoman generator for scaffolding angular web application with requirejs. Its working fine but when I tried to concat and minifying all the js file into a single file through grunt task runner its started giving me above mentioned error. I've researched online about the issue and common solution is I may be mis-spelled any service injecting in the module or service does not exists, I've cross checked again all the spelling, quotation marks etc everything seems fine but still I'm unable to resolve this issue.
Here is my app.js file where my main module with dependencies is listed.
return angular
.module('arteciateYeomanApp', [
'arteciateYeomanApp.controllers.MainCtrl',
'arteciateYeomanApp.controllers.AboutCtrl',
'arteciateYeomanApp.services.Xhr',
'arteciateYeomanApp.services.Common',
'arteciateYeomanApp.controllers.ArtworkCtrl',
'arteciateYeomanApp.controllers.AddAccountCtrl',
'arteciateYeomanApp.controllers.AddArtgroupCtrl',
'arteciateYeomanApp.controllers.AddArtistCtrl',
'arteciateYeomanApp.controllers.AddArtworkCtrl',
'arteciateYeomanApp.controllers.AddCampaignsCtrl',
'arteciateYeomanApp.controllers.AddGenreCtrl',
'arteciateYeomanApp.controllers.AddInstitutionCtrl',
'arteciateYeomanApp.controllers.AdminSignupCtrl',
'arteciateYeomanApp.controllers.ArtistInfoCtrl',
'arteciateYeomanApp.controllers.DirectUserSignupCtrl',
'arteciateYeomanApp.controllers.ErrorCtrl',
'arteciateYeomanApp.controllers.ForgotPasswordCtrl',
'arteciateYeomanApp.controllers.GroupBuyingCtrl',
'arteciateYeomanApp.controllers.LoginCtrl',
'arteciateYeomanApp.controllers.AdminLoginCtrl',
'arteciateYeomanApp.controllers.ResetPasswordCtrl',
'arteciateYeomanApp.controllers.SignupCtrl',
'arteciateYeomanApp.controllers.UnblockUserCtrl',
'arteciateYeomanApp.controllers.UpdatePasswordCtrl',
'arteciateYeomanApp.controllers.DashboardCtrl',
'ngRoute','ngResource']).config(.....);
here is grunt task which I'm running for minifying the js files.
registering task
grunt.registerTask('dev', ['requirejs' ]);
Here is task running script
requirejs : {
compile : {
options : {
baseUrl : "<%= yeoman.app %>/scripts",
mainConfigFile : "<%= yeoman.app %>/scripts/main.js",
name : "main",
out : "requireArterciate.js"
}
}
}
Please let me know if I'm doing something wrong here.
If you need to minify the angularjs code, then use the following standard format syntax to define the controller and to inject the dependencies. Refer Dependency Injection
angular.module('test').controller('testController', testController);
testController.$inject = ['$scope', '$rootScope'];
function testController($scope, $rootScope) {};
Running into a weird issue with loading an Angular module.
I have a file structure like so
-ng-app
-app
-account
accountCtrl.js.coffee
-auth
authCtrl.js.coffee
-other_folders
app.js.coffee
and I'm loading accountCtrl and other controllers like so
#app/app.js.coffee
angular.module("app", [
'ngResource'
'smart-table'
'checklist-model'
'ui.router'
...
])
#app/account/accountCtrl.js.coffee
#app = angular.module('app')
app.controller 'accountCtrl', ($scope, $state) ->
....
#app/auth/authCtrl.js.coffee
#app = angular.module('app')
app.controller 'authCtrl', ($scope, $state) ->
....
But then accountCtrl throws an error
Module 'app' 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.
I know the syntax is correct, because I'm loading a a few dozen other controllers with the same syntax. So I started playing around with different scenarios.
I deleted the 'account' folder
No error thrown, other controllers load normally
I renamed account folder to z-account
No error thrown, all controllers including accountCtrl load normally
So the error only occurs when the folder is named 'account' and is the first file in the 'app' folder. Any ideas what's going on?
Rails asset pipeline includes javascript files aphabetically, and app/account.js.coffee was being included before app/app.js.coffee, hence the missing module error.
Two solutions possible:
prefix files with an underscore to ensure it loads first like so:
_app.js.coffee
Or
Remove
//= require_tree .
in application.js and include files manually.
Had a bit of trouble with Angular earlier, but I was able to resolve that problem. Of course, being a newbie, we've hit more problems!
Did some searching around for this error, but applying the fixes that other people have tried has not proven effective for me.
I am currently trying to load a partial onto a show page in Rails using AngularJS.
EDIT: I apologize- I forgot to mention that I intend to load a partial from a file in the same directory as all these files. Current directory tree is as follows:
Directory containing relevant js files and the timer partial
I have the following code built out:
Show.html.erb
<timer-info ng-controller = "CountdownController">
</timer-info>
app.js
'use strict';
var myApp = angular.module("summoners-universe", ['ngRoute'])
directives.js
'use strict';
myApp.directive("timerInfo", function(){
return {
restrict: "E",
templateUrl: 'app/assets/javascripts/timer.html'
};
});
controllers.js
'use strict';
myApp.controller('CountdownController',
["$scope", "$http", "$routeParams",
function($scope, $http, $routeParams){
console.log($routeParams);
}]);
Eventually this controller will display a countdown timer, but for now, I just wanted to make sure I could get my routeParams and all that.
Sadly, I'm hit with the following error upon page load:
angular.self-208d6d1….js?body=1:11757 GET http://localhost:3000/games/app/assets/javascripts/timer.html 404 (Not Found)(anonymous function) # angular.self-208d6d1….js?body=1:11757sendReq # angular.self-208d6d1….js?body=1:11518serverRequest # angular.self-208d6d1….js?body=1:11228processQueue # angular.self-208d6d1….js?body=1:15962(anonymous function) # angular.self-208d6d1….js?body=1:15978Scope.$eval # angular.self-208d6d1….js?body=1:17230Scope.$digest # angular.self-208d6d1….js?body=1:17046Scope.$apply # angular.self-208d6d1….js?body=1:17338bootstrapApply # angular.self-208d6d1….js?body=1:1750invoke # angular.self-208d6d1….js?body=1:4666doBootstrap # angular.self-208d6d1….js?body=1:1748bootstrap # angular.self-208d6d1….js?body=1:1768angularInit # angular.self-208d6d1….js?body=1:1653(anonymous function) # angular.self-208d6d1….js?body=1:30864fire # jquery.self-4e23968….js?body=1:3188self.fireWith # jquery.self-4e23968….js?body=1:3318jQuery.extend.ready # jquery.self-4e23968….js?body=1:3537completed # jquery.self-4e23968….js?body=1:3553
angular.self-208d6d1….js?body=1:13551 Error: [$compile:tpload] Failed to load template: app/assets/javascripts/timer.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.5/$compile/tpload?p0=app%2Fassets%2Fjavascripts%2Ftimer.html&p1=404&p2=Not%20Found
at angular.self-208d6d1….js?body=1:69
at handleError (angular.self-208d6d1….js?body=1:18979)
at processQueue (angular.self-208d6d1….js?body=1:15962)
at angular.self-208d6d1….js?body=1:15978
at Scope.$eval (angular.self-208d6d1….js?body=1:17230)
at Scope.$digest (angular.self-208d6d1….js?body=1:17046)
at Scope.$apply (angular.self-208d6d1….js?body=1:17338)
at done (angular.self-208d6d1….js?body=1:11573)
at completeRequest (angular.self-208d6d1….js?body=1:11779)
at XMLHttpRequest.requestLoaded (angular.self-208d6d1….js?body=1:11712)(anonymous function) # angular.self-208d6d1….js?body=1:13551(anonymous function) # angular.self-208d6d1….js?body=1:10226processQueue # angular.self-208d6d1….js?body=1:15970(anonymous function) # angular.self-208d6d1….js?body=1:15978Scope.$eval # angular.self-208d6d1….js?body=1:17230Scope.$digest # angular.self-208d6d1….js?body=1:17046Scope.$apply # angular.self-208d6d1….js?body=1:17338done # angular.self-208d6d1….js?body=1:11573completeRequest # angular.self-208d6d1….js?body=1:11779requestLoaded # angular.self-208d6d1….js?body=1:11712XMLHttpRequest.send (async)(anonymous function) # angular.self-208d6d1….js?body=1:11757sendReq # angular.self-208d6d1….js?body=1:11518serverRequest # angular.self-208d6d1….js?body=1:11228processQueue # angular.self-208d6d1….js?body=1:15962(anonymous function) # angular.self-208d6d1….js?body=1:15978Scope.$eval # angular.self-208d6d1….js?body=1:17230Scope.$digest # angular.self-208d6d1….js?body=1:17046Scope.$apply # angular.self-208d6d1….js?body=1:17338bootstrapApply # angular.self-208d6d1….js?body=1:1750invoke # angular.self-208d6d1….js?body=1:4666doBootstrap # angular.self-208d6d1….js?body=1:1748bootstrap # angular.self-208d6d1….js?body=1:1768angularInit # angular.self-208d6d1….js?body=1:1653(anonymous function) # angular.self-208d6d1….js?body=1:30864fire # jquery.self-4e23968….js?body=1:3188self.fireWith # jquery.self-4e23968….js?body=1:3318jQuery.extend.ready # jquery.self-4e23968….js?body=1:3537completed # jquery.self-4e23968….js?body=1:3553
I don't know why a get request is being made to that URL. Any thoughts? Thank you!
The templateUrl of the timerInfo should be absolute, like this:
templateUrl: '/app/assets/javascripts/timer.html'
This way you're referencing from the root directory down to the desired file.
Ah, I was able to figure it out. Apparently, the Angular-Rails gem looks for templates to load in an app/templates directory. I just had to make that directory and put the template there.
function MainCtrl($scope, $http, $interval, $state, $location)
{
}
angular
.module('inspinia', ['angularCharts'])
.controller('MainCtrl', MainCtrl)
No matter what I try to inject, I get an error. Instructions are not very clear. For instance, should I be pulling in the script which has the injection before or after Angur itself? Etc, etc
Is there anything obviouslty wrong with that code above?
IMPORTANT this is an exisitng, fuctcioning app. As pointed out in the comments, the error seems clear, BUT it only occurs when I add , ['angularCharts']. Before that, the coude is working just fine, routing, state chanegs and all.
I suspect that the erorr message is a red herring. The problem obvoulsy stems from adding , ['angularCharts'] - but why?
Error: [$injector:unpr] Unknown provider: $stateProvider <- $state <- MainCtrl
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20MainCtrl
at angular.js:68
at angular.js:4397
at Object.getService [as get] (angular.js:4550)
at angular.js:4402
at getService (angular.js:4550)
at injectionArgs (angular.js:4574)
at Object.invoke (angular.js:4596)
at extend.instance (angular.js:9855)
at nodeLinkFn (angular.js:8927)
at compositeLinkFn (angular.js:8226)(anonymous function) # angular.js:13236(anonymous function) # angular.js:9965Scope.$apply # angular.js:16925bootstrapApply # angular.js:1694invoke # angular.js:4604doBootstrap # angular.js:1692bootstrap # angular.js:1712angularInit # angular.js:1606(anonymous function) # angular.js:30423j # jquery-2.1.1.min.js:2k.fireWith # jquery-2.1.1.min.js:2n.extend.ready # jquery-2.1.1.min.js:2I # jquery-2.1.1.min.js:2
[Update] I am basing the app on a framework. I don't know how good it is, but it does work (state change and all).
INdex.html has <script src="js/app.js"></script>
which file contains the following. Maybe I should be adding ['angularCharts'] there? In fact, is it wrong of me to have that .module line at the end of my controller?
(function () {
angular.module('inspinia', [
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap', // Ui Bootstrap
])
})();
The problem is that you're redefining the main module of your application when doing
angular.module('inspinia', ['angularCharts'])
So the module loses all its components previously added, and all its dependencies (ui-router, etc.).
Instead, you must modify the axisting definition of the module to add a dependency on angularCharts, and, in your controller, simply retrieve the previously defined module:
angular.module('inspinia').controller(...);
Did search but cannot find solution yet.
Environment:
angular 1.4.7
chrome 43.0.2357.124
ubuntu pc
Problem:
myBoardStatus.html uses socket.io to talk with node.js server.
When node.js server sees '/myBoardStatus', it sendfile(path.resolve('../client/myBoardStatus.html').
myBoardStatus.html has this line
<script src='/socket.io/socket.io.js'></script>
Right now these 2 URL works fine, in chrome browser i can see messages from server once a while.
http://10.55.200.47:80/myBoardStatus
http://10.55.200.47:80/myBoardStatus.html
But:
In my index.html, i have <div ng-view></div>.
It works fine for other pages through $routeProdiver, when i click buttons, the contents of this div gets updated.
So i added another button "myBoardStatus" trying to display messages from socket.io to this div.
http://10.55.200.47:80/#/5myBoardStatus
$routeProvider.when('/5myBoardStatus', {
templateUrl: 'myBoardStatus.html'
//redirectTo: '/myBoardStatus.html'
});
Got this:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
angular.js:12477 SyntaxError: Unexpected token >
at eval (native)
at http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:2:2620
at Function.m.extend.globalEval (http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:2:2631)
at m.fn.extend.domManip (http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:3:23046)
at m.fn.extend.append (http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:3:20507)
at null.<anonymous> (http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:3:22055)
at m.access (http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:3:3286)
at m.fn.extend.html (http://10.55.200.47:80/3rdparty/jquery/jquery.min.js:3:21623)
at link (http://10.55.200.47:80/3rdparty/angular-1.4.7/angular-route.min.js:7:200)
at aa (http://10.55.200.47:80/3rdparty/angular-1.4.7/angular.min.js:73:90) <div ng-view="" class="ng-scope">(anonymous function) # angular.js:12477$get # angular.js:9246aa # angular.js:8791K # angular.js:8289g # angular.js:7680(anonymous function) # angular.js:7555$get.g # angular.js:7699r # angular.js:8316x # angular-route.js:935$get.n.$broadcast # angular.js:16311(anonymous function) # angular-route.js:619(anonymous function) # angular.js:14745$get.n.$eval # angular.js:15989$get.n.$digest # angular.js:15800$get.n.$apply # angular.js:16097h # angular.js:10546K # angular.js:10744z.onload # angular.js:10685
(The 1st line "Synchronous XMLHttpRequest on the main thread is deprecated" is warning)
If i use redirectTo instead of templateUrl, then nothing happens in the browser.
thanks for your help !