I'm moving my project from Ember AppKit to Ember-Cli. I have an myapp/app/app.js, where the app is initialized and in myapp/app/index.html I have the following lines:
var config = require('myapp/config/environment')['default'];
window.App = require('myapp/app')["default"].create(config.APP);
*config is not that important in my question.
So when I run the ember server I see that app.js was called twice. For the first time, automatically, I guess, and the second call is made by create() function from above. So after running the server I get an error:
"Uncaught Error: Assertion Failed: You cannot use the same root element (body) multiple times in an Ember.Application "
I know that the error means that I'm creating two instances of my app in the same DOM-Object and it can be solved by creating two sub containers () with different ids.
But how do I avoid creating the first instance, which is done automatically, before I actually call create()? Without the lines shown above the app is not shown at all, but with them I get the mentioned error. I have checked the whole app implementation, there is nothing what would call the initial instance creation, before create() function from above.
I didn't have that mistake in EmberAppKit running Grunt
In Ember CLI config lives in /config/environment.js, and it will be handed to your app automatically. You shouldn't need to this manually.
Setting window.App=this in app.js has solved the problem.
If you look into my-app.js in assets, you will see that an instance is created at the end of the script. So it only has to be assigned to window.App
Related
In app.js I created a global variable to access in all views: app.locals.siteTitle = 'Node Express';
My articles.ejs (view) renders it correctly. However, when I add another global variable like this: app.locals.sillyMessage = 'What the hello!';, it throws a reference error and tells me that sillyMessage is not defined.
A bit silly on my part but:
The server had to be restarted in order to process the changes in app.js before those variables could be initialized or used locally in views.
In order to prevent this issue in the future I added nodemon.js to watch for file changes in the directory and reload.js to update the page when a change is detected.
I'm using karma and mocha along with React's TestUtils to test a React application. One of the components that I'm testing imports a module with the following export:
export const OPTIONS = window.__OPTIONS__;
In my test, I am rendering the component into a virtual chrome browser in karma. I'm doing this via:
let tree = TestUtils.renderIntoDocument(<Component />);
The render function of "Component" references something like OPTIONS.someOption and when the above test runs, it blows up and says cannot read property 'someOption' of undefined.
I tried 'mocking' the __OPTIONS__ variable in the before() function (to set the value of it prior to the test running), but even after logging it out and seeing that it was in fact set, the value of it within my component module is still undefined. So it seems like webpack is bundling the modules prior to any of my test script actually running and thus it's always undefined.
Is there a way to have window.__OPTIONS__ set to a value as though it would if it were contained in <script>window.__OPTIONS__ = {};</script> at the top of my page and thus being properly imported with a value in my component module?
I don't want to get into why I'm attaching the variable to the window object, since it's something I can't avoid in this case...It's a Salesforce specific reason. If I could avoid using that variable altogether I would.
Try adding a window object to global with __OPTIONS__ in beforeEach:
beforeEach(function() {
global.window = {
__OPTIONS__: {}
};
});
I tried the global route, but to no avail...window was already always defined since karma was spinning up the Chrome browser. After messing around with logging in different areas, I confirmed the order of operations was 1. modules were bundled 2. test script ran. I added a log directly underneath the import statement in my component and then on the first line of my test script, and the log right after my import always reported undefined first.
Taking this, I backed up a step and looked at tests.webpack.js, which is in both files and preprocessors (webpack) in my karma config file. I added my variable declaration above the lines var context = require.context('./src', true, /-test\.jsx?$/); and context.keys().forEach(context); and it works fine now.
Why doesn't angularJS directly throw the specific error location(i.e., in which file there is an error or fault), rather than giving a link their website link which gives some generic explanation? It is making debugging a very difficult task!
Whenever there is an error, i can't debug the app easily because I have to go through the complete application and search every line, if it is valid line or not?
You can use console.log() in the module where you are debugging, might make it easier.
Because AngularJS is not being compiled so it can not know its exact location where actual error occurred.
For example Suppose you are defining a module Say 'XYZ' as follows
angular.module('XYZ', []);
Then you are using this as
var app = angular.module('XYZ');
But if you did mistake and do as follows
var app = angular.module('XYZ', []);
AngularJS will think you want to override your previous module. Then angular can not found dependency for the old component which were defined earlier on 'XYZ' module. So angular will tell those component are not defined.
One more point mostly those error happens on angular digest cycle which is not in our code.
Another Example
$scope.$watch('foo', function() {
$scope.foo = $scope.foo + 1;
});
The above code will be executed infinite time because foo is being watch if it is changed, and insde of watch it is again being changed.
But after 10 iteration angular will stop execution and show a link. Because angular does know it is a digest cycle repetition happening. But do not know which part of the code is responsible for that.
Note: Yes, I found angularJS debugging is really little hard, But If
we see the error carefully and try to find out what latest changes we
did last time, then we can found exact problem.
This is one of my first stack overflow questions, so I'll try to do my best in asking my question..
I'm following this tutorial exactly ( http://scotch.io/tutorials/javascript/easy-node-authentication-setup-and-local ) and after the third part ( "Application Setup server.js) when I try to run the server I get "TypeError: object is not a function" for the line:
require('./app/routes.js')(app, pspt); // load our routes and pass in our app
I found other people having similar problems that were caused by naming conflicts with local variables. I tried renaming passport to pspt but it seems like the error was found at the start of the second parenthesis, before my variables. Should I rename the 'app/routes' folder?
Thanks!
EDIT: Yeah, the tutorial made it seem like it should work right after the third part. I moved onto the fourth part and it worked fine. Thanks again.
Make sure your ./app/routes.js module returns a function. It should be something like:
module.exports = function(app, passport) {
//...
};
After I installed and referenced the JSNLog package into my MVC project, I'm experiencing an error when ever I click a link.
For example,
Link
usually produce
Link
but after I start using the JSNLog, it now produce
Link
which will direct to a link
http://localhost:51745/jsnlog.logger?action=Bar&controller=Foo
which shows
Exception Details: System.NullReferenceException: Object reference not
set to an instance of an object.
I believe JSNLog is trying to send back a exception or log event back to the server whenever it has a chance to access the server.
Am I missing something to make this functional?
This bug existed when the original post was created, but it has been fixed a few version ago now (I am the author of JSNLog).
This is actually caused by the Ignore route they inject in App_Start, moving it into your routes collection manually fixes the issue. It happens because you don't manually define routes for the rest of the controllers, so .net tries to resolve to the first one it finds defined.
In App_Start\JSNLogConfig.cs take out
RouteTable.Routes.Insert(0, new Route("jsnlog.logger/{*pathInfo}", new StopRoutingHandler()));
In RouteConfig.cs add
routes.IgnoreRoute("jsnlog.logger/{*pathInfo}");
And all your other routes should start working fine.