why is it always so hard to hook things up to AngularJS?!?!?!
here's the error I get for anything new I try to install to Angularjs:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.8/$injector/unpr?p0=%24%24asyncCallbackProvider%20%3C-%20%24%24asyncCallback%20%3C-%20%24animate%20%3C-%20%24compile
Everything works fine when I don't include ngAnimate in:
WriterSarah = angular.module("WriterSarah", ["restangular", "ui.router", "ngAnimate" ])
I put my angular-animate.min.js file in the SAME place that I do all my other Angularjs files, and I required it in my Application.js file in the SAME way that I did for restangular and ui.router
I restarted my server a bunch of times as well. what am I missing here?
The problem is likely that the Angular version does not match to the angular-animate version. Check to see if the angular versions are the same between both files.
Related
I'm trying to setup a new Rails project with webpacker and Angular. The basic setup is working, but I'm not able to include custom SCSS files. I followed the steps in the blog post Angular with Rails and Webpacker, but I wasn't able to get it up and running. I end up with the error
ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./node_modules/to-string-loader/src/to-string.js!./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./app/javascript/hello_angular/app/app.component.scss
Module build failed:
h1 {
^
Invalid CSS after "": expected 1 selector or at-rule, was "var result = requir"
in /Users/florianfeldhaus/IdeaProjects/rails-test/app/javascript/hello_angular/app/app.component.scss (line 1, column 1)
I documented all steps I carried out (I tried first without and then with the hack described in the blog post), but couldn't get it to work. I shared a minimal project (e.g. without the HTML template) on GitHub.
What do I need to do to include SCSS files for an Angular 5 App served with Rails 5 with Webpacker?
Is there any full, up to date tutorial or documentation available for this setup?
I finally found the answer to this myself. I believe the problem is that the sass-loader is already being included somewhere by default. When you go to add it to your loaders in environment.js, it's actually trying load sass-loader twice and causing a cryptic error. So the solution is to use the following code to overwrite the existing entry and then also include css-loader and to-string-loader in order to include it in your Angular component.
environment.loaders.insert('sass', {
test: /\.scss$/,
use: [
"to-string-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
});
What's the easiest way to use polymer-dart with ruby on rails or on other frame works currently?
Using vulcanize and polymer-rails gem and some hack, I'm trying to take care of html imports.
But I'm having hard time resolving file urls.
GET http://localhost:3000/assets/paper_ripple_behavior.dart
What is happening seems some polymer scripts trying to fetch dart scripts using url relative to the location of self or expecting the dart server. Since it's vulcanized, and processed, and on RoR, it never finds what it wants(Maybe I should just clone the packages and rewrite all the links, easier).
Or if there are no duplicate names, I could make all files available at localhost:3000/assets/
Some funcitons also seems to be doing something like the below:
Exception: Uncaught Error: Unable to find library at http://localhost:3000/assets/shadow.dart.
Stack Trace:
#0 InitializationCrawler.InitializationCrawler (package:initialize/src/mirror_loader.dart:43:31)
#1 loadInitializers (package:initialize/src/mirror_loader.dart:16:14)
#2 run (package:initialize/initialize.dart:27:24)
#3 run.<run_async_body> (package:web_components/src/mirror_initializer.dart:26:11)
#4 Future.Future.microtask.<anonymous closure> (dart:async/future.dart:144)
#5 _microtaskLoop (dart:async/schedule_microtask.dart:43)
#6 _microtaskLoopEntry (dart:async/schedule_microtask.dart:52)
#7 _ScheduleImmediateHelper._handleMutation (dart:html:42567)
undefined:1 undefined
At this point, I'm considering to run RoR and dart on different ports and redirecting some request to dart Server, though I don't know if it's practical.
How would you let dart play with RoR?
Edit
After few days of tinkering, I came to a conclusion that Günter Zöchbauer is probably right for the time being.
While
rewriting embedded html import hrefs in the html files found under the packages directory
tinkering with html import urls (element.href found in initialize method in the file "web_components-0.12.0+4/lib/html_import_annotation.dart" was taking care of this)
seem to solve some of the html import url issues, embedded scripts are still attempting to load dart file directly under assets: "http://localhost:3000/assets/paper_button.dart ".
"initPolymer()" also attempts to load dependency files in a similar fashion, at least in "/components/packages/initialize/src/mirror_loader.dart".
These are discordant behavior with the other dart libraries, so hopefully will change in the future versions.
As things stand now, understanding and finding loader scripts is too much for me, although I believe more skilled programmers would find it a breeze.
For deployment you need to run pub build in the Dart package and serve the result (build/web) from your server. You can't serve Dart source.
If you use https://pub.dartlang.org/packages/dart_to_js_script_rewriter there shouldn't be any *.dart files be fetched.
For development use a server that redirects requests for Dart resources to pub serve.
Yay, I've found a way.
Purpose
Use dart-polymer tags and run an application written in dart on rails server.
Method
Through making necessary resources available at RailsAppRoot/pub and editing views/layout/application.html.erb
How to do
Create a simple application on webstorm or intellij that make use of polymer tags you would like to use in your rails application.
Modify the links in your app to fetch resources relative to the url root.
Copy the contents of the web folder, dart_app_project_name/build/web, into
rails_app_root/pub
You might also need to copy the lib folder
Copy the header and the scripts found in your entry point html file of your dart app into "application.html.erb" or use render partial.
Use the polymer tags anywhere.
For the step 2 you can use something like this:
require 'pry'
require 'pry-doc'
require 'pry-byebug'
require 'nokogiri'
def prepend_slash file
doc = Nokogiri::HTML(File.open(file).read())
doc.search("link[rel='import']").each do |node|
href = node['href']
next if href.nil?
node['href'] ="/"+ href if href[0] != "/"
end
doc.search("script").each do |n|
src = n['src']
next if src.nil?
n['src'] = "/"+src if src[0] != "/"
end
File.open(file,'w').write doc.to_html
end
target = 'path_to_your_app/app/views/layouts/_polymer_body.html.erb'
prepend_slash(target)
p "processed"
Your app and rails server can communicate using json or simply by embedding data in html document, so in theory dart-polymer and rails now can have fun together.
If Turbolinks is giving you troubles, try something like:
import 'dart:html';
import 'dart:js' as js;
void onReady(var callback){
var d = js.context.callMethod(r'$',[document]);
d.callMethod('on',['page:change']);
}
I have renamed app.js to app.coffee (as well as translated the contents), but now when I compile I get this error:
Running "validate-imports:tests" (validate-imports) task
>> client/tests/helpers/start-app: Cannot find module "client/app"
This error goes away when I translate the file back to javascript.
I have added the grunt-contrib-coffee and confirmed it works correctly, the problem I believe is that the coffee-script compilation happens after the validate-imports task which looks for .js files in the app folder. Does this need to be tweaked to look in the tmp/javascripts folder where the coffee-script gets compiled to?
Here is the task in question:
// Scripts
grunt.registerTask('buildScripts', filterAvailable([
'jshint:app',
'jshint:tests',
'validate-imports:app',
'validate-imports:tests',
'coffee',
'emberscript',
'copy:javascriptToTmp',
'transpile',
'concat_sourcemap'
]));
Anyone know of this bug?
I found an answer here. Thus, when I tried it, I renamed start-app.js to start-app.coffee, converted the code into coffescript and now it works without that error.
Bryan
One approach to this would be to add this line to your testem.json file:
"before_tests": "coffee -c tests/**/*.coffee"
This should compile the .coffee files within your /tests directory before test execution, meaning they will compile down to their .js equivalent before they are run. While you could technically change the EAK boilerplate from .js to .coffee with a similar trick, it might be better just to write your tests in .coffee, while leaving the default .js testing harness to maintain compatibility with EAK.
You can also remove these files when the test run is over, as shown within the tapas-with-ember testem.json file.
I want to make use of the new json fixtures ability of jasmine-jquery, but can't get it to work. I have a Rails 3.2 app with evergreen for JS testing. As the readme of https://github.com/velesin/jasmine-jquery said, putting the jasmine-jquery.js inside the spec/javascripts/helpers dir would load jasmine-jquery automatically.
I put jasmine-jquery (and other libraries like jasmine-ajax) into
spec/javascripts/helpers dir (so they are automatically loaded) and
fixtures into spec/javascripts/fixtures dir.
But it doesn't. I tried to load the file inside the spec_helper.js, but the require only points to the public dir.
I also found this answer: https://groups.google.com/forum/?fromgroups=#!topic/ruby-evergreen/0Tma5RKqZB8
But the solutions aren't working in my case.
So, where can I tell evergreen / jasmine to load the jasmine-jquery.js file, so that I can use the loadFixtures methods...?
I'm trying to use https://github.com/linjunpop/jquery-tablesorter-rails to sort my tables. I'm running into issues when trying to include the CSS:
/*
* = require jquery-tablesorter/blue
*/
Error message:
Sprockets::FileNotFound: couldn't find file 'jquery-tablesorter/blue'
I do see the Gem being loaded in the config path:
1.9.3p194 :008 > Rails.application.config.assets.paths.each { |x| puts x }
.rvm/gems/ruby-1.9.3-p194/gems/jquery-tablesorter-1.0.5/vendor/assets/images
.rvm/gems/ruby-1.9.3-p194/gems/jquery-tablesorter-1.0.5/vendor/assets/javascripts
.rvm/gems/ruby-1.9.3-p194/gems/jquery-tablesorter-1.0.5/vendor/assets/stylesheets
Any idea what the issue could be?
Can't reproduce. Usually when this kind of things happen to me is because of forgetting to restart the dev server after bundling a new gem. Sprockets tries to build or resolve a new set of assets, but the loaded environment is the same as before, so the additional asset can't be found.
The corret path is:
*= require jquery-tablesorter/theme.blue
I've updated Tablesorter to use themes in version 2.4+, so the blue theme file has been renamed and moved to a different directory.
I don't know much about Ruby, or that repo but you might want to get Tablesorter v2.3.11 until that repo has been updated (see this issue in that repo).
I'm seeing the path you're requiring as a directory; the error message seems to indicate that it's failing to find a file. Have you tried
*= require jquery-tablesorter/blue/*
instead?