I hosted my angular App on Amazon Web Services S3. It is working like a charm in Firefox and IE but not in Chrome. In console I keep receiving :
(index):1 Uncaught SyntaxError: Unexpected token <
(index):1 Uncaught SyntaxError: Unexpected token <
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Application</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link href="lib/angular-material/angular-material.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- js libs -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- angular material requirements -->
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-aria/angular-aria.min.js"></script>
<script src="lib/angular-messages/angular-messages.min.js"></script>
<!-- angular material -->
<script src="lib/angular-material/angular-material.min.js"></script>
<!-- your app's js -->
<script src="modules/Add/add.js"></script>
<script src="js/all.min.js"></script>
</head>
<body ng-app="Application">
<div class="ng-main" ui-view ng-cloak></div>
</body>
</html>
CORS are activated! Do you have any idea? Any help would be appreciated!
PS : Locally, with npm start, it is also working on chrome without any problem!
All I had to do is CTRL+MAJ+R on Chrome and it is working like a charm! Solved
Related
I am trying to add a local file to the HEAD section of index.html in my VueJs project.
index.html
<!doctype html>
<meta charset="utf-8">
<html lang="en">
<head>
<!-- https://npms.io/search?q=vue%20split -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="../src/assets/js/myfile.js"></script>
<title>demo</title>
</head>
My file structure is as follows:
/path/to/project
/public
index.html
/src/assets/js/myfile.js
When I add the javascript file, it seems to be interpreted as an HTML file, so in the console, I see the following error:
Uncaught SyntaxError: Unexpected token <
When I look at the source in the Chrome browser, I see that the js in interpreted as an HTML file.
I installed Laravel 5.4 in my server /public_html/laravel/ folder. When I access example.com/lavarel/public/, it works.
I copied all my compiled files in my local public/ folder into the example.com/lavarel/public/. Then I add the <script src="/js/app.js"></script> into my welcome.blade.php:
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/css/uikit.min.css" />
<!-- <link rel="stylesheet" href="assets/sass/uikit.css" /> -->
<!-- jQuery is required -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.25/js/uikit-icons.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" style="background:#666;height: 100vh;">
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>
But when I go to example.com/lavarel/public/ again, I got 404 error:
GET example.com/js/app.js 404 (Not Found)
if I change to <script src="/laravel/public/js/app.js"></script>, I will get another 404 error:
GET example.com/laravel/public/laravel/public/js/app.js 404 (Not
Found)
How can I resolve this?
I have same issue. It simply solved by running:
npm run dev
Step1: run the below command in your project.
npm install
Step2: after successful npm modules installations run the below command.
npm run dev
For better understanding visit laravel doc: https://laravel.com/docs/5.8/frontend
I am working on a Cordova/PhoneGap project. I tried to display js console.log in Xcode console.
I install the cordovan-plugin-console but it is not working.
After reading lost of stackoverflow post, I came up with this code:
<!DOCTYPE html>
<html>
<head>
<script>
function onDeviceReady() {
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
}
function init() {
document.addEventListener('deviceready', onDeviceReady, true);
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/factories/DeviceFactory.js"></script>
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/DeviceController.js"></script>
</head>
<body ng-app="starter" onload="init()">
<script>
console.log("++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++")
</script>
<ion-nav-view></ion-nav-view>
</body>
</html>
However, it is still not working.
Could anyone help me?
Thanks
I don't know about Xcode's console being able to show a javascript console output but i know that you can do the same with safari dev tools, take a look at this : safari dev tools
My ng-click events are firing twice in my Ionic app and I have not been able to figure out how to fix this. To test this error, I have compressed my code to the following (the error is still occurring in the iOS emulator and on the iOS device, however not in the browser nor on android):
Running version (rendered by browser, error is not produced): play.ionic.io/app/2fc7300bf4a6
JS
(function() {
var app = angular.module('nh-launch', ['ionic']);
app.controller('testCtrl', function($scope) {
$scope.testClick = function () {
alert("hello");
};
});
}());
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>NoHarm Safety Application</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-random-string/src/angular-random-string.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="nh-launch">
<ion-pane>
<ion-content>
<div ng-controller="testCtrl">
<button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Help is greatly appreciated!
This is a current bug with ionic. It is due to the alert() and $window.alert() functions. I have posted the issue here: https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496
I'm starting on learning EmberJS and I see this error in the console :
Uncaught TypeError: Cannot call method 'proto' of undefined ember-1.0.pre.min.js:17
It seems that just by including the library I get that error. Does anyone have any idea why I get that ?
EDIT : Added HTML Markup
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world!</h1>
{{/view}}
</script>
<!-- The missing protocol means that it will match the current protocol, either http or https. If running locally, we use the local jQuery. -->
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Also there's this JS in the app.js file :
var App = Em.Application.create();
App.MyView = Em.View.extend({
mouseDown: function() {
window.alert("hello world!");
}
});
but it has been removed and all the templating part from the HTML as well, and I still got the same error (:
From the Ember Documentation:
Every Ember app should have an instance of Ember.Application. This
object will serve as the globally-accessible namespace for all of the
other classes and instances in your app
The key here is "global". Here's an example of an application:
window.App = Ember.Application.create();
Your problem is the var-keyword on your Application.create. Remove that and add Window to make the error disappear.