JavaScript errors are not showing after minification - javascript

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
})

Related

VegasJS are not working with bower

I am trying to use VegasJS as a slider, and Bower o manage my packages, but I am not able to run the vegas using bower, and Vegas aren't working at all, I tried to use without bower too, but was not successfully. It only occurs in my localserver, because I rewrite the exact same code in Codepen, and it works perfectly.
I'm using Gulp too, don't know if it will make some difference.
My HTML code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Page Title</title>
<!-- CSS -->
<link rel="stylesheet" href="../bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="../bower_components/vegas/dist/vegas.min.css">
<link rel="stylesheet" href="../bower_components/owl.carousel/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="./css/style.css">
<!-- JavaScript -->
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../bower_components/vegas/dist/vegas.min.js"></script>
<script type="text/javascript" src="../bower_components/owl.carousel/dist/owl.carousel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<header>
</header>
</body>
The CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
header {
height: 100vh;
background-color: crimson; }
The JavaScript code:
$("header").vegas({
slides: [
{ src: "https://unsplash.it/1000x1000?image=421" },
{ src: "https://unsplash.it/1000x1000?image=500" },
{ src: "https://unsplash.it/1000x1000?image=425" },
{ src: "https://unsplash.it/1000x1000?image=261" }
]
});
Gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('./public/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass())
.pipe(gulp.dest('./public/css'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', ['sass'], function() {
browserSync.init({
server: {
baseDir: "public",
routes: {
"/bower_components": "bower_components"
}
}
});
gulp.watch('./public/sass/**/*.scss', ['sass']);
gulp.watch('./public/*.html').on('change', browserSync.reload);
gulp.watch('./public/js/*.js').on('change', browserSync.reload);
});
gulp.task('autoprefixer', function() {
gulp.src('./public/css/style.css')
.pipe(autoprefixer({
"browserslist": [
"Chrome",
"Firefox",
"Explorer",
"Edge",
"iOS",
"Opera",
"Safari",
"ExplorerMobile",
"last 3 versions",
"> 1%"
],
cascade: false
}))
.pipe(gulp.dest('./public/css'))
});
gulp.task('watch', function() {
gulp.watch('./public/css/*.css', ['autoprefixer']);
});
gulp.task('default', ['sass', 'browser-sync', 'autoprefixer', 'watch']);
Everything seems to be working very well, with exception of Vegas, I don't know why in my localserver it aren't working.
In this case, I tested the Owl Carousel, and its working perfectly well, the only problem here, are the Vegas. I almost certainly the problem are on css link.
I tested in WebStorm and Atom IDE by the way.
Thanks for all the help, but I fixed it, what happens was, I commited the mistake of add the initialization without document ready property, the right way:
$(document).ready(function(){
$("header").vegas({
slides: [
{ src: "https://unsplash.it/1000x1000?image=421" },
{ src: "https://unsplash.it/1000x1000?image=500" },
{ src: "https://unsplash.it/1000x1000?image=425" },
{ src: "https://unsplash.it/1000x1000?image=261" }
]
});
});

Require JS Refress Issue while file access from browser cache

Am using requiredjs. After deployment to the any environment (now screenshot from local) am getting refresh issue. page is not loading properly. I have checked in network tab in firebug. its showing(below image). when the file get 200 OK (BF Cache) status, page not loading properly.
Error:
After giving ctrl+f5
all the pages are coming correctly.
some time i need to give lot of ctrl+f5 then only its working asexpected
my requirejs config file:
require.config({
baseUrl: "../../../../../../../Scripts",
//waitSecond: 0,
//urlArgs : "q="+new Date().getTime(),
enforcedefine: true,
paths: {
//RequireJS Plugins.
'text': 'lib/requirejs/text',
'domReady': 'lib/requirejs/domReady',
'app': 'app',
'noext': 'lib/requirejs/noext',
// Shared Libraries.
'jquery': 'lib/Kendo/jquery.min',
'jqueryMigrate': 'lib/jquery-migrate-1.2.1.min',
'jszip': 'lib/jszip',
'kendo': 'lib/Kendo/kendo.all.min',
'materialize': 'lib/materialize/materialize',
'jqueryValidate': 'jquery.validate.min',
'jsignature': 'lib/jSignature/jSignature.min',
'jqueryMaskedinput': 'lib/jquery/jquery.maskedinput.min',
'jqueryMd5': 'lib/jquery/jquery.md5',
'truckNotifier': 'Controls/serviceTruck.Notifier'
},
shim: {
'app': {
deps: ['kendo']
},
'kendo': {
deps: ['jquery', 'jszip'],
},
'jqueryExtensions': {
deps: ['jquery'],
},
'materialize': {
deps: ['jquery', 'kendo'],
},
'krossRespJs': {
deps: ['jquery'],
},
'jqueryMaskedinput': {
deps: ['jquery'],
},
'truckUploadSelector': {
deps: ['jquery'],
},
'underscore': {
exports: '_'
}
}
});
app.js file:
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([
'domReady!',
'text',
'noext',
'jquery',
'kendo',
'jszip',
'truckNotifier'
], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function (domReady,text,noext,$,kendo,jszip,truckNotifier) {
'use strict';
var app = kendo.observable({
// ---- PUBLIC FIELDS ----
DATE_FORMAT: 'MM/dd/yyyy',
DATE_MASK: '99/99/9999',
DATE_TIME_FORMAT: 'MM/dd/yyyy HH:mm',
DATE_TIME_MASK: '99/99/9999 99:99',
PHONE_MASK: '(999) 999-9999',
TIME_FORMAT: 'HH:mm',
TIME_MASK: '99:99',
$notifier: $('#notify_container'),
router: new kendo.Router(),
isInitialized: false,
/** This call sets up background components of the current page. */
initialize: function () {
var self = this;
// Initialize this first so it can show loading while the rest
// of this module loads.
if (!self.isInitialized) {
$('.link-external').attr('target', '_blank');
$('#notify_container').serviceTruckNotifier();
self.isInitialized = true;
}
window.JSZip = jszip;
},
showPleaseWait: function (show) {
},
/* Pops up a notification at the top of the page. */
notify: function (type, message) {
var types = {
'push': 'notifyPush',
'info': 'notifyInfo',
'success': 'notifySuccess',
'error': 'notifyError',
'warn': 'notifyWarn',
'expired': 'notifyExpired'
};
this.$notifier.serviceTruckNotifier(types[type], message);
}
});
app.initialize();
return app;
}));
script used in View Page:
<script>
require([
'domReady!',
'text',
'noext',
'app',
'jquery',
'jqueryValidate',
'kendo',
'truckNotifier'
],
function (
domReady,
text,
noext,
app,
$,
jqueryValidate,
kendo,
truckNotifier
) {
var notifier = $('#notify_container'),
message = '#(ViewBag.Message)';
$("#primaryTextButton").kendoButton();
$('.all-content').removeClass('dn');
$('.mcenter').addClass('dn');
if (message != "") {
notifier.serviceTruckNotifier("notifyExpired", "#C.LINK_HAS_BEEN_EXPIRED");
}
});
</script>
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Styles/all/css")
<script src="~/Scripts/lib/requirejs/require.js"></script>
<script src="~/Scripts/config.js"></script>
</head>
<body id="#RenderSection("BodyId", false)">
#{
System.Reflection.Assembly web = typeof(ServiceTruck.Web.Models.ExternalLogin).Assembly;
System.Reflection.Assembly assembly = System.Reflection.Assembly.GetExecutingAssembly();
System.Diagnostics.FileVersionInfo fvi = System.Diagnostics.FileVersionInfo.GetVersionInfo(web.Location);
string version = fvi.FileVersion;
System.Reflection.AssemblyName webName = web.GetName();
string myVersion = version.ToString();
ViewBag.Version = myVersion;
}
#RenderSection("featured", required: false)
<section class="container-fluid">
#RenderBody()
</section>
<!-- Service Truck Layout Footer Start -->
<footer class="copy-right">
<div class="col-md-6 text-left">
<p>All rights reserved.</p>
<p>Copyright © 2016 Name.</p>
</div>
<div class="col-md-6 text-right">
<p>Build #myVersion</p>
<p>Recommended Browsers: Internet Explorer 11, Firefox 48, Chrome 52</p>
</div>
</footer>
<!-- Service Truck Layout Footer End -->
#RenderSection("scripts", required: false)
</body>
</html>
One thing that is definitely wrong with your configuration is the shim for app:
'app': {
deps: ['kendo']
},
Your app module is an AMD module: it calls define. So you cannot use a shim for it. Setting a shim for a module that cannot benefit from one can lead to undefined behavior.
I've run experiments with this at times and got inconsistent results from one version of RequireJS to the next. The point is that setting a shim for an AMD module has no defined semantics.

Socket.io variable not defined in Phonegap mobile application

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>

SystemJS Builder - window not defined

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.

AngularJS and RequireJS - Uncaught Error: No module: MyApp

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!

Categories

Resources