I'm trying to develop a mobile application using Phonegap with RequireJs, Backbone, jQuery and I'm running into a problem each time I try to include the requirejs script tag:
<script data-main="js/app" src="node_modules/requirejs/require.js</script>
After I include this, I get the following error:
ReferenceError: io is not defined.
I'm not using socket.io but I think that Phonegap is using it in order to refresh the page in the browser.
This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<title>Hello World</title>
</head>
<body>
something nice
<!-- Content -->
<script type="text/javascript" src="cordova.js"></script>
<script data-main="js/app" src="node_modules/requirejs/require.js"></script>
</body>
</html>
This is my js/app.js file:
requirejs.config({
baseUrl: 'js',
shim: {
'socket.io': {
exports: 'io'
},
'underscore': {
exports: '_'
},
'backbone': {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
},
paths: {
jquery: 'jquery.min',
underscore: 'lodash.min',
backbone: 'backbone',
socketio: '../socket.io/socket.io'
// package: 'node_modules'
}
// map: {
//
// '*': {
// 'jquery': 'private/jquery'
// },
//
// 'private/jquery': {
// 'jquery': 'jquery'
// }
// }
});
I'm using Phonegap version 6.3.4.
Could you please tell me, what should i do in order to get rid of the error?
Thank you!
I've managed to solve it by reading these articles:
Has Phonegap integrate socket.io in version 3.5.0-0.20.10?
https://github.com/phonegap/phonegap-app-developer/issues/339
Mismatched anonymous define() module
Here's my fix:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
// Fixes "Uncaught ReferenceError: io is not defined".
// We need to load RequireJs after socket.io has been loaded.
function injectRequireJs() {
var h = document.getElementsByTagName('body')[0];
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'node_modules/requirejs/require.js';
s.setAttribute('data-main', 'js/bootstrap');
h.appendChild(s);
}
setTimeout(function(){
injectRequireJs();
}, 1);
</script>
Related
I am trying to build my project as a Self-Executing Bundle (SFX) with Gulp and SystemJS-Builder. When I run my gulp task, I keep getting the error, "window is not defined." I researched the issue and could not find a solution.
Here is my gulp build file
var gulp = require('gulp');
var path = require('path');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var Builder = require('systemjs-builder');
gulp.task('bundle:js', function () {
var builder = new Builder('MyApplication/application/source', 'MyApplication/application/source/config.js');
return builder.buildStatic('MyApplication/application/source/app.js', 'MyApplication/application/js/Site.min.js', {
format: "amd"
});
});
Here is my SystemJS configuration:
(function () {
window.define = System.amdDefine;
window.require = window.requirejs = System.amdRequire;
var kendoVersion = "2016.3.914";
var map = {
text: "../Scripts/text.js",
app: "app.js",
main: "main.js",
aes: "../../../Scripts/aes.js",
jquery: "../../../Scripts/kendo/" + kendoVersion + "/jquery.min.js",
kendo: "vendor/kendo/kendo.js",
DataTables: "../../../Scripts/DataTables/datatables.js",
k: "../../../Scripts/kendo/" + kendoVersion + "/",
bootstrap: "../../../Scripts/bootstrap.js",
lodash: "../../../Scripts/lodash.js",
moment: "../../../Scripts/moment.js",
ajaxSetup: "security/ajaxSetup.js",
q: "../../../Scripts/q.js",
toastr: "../../../Scripts/toastr.js",
wizards: "viewmodels/shared",
'kendo.core.min': "../../../Scripts/kendo/" + kendoVersion + "/kendo.core.min.js"
};
var paths = {
'kendo.*': "../../../Scripts/kendo/" + kendoVersion + "/kendo.*.js",
jquery: "../../../Scripts/kendo/" + kendoVersion + "/jquery.min.js",
bootstrap: "../../../Scripts/bootstrap.js"
};
var meta = {
app: { deps: ["kendo", "jquery"] },
main: { deps: ["jquery"] },
jquery: { exports: ["jQuery", "$"], format: "global" },
kendo: { deps: ["jquery"] },
bootstrap: { deps: ["jquery"] },
'kendo.core.min': { deps: ["jquery"] },
DataTables: { deps: ["jquery"], exports: "$.fn.DataTable" },
toastr: { deps: ["jquery"] }
};
var packages = {
pages: {
main: 'views/*.html',
format: 'amd',
defaultExtension: 'html'
}
};
var config = {
baseURL: "application/source",
defaultJSExtensions: true,
packages: packages,
map: map,
paths: paths,
meta: meta
};
System.config(config);
System.import("main");
})(this);
I load SystemJS in my index page. Here is my Index.cshtml page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Application</title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
#Styles.Render("~/application/css/site.min.css")
<script src="#Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/localStoragePolyFill.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/system.js")" type="text/javascript"></script>
</head>
<body>
#Html.AntiForgeryToken()
<div id="applicationHost" class="page-wrap">
<!-- The application is rendered here -->
</div>
<script src="#Url.Content("~/application/source/config.js")" type="text/javascript"></script>
</body>
</html>
I believe the issue is this line of code in the config
window.define = System.amdDefine;
window.require = window.requirejs = System.amdRequire;
Where does the above line of code go if not in the config?
I have fixed the issue by splitting out the configuration and startup. I previously had the configuration and startup in the same file. My configuration file has configuration only, I have a separate startup file that actually starts the application.
Index.cshtml
#using System.Web.Optimization;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Application</title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
#Styles.Render("~/application/css/site.min.css")
<script src="#Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/localStoragePolyFill.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/system.js")" type="text/javascript"></script>
</head>
<body>
#Html.AntiForgeryToken()
<div id="applicationHost" class="page-wrap">
<!-- The application is rendered here -->
</div>
<script src="#Url.Content("~/application/source/startup.js")" type="text/javascript"></script>
</body>
</html>
Startup.js
// make sure we can load AMD files
window.define = System.amdDefine;
window.require = window.requirejs = System.amdRequire;
// fire startup
window.require(["application/source/config.js"], function () {
// start app once config is done loading
System.import("main");
});
config.js
System.config({
baseURL: "application/source",
defaultJSExtensions: true,
packages:{
pages: {
main: 'views/*.html',
format: 'amd',
defaultExtension: 'html'
}
},
map: {
text: "../Scripts/text.js",
app: "app.js",
main: "main.js",
aes: "../../../Scripts/aes.js",
jquery: "../../../Scripts/kendo/2016.3.914/jquery.min.js",
kendo: "vendor/kendo/kendo.js",
DataTables: "../../../Scripts/DataTables/datatables.js",
k: "../../../Scripts/kendo/2016.3.914/",
bootstrap: "../../../Scripts/bootstrap.js",
lodash: "../../../Scripts/lodash.js",
moment: "../../../Scripts/moment.js",
ajaxSetup: "security/ajaxSetup.js",
q: "../../../Scripts/q.js",
toastr: "../../../Scripts/toastr.js",
wizards: "viewmodels/shared",
'kendo.core.min': "../../../Scripts/kendo/2016.3.914/kendo.core.min.js"
},
paths: {
'kendo.*': "../../../Scripts/kendo/2016.3.914/kendo.*.js",
jquery: "../../../Scripts/kendo/2016.3.914/jquery.min.js",
bootstrap: "../../../Scripts/bootstrap.js"
},
meta: {
app: { deps: ["kendo", "jquery"] },
main: { deps: ["jquery"] },
jquery: { exports: ["jQuery", "$"], format: "global" },
kendo: { deps: ["jquery"] },
bootstrap: { deps: ["jquery"] },
'kendo.core.min': { deps: ["jquery"] },
DataTables: { deps: ["jquery"], exports: "$.fn.DataTable" },
toastr: { deps: ["jquery"] }
}
});
I am not sure that this is the correct solution, but it did solve the "window not defined" issue.
My Ionic 2 application working fine on chrome browser, it gives expected output. But when it run on simulator or browser gives below error.
Here is the code I'm using:
<label class="time">{{appointment.DateSent | date:"HH"}}:{{ appointment.DateSent| date:"mm"}}</label>
<label class="month">{{appointment.DateSent| date:"MMM"}}</label>
<label class="day">{{appointment.DateSent| date:"dd"}}</label>
<label class="year">{{appointment.DateSent| date:"yyyy"}}</label>
Class implementation:
import {Page, NavController, NavParams} from 'ionic/ionic';
import { Component, Pipe, PipeTransform, Inject, OnInit} from 'angular2/core';
import 'rxjs/add/operator/map';
import { Http, Headers, URLSearchParams } from 'angular2/http';
import {SERVER_URL, appName, alertAppName} from '../services/config';
import {AppointmentsDetailPage} from '../appointments-detail/appointments-detail';
import {MessagesService} from '../services/messages-service';
var today = new Date();
#Page({
templateUrl: 'build/pages/appointments/appointments.html',
providers: [MessagesService]
})
export class AppointmentsPage implements PipeTransform {
constructor(http: Http, nav: NavController, messagesService:MessagesService, navParams:NavParams) {
this.http = http;
this.messagesService = messagesService;
this.nav = nav;
this.selectedItem = navParams.get('item');
}
ngOnInit() {
this.messagesService.getAppointmentList()
.subscribe(data => {
var appointments = new Array();
for(var i in data){
var key = data[i];
appointments.push({
MessageID: key.MessageID,
CategoryID: key.CategoryID,
DateSent: new Date(key.DateSent),
Title: key.Title,
MessageContent: key.MessageContent,
Sender: key.Sender,
Recipient: key.Recipient,
DateReceived: key.DateReceived,
DateRead: key.DateRead,
Note_Direction: key.Note_Direction,
Viewed: key.Viewed,
AppointmentDateTime: key.AppointmentDateTime,
MessageAttachments: key.MessageAttachments
});
}
this.appointments = appointments;
All the date pipe were working alright in Chrome browser with no error, but it gives below exception on simulator or device (took from Safari simulator debugging)
Edited:
Index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">-->
<!--<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="build/css/font-awesome.min.css">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>
</body>
</html>
You should load polyfills (Chrome can run Angular without them):
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
Sasxa's answer helped me to solve this issue. Although I tried to specify path it doesn't seems to find its resource. Following resources helped me to get the answer. As Sasxa pointed out, Safari needs Intl polyfill.
https://www.npmjs.com/package/intl
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Browser_Compatibility
I tried to install it using NPM and Bower it didn't work, finally I settle with using CDN location as it worked for me.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
I am trying to use Angular with RequireJS, and am having a problem with Angular routing. The error I receive is " Unknown provider: $routeProvider" so I know that the ngRoute dependency is not working. I have no idea why. Here is my code below, can someone please help me?
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div id="main">
<div ng-view>
</div>
<script data-main="js/main" src="js/vendor/require.js">
</body>
</html>
main.js
require.config({
paths: {
'angular': 'vendor/angular',
'domReady': 'vendor/domready',
'ngRoute': 'vendor/angular-route'
},
shim: {
'angular': {
exports: 'angular'
},
'ngRoute': {
deps: ['angular']
}
},
deps: ['./bootstrap']
});
bootstrap.js
/**
* bootstraps angular onto the window.document node
*/
require([
'require',
'angular',
'ngRoute',
'./app',
'./routes'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['app']);
});
});
app.js
define('app',
[
'angular',
'ngRoute'
], function(ng) {
'use strict';
console.log('app.js loaded');
var app = ng.module('app', ['ngRoute']);
console.log(app);
return app;
});
routes.js
require(['app'], function(app) {
'use strict';
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: './views/home.html',
controller: 'homeCtrl'
});
}]);
});
I fixed the problem myself. Here is my new main.js and bootstrap.js Hope it might help someone else having trouble with RequireJS + ngRoute. I still need to seperate my app.config into another file, but for now this solution is working nicely. Thank goodness.
main.js
require.config({
paths: {
'angular': 'vendor/angular',
'domReady': 'vendor/domready',
'angularRoute': 'vendor/angular-route'
},
shim: {
'angular': {
exports: 'angular'
},
'angularRoute': {
deps: ['angular'],
exports: 'angularRouter'
}
},
deps: ['./bootstrap']
});
bootstrap.js
require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'js/views/home.html'
})
.otherwise('/');
});
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
});
I'm using r.js to minify js files in cordova based project. Unminified code is working fine, but after minifying nothing is working, not even console.log is working(which was placed in first line of the files which was loaded from index.html file), not even single error is being thrown.
So, I wanted to check whether minified code is throwing any errors at all even though if unminified code has errors. So, I changed some code(by changing object name to appp from app, and calling app.initialize) so that i can get an error in console(in unminified version). As expected I'm getting error in console with unminified version of code, where as minified version of same code(which has error) is not throwing any error.
I should be getting errors in minified code,even though the error is understable.First off I'm not getting any errors.So I don't know why nothing is working after minification, If i get some errors then I can find what exactly the problem with minified code.I don't know why this is happening.
Is anything I'm doing wrong here?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://* 'unsafe-inline' 'unsafe-eval'"/>
<title>Title</title>
</head>
<body>
<div id="mainContainer">
<!-- rootviewTpl -->
</div>
<div id="modals-demo">
<div class="row">
<div class="col s12">
<div id="modal" class="modal"></div>
</div>
</div>
</div>
<div class="loader" id="loader">
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/js/lock-7.10.3.js"></script>
<script src="lib/js/winstore-jscompat.js"></script>
<script src="lib/js/jwt-decode.min.js"></script>
<script type="text/javascript" src="js/config-variables.js"></script>
<script data-main="js/index.js" src="lib/js/require-2.0.0.js"></script>
</body>
</html>
index.js
define([
"./config"
], function(){
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
require(["js/database/FTMobileDatabase"]);
}
};
app.initialize();
});
config.js:
requirejs.config({
baseUrl: "lib/js",
paths: {
js: "../../js",
templates:"../../templates",
jquery:"jquery.min",
underscore:"underscore.min",
backbone:"backbone",
handlebars:"handlebars",
marionette:"backbone.marionette.min",
d3: "d3",
"d3.chart": "d3.chart",
//materialze library
velocity:"velocity.min",
hammerjs:"hammer.min",
materialize:"materialize.min",
//date libraries
moment:"moment",
hbs: 'require-handlebars-plugin/hbs'
},
shim:{
"jquery":{
deps:[],
exports:"jquery"
},
"underscore": {
deps:[],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"marionette":{
deps:["backbone"],
exports:"Marionette"
},
"handlebars":{
deps:[],
exports:"Handlebars"
},
"d3": {
deps:[],
exports: "d3"
},
"d3.chart": {
deps: ["d3"],
exports: "d3Chart"
},
"materialize":{
deps:["jquery","velocity","hammerjs"],
exports:"materialize"
},
"moment":{
deps:[],
exports:"moment"
},
hbs: { // optional
helpers: true, // default: true
templateExtension: 'hbs', // default: 'hbs'
partialsUrl: '' // default: ''
}
},
waitSeconds: 0
});
build.json:
({
appDir: "./www",
dir:"./www",
mainConfigFile:"./www/js/config.js",
modules:[
{
name:"js/index",
include:[
"js/database/FTMobileDatabase"
],
exclude:[
"js/config"
]
}
],
preserveLicenseComments: false,
allowSourceOverwrites: true,
keepBuildDir:true
})
I am trying to create a new angular project with requireJS.
here is my index.html:
<!doctype html>
<html ng-app="MainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-main="js/requirejs.config.js" src="common/lib/requirejs/require.js"></script>
<title>{{'TITLE' | translate}}</title>
<link rel="stylesheet" href="common/lib/bootstrap-3.1.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body ng-controller="MainCtrl" ng-cloak class="ng-cloak">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>{{'HELLO' | translate}}
</button>
</body>
</html>
and here is my requirejs.config.js:
require.config({
baseUrl: 'common',
paths: {
angular : 'lib/angular-1.2.19/angular',
jquery : 'lib/jquery/jquery-2.1.1',
uibootstrap : 'lib/ui-bootstrap-0.11.0/ui-bootstrap-tpls-0.11.0',
bootstrap : 'lib/bootstrap-3.1.1-dist/js/bootstrap',
app : '../js/app',
config : '../js/config'
},
shim : {
angular : {
exports: 'angular'
},
jquery : {
exports: 'jquery'
},
uibootstrap : {
exports: 'uibootstrap'
},
bootstrap : {
exports: 'bootstrap'
}
},
// To remove urlArgs on production
urlArgs: "v=" + (new Date()).getTime() * Math.random()
});
require([
'../js/MainCtrl'
]);
every 2nd hit of F5 on the browser with the index.html loaded i receive the error:
"[$injector:nomod] Module 'MainApp' 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.
Any ideas why?
P.S - removing the ng-app="MainApp" tag and bootstrapping the angular manually after the dom is loaded resolves it, but i'm affraid iv'e done something wrong and want to make sure
EDIT - here is my app.js:
define(["angular", "config"], function(angular) {
return angular.module('MainApp', ['common']);
});
Here is my config.js:
define([
"angular",
"constants/constants",
"values/values",
"filters/filters",
"services/services",
"factories/factories",
"directives/directives",
"providers/providers",
"controllers/controllers"
], function(angular) {
return angular.module('common', [
'common.factories',
'common.services',
'common.directives',
'common.providers',
'common.constants',
'common.values',
'common.controllers',
'common.filters'
]);
});
Just check if the immediately parent folder has any space character in the name, as for my case - my folder structure was like.../In Progress/AngularSample/
I had the same issue, and apparently no issue in code, I eventually changed the parentfolder name from "In Progress" to "In-Progress" and it started working correctly!