I'm trying to run an Angular 2 application from a website where the base url should be http://www.example.com/app instead of http://www.example.com. I've tried several guides to change this by setting the href of the base element (such as this one: Angular 2 router no base href set), but none of these works. I can still only visit the pages on the root-url (thus http://www.example.com/something instead of http://www.example.com/app/something). This is how the index.html-file looks like at the moment:
<!doctype html>
<html>
<head>
<base href="/app">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Bootstrap (and jQuery) scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Font Awesome icons! -->
<script src="https://use.fontawesome.com/9fbdc2c47e.js"></script>
</head>
<body>
<app-root>
<div class="centered-container">
<!-- Show animated loading icon -->
<div id="loading-notification">
<i class="fa fa-refresh fa-spin fa-5x fa-fw"></i>
</div>
</div>
</app-root>
</body>
</html>
What have I done wrong? An example of how my paths in the router look like:
RouterModule.forRoot([
{
path: "language",
component: LanguageComponent
},
{
path: "404",
component: NotFoundComponent
},
{
path: "**",
component: NotFoundComponent
}
]),
UPDATE:
I eventually fixed it! When building the application for production, the following command should be used: ng build --target=production --base-href /app/ --aot true. That fixes everything :)
you can make the following change under your routing
path: '', redirectTo: '/app', pathMatch: 'full'
path: 'app', component:'componentName'
which will eventually redirect you to the /app everytime when some error url is being given
Have you tried this
<base href="/app/">
and in your component
#Component({
moduleId: "app",
selector:"my-component",
...
})
Related
I have noticed that this error happened when I use:
plugins: ["interaction", "timeGrid"],
and disapear when I use
plugins: ["dayGrid"],
can anyone explain why ?
html page
<link
href="https://unpkg.com/#fullcalendar/core#4.4.0/main.min.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js"></script>
import <script src="https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js"></script>
Hello i am absolute beginner into Angular2, i just set some application but i got error angular2-polyfills.js:390 Error: SyntaxError: Unexpected token import(…)
Please help me to resolve this.
I created app.component.ts file into same name space as main.ts
here is my index.html file
<!DOCTYPE html>
<html>
<head>
<title>Acme Product Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="app/app.component.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
Starter files for Angular2: Getting Starteddd.
<pm-app>Loading app...</pm-app>
</body>
</html>
app component file
import { Component } from 'angular2/core';
#Component({
selector:'pm-app',
template: `<div>{{PageTitle}}</div>`
});
export class AppComponent{
pageTitle:string = 'Ovo je string';
}
main ts file
import { bootstrap } from 'angular2/platform/browser';
// Our main component
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Help i am new to Angular2 please help
I am unable to understand why the routing isn't working.
I've checked many times for syntax errors or misspelling but that doesn't seem to be the case. I also checked the console and it returns nothing. Doesn't appear to be any issues.
var app = angular.module("myApp", ['ngRoute']);
// Main Controller
app.controller("controller", function($scope) {
$scope.search = {};
});
// Routing
app.config(function($routeProvider) {
console.log("working");
$routeProvider.when('/', {
controller: "controller",
templateUrl: "templates/listings.html"
}).when('/login', {
controller: "controller",
templateUrl: "templates/login.html"
})
});
<html ng-app="myApp">
<head>
<title>logo</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- ANGULAR FILES -->
<!-- Angular.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<!-- ngRoute Script -->
<script type="text/javascript" src="js/angular-route.js"></script>
<!-- Route -->
<script type="text/javascript" src="routes/route.js"></script>
<!-- Angular App -->
<script type="text/javascript" src="app.js"></script>
<!-- Json Data -->
<script type="text/javascript" src="data.js"></script>
<!-- ======================================================================->
<!-- Index CSS ( Mainly All The CSS) -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Login CSS -->
<link rel="stylesheet" type="text/css" href="css/login.css">
<!-- Montserrat -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- Open Sans -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- neutron -->
<link href='https://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
<!-- Lato -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="controller">
<div class="wrapper">
<div ng-include="'includes/navbar.html'"></div>
<!-- NG VIEW -->
<div ng-view></div>
<div class="footer">
<!-- footer content goes here -->
</div>
</div>
</body>
</html>
Your code seems correct. Currently you are just loading the page, without any change in the URL, so the angular router doesn't do anything.
Basically you need to add default route by having .otherwise to your $routeProvider which will redirect to / default page.
$routeProvider.when('/', {
controller: "controller",
templateUrl: "templates/listings.html"
})
.when('/login', {
controller: "controller",
templateUrl: "templates/login.html"
})
.otherwise({
redirectTo: '/'
});
Make sure you have same version of angularjs & angular-route
Working Fiddle Thanks to #Denis for creating Fiddle.
i am getting the following error while routing the page using angular.js.
Error:
RangeError: Maximum call stack size exceeded
at $ (http://oditek.in/Gofast/js/angularjs.js:73:115)
at K (http://oditek.in/Gofast/js/angularjs.js:62:39)
at h (http://oditek.in/Gofast/js/angularjs.js:54:410)
at http://oditek.in/Gofast/js/angularjs.js:53:480
at http://oditek.in/Gofast/js/angularjs.js:55:397
at r (http://oditek.in/Gofast/js/angularjs.js:60:200)
at x (http://oditek.in/Gofast/js/angularroute.js:6:364)
at link (http://oditek.in/Gofast/js/angularroute.js:7:92)
at $ (http://oditek.in/Gofast/js/angularjs.js:73:89)
at K (http://oditek.in/Gofast/js/angularjs.js:62:39) <!-- ngView: -->
I am explaining my code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.png">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<link href="css/demo.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-view>
</div>
<!-- GLOBAL SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/defaults.js"></script>
<!-- Logout Notification Box -->
<!-- /#logout -->
<!-- Logout Notification jQuery -->
<script src="js/logout.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<script src="js/flex.js"></script>
<script src="js/dashboard-demo.js"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script src="js/shortcut.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<link rel="stylesheet" type="text/css" href="calendar/tcal.css" />
<script type="text/javascript" src="calendar/tcal.js"></script>
<script src="js/newbill.js"></script>
<script src="controller/loginController.js" type="text/javascript"></script>
<script src="controller/dashboardController.js" type="text/javascript"></script>
</body>
</html>
Here i have a login page first going to bind.When user will logged in successfully the dashboard page should display but its throwing the above error.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ngRoute']);
Admin.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.when('/dashboard',{
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
});
})
loginController.js:
var loginAdmin=angular.module('Channabasavashwara');
loginAdmin.controller('loginController',function($scope,$http){
$scope.user_name = '';
$scope.user_pass = '';
$scope.user_login=function(){
if($scope.user_name==''){
alert('user name filed should not keep blank');
}else if($scope.user_pass==''){
alert('password filed should not keep blank');
}else{
var userData={'user_name':$scope.user_name,'user_pass':$scope.user_pass};
console.log('user',userData);
$http({
method: 'POST',
url: "php/Login/login.php",
data: userData,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
console.log('response',response);
alert(response.data['msg']);
location.href='#dashboard';
},function errorCallback(response) {
alert(response.data['msg']);
});
}
}
});
Here i am getting the login page first.After finishing the successfully login it should redirect to dashboard page but this error is coming.Please help me to resolve this error.
Add $location in your controller.
loginAdmin.controller('loginController',function($scope,$http, $location){
and replace location.href='#dashboard'; with
$location.path('/dashboard');
I am pretty new to this whole angularjs thing and am having some trouble solving an issue. So we have a single page app that loads each page in an ng-view i have a directive that actually loads the date picker code into the view. When the page first loads it is fine but if I click to another page and then click back to the "add" page it gives me an error that says "Error: $(...).datepicker is not a function". I'm not sure if it's a jquery issue or what.
Here is my code:
index.html (towards the middle of the page is the ng-view where the views get loaded)
<!DOCTYPE html>
<html>
<head>
<title>Rx Pricing Maintenance</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<!-- <link rel="stylesheet" href="./resources/bootstrap-datepicker/css/datepicker.standalone.css"> -->
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/main.css">
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap-dialog.css">
<link rel="stylesheet" href="resources/DataTables-1.10.5-dist/css/jquery.dataTables.css">
<!-- External Sources -->
<script src="resources/jquery-2.1.3-dist/jquery-2.1.3.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="./resources/angular-1.3.15/angular.js"></script>
<script src="./resources/angular-1.3.15/angular-route.js"></script>
<script src="./resources/angular-1.3.15/angular-resource.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap-dialog.js"></script>
<script src="resources/DataTables-1.10.5-dist/js/jquery.dataTables.js"></script>
<script src="resources/angular-datatables-dist/angular-datatables.js"></script>
<script src="resources/angular-datatables-dist/vendor/datatables-columnfilter/js/dataTables.columnFilter.js"></script>
<script src="resources/angular-datatables-dist/columnfilter/angular-datatables.columnfilter.js"></script>
<script src="resources/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Internal Sources -->
<script src="resources/js/serviceCaller.js"></script>
<script src="./resources/js/controllers.js"></script>
<script src="./resources/js/application.js"></script>
<script src="resources/alasql/alasql.min.js"></script>
<script src="resources/alasql/xlsx.core.min.js"></script>
<script src="resources/alasql/alasql.js"></script>
</head>
<body ng-app="pricingApp" style="padding-top: 50px;">
<div class="container-fluid">
<nav><nav>
<div ng-view></div>
<footer>
<div class="footer-container">
</div>
</footer>
<!-- end footer -->
</div>
</body>
</html>
application.js
'use strict';
/* App Module */
var pricingApp = angular.module('pricingApp', [
'ngRoute',
'pricingControllers'
]);
pricingApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl : 'views/home.html'
}).when('/home', {
templateUrl : 'views/home.html'
}).when('/add', {
templateUrl : 'views/add.html',
controller : 'SchedulesController'
}).when('/help', {
templateUrl : 'views/help.html',
controller : 'VersionController'
});
$locationProvider.html5Mode(false).hashPrefix('!');
} ]);
pricingApp.directive('myDatePicker',function(){
return {
restrict: 'E',
templateUrl: 'views/dates.html',
controller: function($scope){
$(document).ready(function() {
$('#startDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
$('#endDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
});
}
}
});
add.html
<div class="main-container shadow-effect insert-tab">
<h2>Insert a New Pricing Schedule</h2>
<div>
<form class="form-inline" name="pricingInsertForm"
ng-submit="submitData()" role="form" novalidate >
<my-date-picker></my-date-picker>
</form>
</div>
I have left a lot of the filler code out but this is basically how it works. So When I load the application from localhost on the add view it works fine. But when I click off the add view to the home view or something like that and go back to the add view I get the error.
I want to know what is causing the datepicker not a function error and what I can do to fix it. Thanks in advance!