adal-angular js Error: Failed to load template - angularjs

I used adal-angular js to protect my routes.
$routeProvider.
when("/dashboard", { templateUrl: "Views/Dashboard.html", controller: "DashboardController", requireADLogin: true })
But when Adal getting token, I have an error in console:
Error: [$compile:tpload] Failed to load template: Views/Dashboard.html (HTTP status: undefined undefined)
Could someone know why it happens?

First, forgive my english.
For me only have worked when I specified "/myUrl" in anonymousEndpoints. That skip the interceptor for this backend url.

I had an issue with this for angular ui bootstrap templates. Adding the path "uib/" to the anonymous endpoints array fixed my problem.

Related

Working on an AngularJS simple app

I am new on AngularJS. I am working on a project from a Udemy course.
When I add this code on my app.js:
weatherApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
i get this error on the browser console:
Error: [$compile:tpload]
Even if I download the code from the course link i get the same error. Any ideas why happen this?
Your browser is hindering your home.htm from running scripts that makes ajax call to another origin when opened via file path. There are countless resources explaining the same-origin policy.
If you serve your home.htm file with e.g. http-server you can navigate to the default url and port: 0.0.0.0:8080/home.htm. Note that you might also have to add the --cors flag found in the docs.

angular.js:13550 Error: [$compile:tpload] Failed to load template: /PURNATEST/App/Reports/ABC/ReportEditModel.html (HTTP status: 404 Not Found)

Hi I am using a webapi SPA application with angular UI. I am loading a html page using the templateurl like below
$uibModal.open({
templateUrl: '/PURNATEST/App/Reports/ABC/ReportEditModel.html',
controller: 'ABCDController',
scope: $scope
}).result.then(function ($scope) {
clearSearch();
}, function () {
var stest = "";
});
I am getting the below error :
angular.js:13550 Error: [$compile:tpload] Failed to load template: /PURNATEST/App/Reports/ABC/ReportEditModel.html (HTTP status: 404 Not Found)
In BundleConfig I am registering the both bootstrap and bootstrap-tpl
"~/Scripts/angular-ui/ui-bootstrap.js",// used
"~/Scripts/angular-ui/ui-bootstrap-tpls.js", //used
And my module looks like this
var PCMApp = angular.module('PCMApp', [
'ngRoute', //app route (url path) support
'ngSanitize', //fixes HTML issues in data binding
'ui.bootstrap',
'ngDialog',
'common'
]);
Can any one let me know how to proceed to resolve this issue.?
This has been resolved, i was using a provider hosted app for sharepoint and the filepaths are different while debugging(dev env) and test environment ( after deployment ). The issue was with the relative paths .
Thanks for the replies.
-PURNA

Why am I not able to use controllerAs syntax in routeProvider when coding for a chrome app?

angular version: 1.4.9
Hello,
I am packaging an angular web app written in John Papa code style. However I have been facing problems with basic things. One of these things is setting up routeProvider. I would like to configure it in the controller file, but seems to not work. When I configure it directly in the module config it does not accept controllerAs as syntax...
On mycontroller.js file
// Has no effect
angular.module('myDearModule').
controller('MyController', MyControllerFn).
config(function($routeProvider) {
$routeProvider.when('/page', {
templateUrl: 'tpl.html',
controller: 'MyController',
controllerAs: 'mycontrollerVm'
});
});
function MyControllerFn() {
....
Now, if I try it after loading everything, in a kind of module.routing.js file
// After setting up module and controller
angular.module('myDearModule').
config(function($routeProvider) {
$routeProvider.when('/page', {
templateUrl: 'tpl.html',
controller: 'MyController',
controllerAs: 'mycontrollerVm'
});
});
No effect... I also get this error: [ng:areq] Argument 'MyController' is not a function. Got undefined
I have tried to switch between views with this recommendation: Using angular $routeProvider with packaged apps
The directive and routing works fine but with no controller setted up :(
The same error happens when I use the ngController syntax inside the view.
I need to use routing to keep this web working. Am I doing something wrong or just there is no way? Could someone show me an example with controllerAs within a chrome app ? I have found only simple examples (no routing or page changing at all).
'MyController' is not a function. Got undefined
Could mean that you have a syntax error in your controller. There should be no error messages loading controllers, filters, etc. If you find any errors, and correct it, controllerAs should work as expected.

Getting more friendly error messages in angularjs apps

I have written a simple Angular-js app as below:
angular.module("myApp",['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
name:'route1',
controller:'Route1Ctrl',
template:'partials/route1.tpl.html'
})
.otherwise({redirectTo:'/'});
}])
.controller('Route1Ctrl',['$scope',function($scope){
}});
The app fails to load and the only error message that I can see in the chrome console box is:
Uncaught objet
What can I do to get more usable error messages ?
instead of template: you must use templateUrl

Routing does not work - angularjs - Uncaught Error: [$injector:modulerr]

I am new to angular js. I was just writing some sample application and I ran into problem with routes.
I am using cdn for angular
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
I created a html partial/file and wanted to link it to the index.html.I added the
<ng-view></ng-view> in the index.html and also the following code in the html for routing
angular.module("sample", []).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
But I am getting an Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=enterprise&p1=Erro…s.org%2F1.2.13%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%......2)
Also, I tried downloading angular-route.js and adding ngRoute as dependency, but it still does not work.
angular.module("enterprise", ['ngRoute']).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
I have downloaded various versions of angularjs but I am stuck with the same error. Any idea has to why I am getting this error and how to resolve it?
Try this
angular.module("enterprise", ['ngRoute']).config(["$routeProvider", function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
}]);
Let me know if it doesn't work
Can you try removing the slash from templateUrl like this?
templateUrl: "partials/list.html"
Also, could you verify that you have set ng-app somewhere in the html and the template exists at the proper location (partials/list.html)?

Resources