I am having problems with the ui-sref directive (rarely) when deploying to Heroku. The application is working properly locally. I am using angular 1.6.8, ui-router 1.0 and I cannot figure out how to solve the issue.
My config.js file looks like this:
materialAdmin
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('not-authorised', {
url: '/not-authorised',
templateUrl: '404.html'
})
//------------------------------
// LOGIN
//------------------------------
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
...
$locationProvider
.html5Mode(false)
.hashPrefix('');
}]);
EDIT: I am able to reproduce it locally if I run grunt build in production mode. I am a bit lost right now, but suspecting about the minification of the files.
This are the errors I am getting on the console:
dashboard should be a defined route if you are going to use it with ui-sref=""
Related
I am using AngularJS ui-Router and node js.Response is coming as JSON. Normally, the page was rendered properly. If I refresh the same page manually, it displays JSON Data instead of HTML.
Kindly, help me to fix this issue.
angular.module('app.routes',[])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider
.html5Mode({
enabled:true,
requireBase:false
})
.hashPrefix('');
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider.state('/', {
templateUrl: '/views/login.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'views/index.html',
controller: 'AdmCtrl',
})
.state('admin1', {
templateUrl: 'views/index1.html',
controller: 'AdmCtrl1',
})
You have turned on html5Mode routing.
This is a declaration that your internal angular route URLs are the same as your server's URLs.
In practise, it looks like you have actually configured the server to send the data as JSON instead.
You need to change your server side code to serve up HTML documents for those URLs instead of JSON.
Alternatively, turn off html5Mode and go back to hashbangs.
How can I load AngularJS templates from a Phoenix framework application? I am using the ui-router to load a template using templateUrl. This is with angular 1.5.
myAppModule.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('event', {
url: '/event',
templateUrl: '/templates/event/event.html'
// template: '<h1>Stuff</h1>'
})
$urlRouterProvider.otherwise('/event');
}]);
Loading an inline template works, so it is clearly the mechanism for loading templates which I am struggling with.
Are there any settings in the brunch config I need to change?
Thank you
Eamon
Well, it's not too simple. I fall into the same problem, so here is my solution. Phoenix Framework has a directory where you can put your HTML files, the name of the directory is web/static/assets, you can set your files there, but if you need to create a directory like web/static/assets/templates you need to add exception in the endpoint.ex, like:
plug Plug.Static,
at: "/", from: :app, gzip: false,
only: ~w(css fonts images templates js favicon.ico robots.txt)
Now you can recompile and run your Elixir code and load your file like:
myAppModule.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('event', {
url: '/event',
templateUrl: 'templates/event/event.html'
})
$urlRouterProvider.otherwise('/event');
}]);
I hope that works for you too.
I'm using the following state configuration:
app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider",
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
views: {
'': {
templateUrl: "Scripts/app/common/views/home.html",
controller: 'homeController'
}
},
data: {}
})
...
$locationProvider.html5Mode(true);
}
]);
And some server WebAPI help pages are not working because the following PATHs are used:
/Help/Api
/Help/Api/POST-api-Get-Users
/Help/ResourceModel?modelName=User
etc.
Currently help pages are not working, and I don't want to add to angular the following states:
- url: "/Help"
- url: "/Help/Api"
etc.
Is there a way to simple ignore all angular states started with "/Help*"? I want to have client angular pages and the same time server pages too. And I don't want to have two different master pages (one with angular, and another without).
We have an AngularJS SPA, and we have been using Adal.js for authentication. Till now we were handling the routes using $routeProvider (ngRoute module), but due to some recent requirement, we need to move away from the route provider method and adopt $stateProvider (in ui-router). However out authentication mechanism needs to remain similar. Can adal.js work with $stateProvider in the similar fashion as it works with $routeProvider?
We are using requiredADLogin paramter in the routes to specify which routes need Azure AD Authentication. The code looks like below:
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {
$routeProvider
.when('/', {
controller: 'homeCtrl',
templateUrl: '/Templates/home.html',
requireADLogin: true
})
.otherwise({
//template: "Invalid"
redirectTo: '/'
});
On changing to $stateProvider will a code like below be valid:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("dashboard", { url: "/dashboard", templateUrl: "Templates/dashboard.html" })
.state("health", {
parent: "dashboard",
url: "/agent_tier1",
templateUrl: "Templates/health.html",
requireADLogin: true
})
});
Or if we can put the requireADLogin property in the parent state.
adal.js will work with ui-router, requireADLogin should be at every state you want to protect not just in the parent state.
If you are using the component router, ADAL will not work:
https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283
Warning to anyone who is trying to upgrade a low level pre angular 2.0 app to typescript, ADAL will be a challenge.
Im trying to make an app to learn to work with AngularJS and rails. Only when I try to rout with angular I get this printed in te console "WARNING: Tried to load angular more than once" in an infinite loop.
If followed this tutorial until the problem occurred from there I've searched a lot here on Stackoverflow, but could not find a solution to my problem.
app.js
var app = angular.module('Deadlines', ['ngRoute', 'templates'], function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
}).otherwise( { redirectTo: '/'} );
$locationProvider.html5Mode(true);
});
Warning shows that you have added more than one angular js library. Better to remove any one angular library.
I have solved my issue through using AngularUI Router for angular. I found out that this problem was not occurring when I was trying to recreate the issue with just HTML and Angular. So it has something to do with the combination of rails and Angular. I can't explain why AngularUI Router is the solution for my problem cause I'm still a noob, but it works and I can continue learning to build apps.
app.js
angular.module('Deadlines', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl',
})
$urlRouterProvider.otherwise('/');
}])
.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Here is my current app.js for people facing the same problems