I'm using Rails 4.0 with AngularJS 1.5 and the ng-annotate gem. I've noticed that when I put on the 'ng-strict-di' which forces you to annotate all your direct injections in AngularJS I find that Rails complains about modules which have "ngInject" in place.
eg; Here is my application controller for Angular
ApplicationController = (
$scope, $timeout,
hotkeys
ShortcutService) ->
"ngInject"
<SNIP>
I have ng-strict-di enabled in my template
<html ng-app='paisApp' ng-strict-di>
When I run my application in dev mode I get an error in the console;
Error: [$injector:strictdi] ApplicationController is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.5.11/$injector/strictdi?p0=ApplicationController
minErr/<#http://localhost:3000/assets/angular/angular.self.js?body=1:69:12
annotate#http://localhost:3000/assets/angular/angular.self.js?body=1:4006:17
injectionArgs#http://localhost:3000/assets/angular/angular.self.js?body=1:4733:21
instantiate#http://localhost:3000/assets/angular/angular.self.js?body=1:4784:18
$controller#http://localhost:3000/assets/angular/angular.self.js?body=1:10608:18
controllerDecorator/<#http://localhost:3000/assets/app/bower_components/angular-material-data-table/dist/md-data-table.self.js?body=1:321:12
compile/<#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:9781:46
bind/<#http://localhost:3000/assets/angular/angular.self.js?body=1:1260:15
invokeLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:10153:9
nodeLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:9552:11
compositeLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:8811:13
publicLinkFn#http://localhost:3000/assets/angular/angular.self.js?body=1:8691:30
lazyCompilation#http://localhost:3000/assets/angular/angular.self.js?body=1:9048:16
updateView#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:9719:38
configUpdatedCallback#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:9663:25
configureUIView#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:5640:17
ViewService.prototype.sync#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:5645:9
activateViews#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:6273:5
invokeCallback#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1580:20
TransitionHook.prototype.invokeHook#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1592:26
TransitionHook.runAllHooks/<#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1719:48
TransitionHook.runAllHooks#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:1719:9
transitionSuccess#http://localhost:3000/assets/angular-ui-router/angular-ui-router.self.js?body=1:3432:13
processQueue#http://localhost:3000/assets/angular/angular.self.js?body=1:16697:28
scheduleProcessQueue/<#http://localhost:3000/assets/angular/angular.self.js?body=1:16713:27
$eval#http://localhost:3000/assets/angular/angular.self.js?body=1:17995:16
$digest#http://localhost:3000/assets/angular/angular.self.js?body=1:17809:15
$apply#http://localhost:3000/assets/angular/angular.self.js?body=1:18103:13
done#http://localhost:3000/assets/angular/angular.self.js?body=1:12083:36
completeRequest#http://localhost:3000/assets/angular/angular.self.js?body=1:12292:7
requestLoaded#http://localhost:3000/assets/angular/angular.self.js?body=1:12220:9
<div id="wrapper" ui-view="" class="ng-scope" data-ng-animate="1">
angular.self.js:14200:18
If I manually annotate this then the error goes away, for that file. I have a lot of angularJS files so I don't want to do this for each one.
Update
I'm running my server with NG_FORCE=true like so;
NG_FORCE=true RAILS_ENV=development bundle exec rails s
Related
cable_ready 4.5.0
rails 6.1.4.1
ruby 3.0.2p107
This is a simple example from the basic tutorial (https://www.youtube.com/watch?v=F5hA79vKE_E) I suspect the error I am getting is because either cable_ready or rails evolved a little and created a tiny incompatibility.
I get this error in the JS console:
It is triggered when in my controller I ask cable ready to:
cable_ready["timeline"].console_log(message: "***** cable ready post created")
Which leads to my timeline_channel to:
received(data) {
console.log("******** Received data:", data.operations)
if (data.cableReady) CableReady.perform(data.operations)
}
My interpretation is perform causes this line in cable_ready.js line 13:
operations.forEach(function (operation) {
if (!!operation.batch) batches[operation.batch] = batches[operation.batch] ? ++batches[operation.batch] : 1;
});
Is finding something in the received data that it doesn't like.
That's where my trail ends. Can someone see what I am doing wrong, or tell me what other code you'd like me to include?
Solution: downgrade the version of the cable_ready javascript library.
I previously (maybe a year ago) did this tutorial using CableReady 4.5, Ruby 2.6.5 and Rails 6.0.4 and it worked like a charm back then as well as today.
But today, I tried this tutorial again on a duplicate project--same versions of CR, Ruby, and Rails and now I get java console errors similar to yours.
TypeError: undefined is not a function (near '...operations.forEach...')
perform -- cable_ready.js:13
received -- progress_bar_channel.js:8
I looked at the output of yarn list and saw that cable_ready was version 5.0.0-pre8 on the bad project and it was 5.0.0-pre1 on the good project. The downgrade could be accomplished with yarn add cable_ready#^5.0.0-pre1 in the bad project folder and now both projects work.
FYI for other newbies like me trying to understand how CableReady works: This tutorial gives another example of CableReady, and was also fixed the same way.
I'm having some trouble with getting Summernote to work correctly on my production Rails environment (on Heroku). I'm using rails 4.2.0, bootstrap 4.1.3, and summernote-rails 0.8.10.0.
Everything works fine locally but is broken on production.
There are no errors when the editor loads but as soon as you click in to any of the text fields there are the following errors:
First-
Uncaught TypeError: Cannot read property 'hide' of undefined
at e.hide (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.update (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at e.update (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at HTMLTextAreaElement.summernote.mousedown (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at HTMLTextAreaElement.dispatch (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.m.handle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:32)
at Object.trigger (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.<anonymous> (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at Function.each (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:22)
Second-
Uncaught TypeError: t.slice is not a function
at i (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:139)
at e.current (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:139)
at e.currentStyle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at e.updateCurrentStyle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at HTMLTextAreaElement.<anonymous> (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at HTMLTextAreaElement.dispatch (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.m.handle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:32)
at Object.trigger (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
Both these js errors seem to be coming from Bootstrap.
Also, I guess it does "work" on production but it the extra input fields and just looks broken. Like so-
Anyone got any ideas? Thanks!
I upgraded to Rails 5 and that fixed the minification problem.
when i tried to use if helper in glimmer application.It gives me an error like Uncaught Error: Compile Error: if is not a helper
EDIT: Starting with v0.8.0 there is an inline if.
The version of Glimmerjs you are using does not have an inline if helper, you can either implement it yourself or upgrade your Glimmerjs project to v0.8.0.
To create the helper, run ember g glimmer-helper if, and then edit the file with the following:
// src/ui/components/if/helper.ts
export default function helper([cond, truthy, falsy]) {
return cond ? truthy : falsy;
}
To update, I suggest using ember-cli-update. On top of upgrading your dependencies, you will also have to update your components to the new <Capital> syntax.
I am using Rail 4 with latest AngularJS framework, I found when I use uglifier with mangle=false, everything is fine. But if I use uglifier with mangle=true, then I received the error like
Failed to instantiate module *** due to:
Error: [$injector:unpr] Unknown provider: e
You have to use 'Dependency Annotation' because all your services/controllers/directives are renamed and thus no longer working.
See https://docs.angularjs.org/guide/di
There are different ways to get around this. E.g. you could use the $inject property like this:
var MyController = function($scope, greeter) {
// ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);
There is also a nice node plugin https://github.com/olov/ng-annotate that you can use in your build pipeline to automate the whole annotation stuff...
I have been developing a large AngularJS application inside of a .NET MVC Website. I've gone way to long without testing if it will sucesfully minifiy using the Bundle Optimiazation Features?
BundleTable.EnableOptimizations = True
And of Course, it fails. I've been playing with the Order I bundle my scripts, and ensuring I am using String Literals for my Controller Names (I wasn't, and that is a lot of re-factoring that I will have to do).
But I can not get my Core Scripts to Minifiy without the angular "Unknown Provider" error.
Here is the exact Error:
Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=ppAccount&p1=Error…redScripts%3Fv%3DknV3wkCOg32ajaw4GwiRSrTXdo8Ue7MRIn65CPYa1b81%3A1%3A379851)]1
Here is my bundle config that is failing:
bundles.Add(new ScriptBundle("~/bundles/PilotPartnerRequiredScripts")
.Include(
"~/UI/js/jquery/jquery-2.1.3.js",
"~/UI/js/plugins/jquery-ui/jquery-ui.js",
"~/UI/js/bootstrap/bootstrap.js",
"~/UI/js/plugins/pace/pace.min.js",
"~/UI/js/plugins/slimscroll/jquery.slimscroll.js",
"~/UI/js/inspinia.js",
"~/UI/js/angular/angular.js",
"~/UI/js/ui-router/angular-ui-router.js",
"~/UI/js/bootstrap/ui-bootstrap-tpls-0.12.1.js",
"~/UI/js/angular/angular-resource.js",
"~/UI/js/angular/angular-sanitize.js",
"~/UI/js/angular/angular-route.js",
"~/UI/js/plugins/switchery/switchery.js",
"~/UI/js/plugins/angular-ui-switch/angular-ui-switch.js",
"~/UI/js/plugins/angularLocalStorage/angular-local-storage.js",
"~/UI/js/plugins/ngDialog/ngDialog.js",
"~/Scripts/ngTags/ng-tags-input.js",
"~/Scripts/uiSortable/sortable.js",
"~/Scripts/kendo/2014.3.1119/kendo.all.min.js",
"~/Scripts/xeditable/xeditable.js"
For the life of me, I can't figure out which dependency isn't being resolved. I feel that if I can narrow it down to a specific dependency I know I can solve the issue.
Is there any way to track down the specific Module that is causing the issue?
Any suggestions on how to make this work?
Thank you for your help.
You should always follow strict di while injecting dependency (Array notation)
Angualar Doc has mentioned that, Do follow strict DI while doing minification, otherwise it could break you app
Eg.(Code)
angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
// ...
}])
.directive('directiveName', ['depService', function(depService) {
// ...
}])
.filter('filterName', ['depService', function(depService) {
// ...
}]);
In above snippet I followed inline array notation of DI, it has been applied on various angular component just to demonstrate it. You should make sure that you follow it wherever you're injecting dependency.