I'm working on a Sails.js app using angular 1.5x for front end. Recently I began working with textAngular, which works good in development, however, for some reason running in production, which (I believe to be the issue) runs grunt concat and uglify, therefore minimizing all js, I get a js error regarding injecting into my angular module/app. If I remove all references to textAngular it will concat/uglify and run fine in production. I want to use textAngular, and don't believe it is an issue with those scripts per say. How should I go about troubleshooting this issue? Are there any concat or uglify options that might help me pinpoint or resolve the issue?
ADDITIONAL INFO:
The angular code for injecting textAngular:
var sangularApp = angular.module('sangularApp', ['datatables', 'textAngular']).
config(function($provide) { // provider-injector
$provide.decorator('taOptions', ['$delegate', function(taOptions) { // $delegate is the taOptions we are decorating
taOptions.toolbar = [
['pre', 'bold', 'italics', 'underline', 'strikeThrough','ol','insertLink', 'insertImage','html']
];
return taOptions;
}]);
});
Here is the error I get (when I run in production and the files are minified:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=sangularApp&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0%2F%24injector%2Funpr%3Fp0%3Da%0Ad%2F%3C%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A1797%0APa%2Fo.%24injector%3C%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A20234%0Ad%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18987%0Ae%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A19221%0Ak%2F%3C.invoke%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A19311%0Ad%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18448%0Aj%2F%3C%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18580%0Af%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A2243%0Aj%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A18357%0APa%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A20389%0A_%2Fg%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A9026%0A_%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A9329%0A%24%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A10%3A8641%0A%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A14%3A26564%0Afa.Callbacks%2Fj%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A2%3A7154%0Afa.Callbacks%2Fk.fireWith%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A2%3A7927%0A.ready%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A2%3A9741%0Ag%40http%3A%2F%2Fcutupcode.com%2Fmin%2Fproduction.min.js%3A1%3A1606%0A
This is a difficult question to respond to without some debugging information or console errors.
From what you've mentioned my suggestion would be to look back over your scripts and make sure that the additional library for textAngular has been included and that the injection of the library into your module is done correctly.
Minification and concatenation typically don't cause any issues for me when the library works fine without those tools applied.
Related
I'm using Typescript such that there are many differences in Release Mode and Debug Mode.in the Debug Mode i use http://localhost:port/ basic URL. However, in Release Mode I have to use https://www.example.com/
Main problem
it makes me change URLs in Release Mode and Debug Mode Repeatedly. Indeed, There are other parameters that I have to change in Release Mode and Debug Mode manually which may Cause errors to misconfiguring.
What I am looking for
avoiding manually configuration in Release Mode and Debug Mode
Clues and assumptions
there may be a way using Macros in Typescript likewise something that we would use in MsBuild or WebConfig like $(ConfigurationName) And $(ProjectDir)
Best desired solution that I'm looking for
Easiest Solution in which doesn't need to learn Extra and doesn't change project Architecture.IF I have to use webpack, please put complete details around it.
Project framework
Asp.net .Net Framework or Asp.Net Core
Minimal reproduce able code
Consider you ONLY want to change this URL
const URL = http://localhost:port/
To
const URL = https://www.example.com/
in the Release Mode
Possible hard solutions
as #Kaca992 suggested webpack can resolve the issue by using
mode: 'development' and mode: 'production' like:
module.exports = {
mode: 'development'
};
production and development mode extra information
But the above solution has these Cons:
Takes time to learn webpack
Needs to be familiar with the basics concepts of npm
Needs to be familiar with concepts of bundling and minification
Needs working with modules (Import/Export)
You would have to use a environment variable and do checks based on that. You could create a helper method like this:
export function isProduction() {
return process && process.env && process.env.NODE_ENV === 'production';
}
Just be careful that most bundlers cant remove this code (it needs to be an inline check for it to be removed in compile time). If you are using something like webpack you can easily include the NODE_ENV variable using https://webpack.js.org/plugins/define-plugin/ .
This is also an excelent read into the topic: https://overreacted.io/how-does-the-development-mode-work/
Also a good way of dealing with this if you have alot of different setups would be to group all of the different values in a helper module:
debug.config.ts
release.config.ts
and then in your code you use config.ts wich just re-exports based on your configuration:
import * as debug from debug.config.ts;
import * as release from release.config.ts;
const config = isProduction() ? release : debug;
export default config;
EDIT: Is there anywhere to get an un-minified version of the Here-api to use when debugging? It's impossible for me to figure out what 'v' is and why it may be undefined.
We're using the HERE API both from our website where it works flawlessly and our old RDP C++ application which runs a similar webpage in an embedded IE window. It should be using a stripped version of IE11 I believe.
We recently upgraded to the new HERE API after routing stopped working in the old one, and it worked for a while but a while ago it suddenly didn't. And no one can recall making any changes that could affect this.
I have narrowed it down to a single line of code where it crashes. (platform is already defined in the scope through our geo-service script, the same one being used for the web that works)
var defaultLayers = platform.createDefaultLayers();
This is an initialization of the map layers that is required for the maps to work, but we simply can't perform this action through this embedded browser window even though we run almost identical code on the web.
We receive two error messages of:
'v' is undefined
With a reference to some dynamically generated eval code.
This is the only lead I've managed to dig up, it's not much but I'm hoping someone else has encountered a similar issue and can point me in the right direction what to look for.
I found the issue, it was totally self inflicted...
When we implemented the solution there was an issue in the core js file from Here which made it not work in our servers due to some path being wrong. To fix this we had changed the path so it worked and then hosted our own version of the core file.
This worked great, until Here put up a new minor release which is automatically distributed through the same content link as before. This meant the minified files were no longer in sync with the variable names, thus causing v to never be defined where it should, since in our file it was probably named something else.
It was only by chance I noticed that the core js was side-loaded like that, I was looking in the completely opposite direction the entire time and didn't even consider the loading might've been tinkered with.
I want to create a file called config.js for the client end of my app, but it should be based on the environment. I've successfully done this for production using the tasks/register/prod.js file, but sailsjs does not seem to have an equivalent dev.js file.
I also can't find much information about this, so I'm hoping there is a standard workaround I'm just not thinking of.
I'm not sure why I found it so confusing, or why I never opened the README.md (duh!) in tasks/, but dev stuff goes in the default task (tasks/register/default.js).
ANSWER: README's are named as such for a very good reason.
I'm running BDD tests using the grunt-contrib-jasmine plugin. When I generate the _SpecRunner.html and run the tests through Chrome everything is fine. When I run the tests via PhantomJS I receive error messages which indicate that jQuery is not loaded.
The file that I'm testing uses LABjs to load jQuery, jQueryUI, and few other files that depend on them. This tag will be placed on a third party site so this script is required to load jQuery.
(function(){
function callback() {
$LAB
.script('path_to_jQuerry').wait()
.script('path_to_jQueryUI').wait()
.script('files_that_use_jQuery').wait();
}
loadJS('path_to_LABjs', callback);
})();
Assume that loadJS successfully loads LABjs. Like I said, when I run the tests on this file through the browser there are no errors, but using grunt-contrib-jasmine via PhantomJS I receive the following error before any of my tests complete:
TypeError: 'undefined' is not a function (evaluating '$.publish("foo")')
The code that produces looks like:
(function($) {
$.publish('foo');
})(jQuery);
My initial thought is that PhantomJS isn't compatible with the LABjs script loader or that the code is 'evaluated' but PhantomJS at the wrong time. Snooping around the grunt-contrib-jasmine, jasmine, and phantomjs code hasn't gotten me anywhere.
Any comment is appreciated.
I came to the conclusion that grunt-contrib-jasmine does not accurately mimic the tests as if they were run in the browser due to the dynamic loading of the JavaScript with LABjs. The module begins evaluating the JavaScript on the page before it has finished loading and before the tests begin. This may have to do with how grunt-contrib-jasmine uses the onPageLoad event, but I'm not sure of the specific cause. Manually testing the with the _SpecRunner.html file in the browser produces no errors. In the end I removed the dynamic loading from the JavaScript file and will test the dynamic loading another way.
I am a newbie to jasmine, please correct me if I am asking a wrong question.
I am working on a legacy system which has a lot java script code. I would like to write some tests for the same. Initially I thought of using buster since it's in beta I didn't explored much about it. Meantime while searching I came across jasmine. Writing tests in jasmine was simple, maven plugin makes jasmine to be integrated with CI also we can get coverage report. So I felt to use jasmine.
In our current legacy systems there are several js, which need's a lot of refactoring . But to start off writing some test.I need some help. Let me narrate the problem I am facing
We have a lot of scripts having conflicting function names, and global variable's and so on. So specifying the jsSource in pom or jstestconf file is cumbersome, as I need to exclude few files, sometimes scripts which needs tests might have a conflicting function name. Also some scripts may be dependent on other's and so on.
Is there a way in jasmine the below mentioned scenario could be achieved.
Test1.js
Include specific library, excluding common once
Include the java script(Source1.js) source which needs to tested
Then write the tests
Test2.js
Include specific library, excluding common once
Include the javascript source(Source2.js) which needs to be tested
to tested
Then write the tests
Something similar to junit's where we say include class which needs to be tested.
Doing some initial search I got to know by using requirejs I can achieve this. But I couldn't find any concrete example's.
I would need your opinion before proceeding further.
Also is there any other testing framework which I use which have good integration with maven & eclipse and better modularity of tests.
I've been using Karma to run jasmine tests, and you can specify the files Karma includes via the karma.conf.js files property. So you could set up 2 different configurations for Test1.js and Test2.js. For example (assuming you have node_modules and your other files are under my-application-root:
for config 1:
module.exports = function(config){
config.set({
basePath : './',
//files to load in the browser
files : [
'my-application-root/specific-library-1.js',
'my-application-root/Source1.js',
'my-application-root/test/Test1.js',
'my-application-root/node_modules/**/*.js'
],
exclude : [
'my-application-root/common-lib.js',
'my-application-root/specific-library-2.js',
],
.......
and for config 2:
module.exports = function(config){
config.set({
basePath : './',
//files to load in the browser
files : [
'my-application-root/specific-library-2.js',
'my-application-root/Source2.js',
'my-application-root/test/Test2.js',
'my-application-root/node_modules/**/*.js'
],
exclude : [
'my-application-root/common-lib.js',
'my-application-root/specific-library-1.js',
],
.......