AngularJS loaded twice with Rails asset pipeline - angularjs

I have set up rails to use bower according to the following guide: http://joelencioni.com/blog/2014/01/03/integrating-bower-with-rails/
I have installed AngularJS and included it in my application.js file.
Now, when I run rake assets:precompile, I get the following error in the console:
WARNING: Tried to load angular more than once.
But my application continues to (seemingly) work fine. When I run rake assets:clobber, I no longer get the error.
I read through the many StackOverflow questions and answers relating to this error and still couldn't find a solution. ng-app is only declared once, there are no errors with my templates and how I include them, turbolinks is removed, etc.
What could cause this error when I compile my assets?
UPDATE: Some strange behaviour here... running the app in production with Passenger, the above error doesn't show up.

Related

error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro"

We are trying to upgrade our react project to latest packages including relay (7.0.0). Our application builds and works but we are getting this error message in the console (during build) on every file where we import graphql from 'babel-plugin-relay/macro'. We are doing exactly like documented here adding relay
The error is "There was an error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro. Please see the error thrown for more information." It is coming from \node_modules\babel-plugin-macros\dist\index.js in getConfig( ).
To understand how other projects were configured, I downloaded another sample relay project / installed it and it had the same problem. Interesting enough there was this recent post in that app's issues list error loading config
The solution noted worked for me (adding that noted .babel-plugin-macrosrc.yml file with empty relay plugin?) but I am not understanding why this is needed or what was causing this seemingly benign error message?

Angular 2, Webpack 2, async routes: Cannot find module

I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .

gulp files aren't refresh in browser

I have a problem with gulp file on my Backbone project. I'm working on a project with two other peoples. With them everything is working. I have a problem with browser cache - I think is with browser cache.
How it looks:
When I made changes gulp watch doesn't return any errors. Gulp copies all files from the src to dist folder. I've checked my files and they are saving correctly.
I turned off browser cache in the developer toolbar and it won't help. Sometimes I need to wait few minutes before I see my changes, and sometimes I need to refresh 20-30 times to see changes I've made.
Many time I see in console this error:
router.js:22 Uncaught SyntaxError: Unexpected end of input
When I debug this file I see that this file is incomplete but when open this file in browser directly - it is complete but still console shows an error
What else can I do, because I can't work like this?

When I try to include the chart.js and angular chartjs files, I get: ReferenceError: require is not defined

I am working on an angularjs site - angular is already included. We have code that loops through js scripts in a specific folder and adds them to a bundle, so the script references get emitted on the main page (we are using single page architecture).
I have not explicitly tried to invoke the code, it is currently just getting included, yet when I bring up my site, I now get the following js errors:
Uncaught ReferenceError: require is not defined
and it's happening here:
var gulp = require('gulp'),
I did not use bower to install - I just pulled the source and dropped the folders into the folder that gets parsed for emitting the js scripts.
Is there something else I need to install?
shershen, that is what I came to realize.
I removed all the misc files in the folder and just left the Chart.min.js and the angular-chart.min.js files and then I was good to go.

Angular - blank page, how to diagnose bootstrapping issues?

I have a working (in development) Angular app and I've just got my Grunt distribution script working how I want it to, however when run my app through Grunt and then run it from the distribution folder I just get a blank page, no errors, no logging in console, no missing files in the network tab in Chrome etc, it appears everything loads but nothing happens.
I've run into this issue before during development and thrashed around until it worked, however this is now much more complex due to the minified files in distribution etc.
I'd like to properly diagnose this blank page issue but I'm not sure where to start, it appears that Angular is simply not bootstrapping at all after processing to dist mode.
It appears there is no such thing as a very verbose diagnostic mode for Angular, I've switched to the uniminified and there is nothing reported at all.
I checked the minified html file and my ng-app tag is still there on the html element as it should be so that's not the issue.
Also if I drop to console I can type angular and get back the output for it, so it's there, just not doing anything.
Where to start?
Start with Chrome devtools open when you load the page.
Add $log.debug statements at the top of all your services and controllers.
app.js will not work without the
['paramname1', 'paramname2', function(paramname1, paramname2) {
version (all the other files minify fine with out it.)

Resources