I'm working on an app in angular 2/ nodejs and I'm trying to bootstrap the application. I've defined the root component in app.component.ts:
import {Component} from 'angular2/core';
#Component({
selector: 'pm-app',
template:`<div><h1>{{pageTitle}}</h1>
<div>My First Component</div>
<div>`
})
export /**
* name
*/
class AppComponent {
//constructor(parameters) {}
pageTitle: string = "Acme Product Managment";
}
and when the app loads, the page title should be injected into the index.html page in the <pm-app> tag:
(index.html)
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href= "node_modules/bootstrap/dist/css/bootstrap.css" rel= "stylesheet" />
<link rel="app/app.component.css" href="styles.css">
<!-- 1. Load libraries -->
<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>
<!-- Polyfill(s) for older browsers -->
<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 src="systemjs.config.js"></script>
<script>
System.config({
packages:{
app:{
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<pm-app>Loading App</pm-app>
</body>
</html>
For some reason, when the page renders, only the "Loading App" text shows which I think indicates that the bootstrapping process wasn't successful. When I open the dev console, I get the following errors:
shims_for_IE.js:2 Uncaught SyntaxError: Unexpected token <
es6-shim.min.js:2 Uncaught SyntaxError: Unexpected token <
system-polyfills.js:2 Uncaught SyntaxError: Unexpected token <
angular2-polyfills.js:2 Uncaught SyntaxError: Unexpected token <
system.src.js:2 Uncaught SyntaxError: Unexpected token <
Rx.js:2 Uncaught SyntaxError: Unexpected token <
angular2.dev.js:2 Uncaught SyntaxError: Unexpected token <
systemjs.config.js:2 Uncaught SyntaxError: Unexpected token <
localhost/:23 Uncaught ReferenceError: System is not defined
All of these packages should be installed so what could be the problem?
Related
I was writing application which gives the weather, I guess it will work like web page. I was doing the same thing what was doing author and at the end of lesson I got this error, I though it is due to link of jQuery, I changed it and it did not work, then I changed it back.
Html JS code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Weather by Alibek</title>
<script src="eel.js"></script>
<link rel="stylesheet" type="image/png" href="weather-icon.png">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="location" type="text" placeholder="Write the name of your Country ot City" required="" value="Bukhara, Uzbekistan">
<button id ="show">Know the weather</button>
<div id="info ">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
async function display_weather(){
let place = document.getElementById('location').value;
let res = await eel.get_weather(place)();
document.getElementById('info').innerHTML = res;
}
jQuery('#show').on('click', function(){
display_weather();
});
</script>
</body>
</html>
Here is the error
GET file:///home/alibek/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/myfiles/web/eel.js net::ERR_FILE_NOT_FOUND
index.html:27 Uncaught (in promise) ReferenceError: eel is not defined
And when I click button there are more errors
at display_weather (index.html:27)
at HTMLButtonElement.<anonymous> (index.html:32)
at HTMLButtonElement.dispatch (jquery.min.js:2)
at HTMLButtonElement.v.handle (jquery.min.js:2)
Please, can someone check it what could happen. Thanks
trying to use cropper.js:
https://github.com/fengyuanchen/cropperjs
https://fengyuanchen.github.io/cropperjs/
After downloading and unpacking files I created index.php on the root level:
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>IMGED</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href="src/index.css" rel="stylesheet">
</head>
<body>
<div>
<img id="image" src="img.jpg" alt='img'>
</div>
<script src="src/index.js"></script>
</body>
</html>
Console:
Uncaught SyntaxError: Unexpected identifier... index.js:1
index.js
import Cropper from './js/cropper';
export default Cropper;
What is wrong, pls?
I'm developing a simple web application using angularJS and I'm running into this issue I cannot resolve. Running my website I get this error in console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module App
due to: Error: [$injector:nomod] 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.
But I'm sure I didn't misspell the module name or forgot to load it. Here's my code:
var App = angular.module('App', ['ngRoute', 'ngMaterial', 'ui-notification', 'ngFileUpload']);
App.run(['$rootScope', '$location', function($rootScope, $location) {
console.log("TEST");
}]);
App.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
// TODO: routing
}]);
App.factory('file-uploader', ['Upload', function(Upload) {
var uploadFile = function(file, callback) {
var uploader;
uploader = Upload.upload({
url: 'SERVER URL' + '/upload-file',
data: {
image: file
}
});
uploader.then(function(fileData) {
return callback(null, fileData);
});
uploader.catch(function(error) {
return callback(error, null);
});
};
return uploadFile;
}]);
This is my index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta name="description" content="">
<meta name="author" content="AUTHOR">
<title>PROJECT NAME | Login</title>
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
<link rel="stylesheet" href="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.css">
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body ng-class="location" ng-cloak>
<div ng-view></div>
<script defer src="/bower_components/angular/angular.js"></script>
<script defer src="/bower_components/angular-route/angular-route.js"></script>
<script defer src="/bower_components/angular-aria/angular-aria.js"></script>
<script defer src="/bower_components/angular-animate/angular-animate.js"></script>
<script defer src="/bower_components/angular-messages/angular-messages.js"></script>
<script defer src="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.js"></script>
<script defer src="/bower_components/angular-material/angular-material.js"></script>
<script defer src="/bower_components/jquery/dist/jquery.js"></script>
</body>
</html>
And I've installed all the packages with bower...
Can someone please tell me where is the problem and how can I solve it?
It looks like you've forgotten to add your own script, based on the HTML you provided. I only see bower_components stuff being included
I am writing Jasmine tests and wanted to extend Jasmine by Jasmine-jQuery.
I downloaded the jasmine-jquery.js file added it to my libs folder and extended my SpecRunner.html like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.2.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.2.0/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.2.0/jasmine.css">
<script src="lib/jasmine-2.2.0/jasmine.js"></script>
<script src="lib/jasmine-2.2.0/jasmine-jquery.js"></script>
<script src="lib/jasmine-2.2.0/boot.js"></script>
<script src="lib/jasmine-2.2.0/sinon.js"></script>
<!-- libs -->
<script src="../../node_modules/requirejs/require.js"></script>
<script src="../../public/js/app/config/config.js"></script>
<script src="../../public/js/libs/jquery/dist/jquery.js"></script>
<!-- add spec files here -->
...
</head>
<body>
</body>
</html>
When I run a test it fails at this line...
var evtSpy = spyOnEvent('#selectLanguage', 'change');
...with this error Message:
TypeError: Cannot read property 'events' of undefined
at spyOnEvent (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine-jquery.js:30:24)
at Object.<anonymous> (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/spec/AddVehicleViewSpec.js:162:26)
at attemptSync (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1741:24)
at QueueRunner.run (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1729:9)
at QueueRunner.execute (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1714:10)
at Spec.Env.queueRunnerFactory (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:608:35)
at Spec.execute (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:346:10)
at Object.fn (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:2059:43)
at attemptAsync (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1771:24)
at QueueRunner.run (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1726:9)
This means jasmine.jQuery is undefined. What is wrong there?
I've used CDNs for all my scripts but I get the error
"Uncaught SyntaxError: Unexpected token <"
I've been stuck on this for hours, and I don't know why there's an error.
<!-- File: chapter10/simple-routing.html -->
<html>
<head>
<title>AngularJS Routing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-sanitize.js"></script>
</head>
<body >
<h2>AngularJS Routing Application</h2>
</body>
</html>
typo:
https//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js
^^