Angular 4 + ui-grid (transpile on browser) - angularjs

With Angularjs ui-grid used with Angular 4, I can't figure out how to avoid this:
System.js successfully bootstrapped app.
systemjs.config.js:117:9
Unhandled Promise rejection: [$injector:modulerr] Failed to instantiate module $$UpgradeModule due to: zone.js:661:17
[$injector:modulerr] Failed to instantiate module ng1Module due to:
[$injector:modulerr] Failed to instantiate module ui.grid due to:
[$injector:nomod] Module 'ui.grid' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.6/$injector/nomod?p0=ui.grid
[...]
See plunk: http://embed.plnkr.co/WxNwrbTXrdUHD5DU791U/
It seems that ui-grid is loaded before AngularJS. How to force the loading of ui-grid after the angularjs one?
Any idea?
UPDATE
I set up a working configuration with some tricks, mainly:
link for angularjs as first one in index.html
link to ui-grid just before the 'systemjs.config.js' one
keep a mapping for angularjs in 'systemjs.config.js':
'angular': 'npm:/angular' + version.a1,
See plunk: https://plnkr.co/edit/bEaNtHxTvlTQ0cLOdC51
But I'm quite unhappy with this last mapping of 'angularjs'. I can't figure out why it's required. Even when working with local copies of packages (i.e. with 'npm:': '../node_modules'), it's still needed, and still linked to a CDN file ...
It seems that all this occurs since version 0.20.x of SystemJS.
Did I miss something obvious? Any idea?

Related

Angular can't load module for prerender.js/phantom.js only for pproduction

Website runs without any problems in production (files minified and concatenated), but when a page is sent to prerender.js or phantom.js for snapshot generation, I get an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module
myApp to: Error: [$injector:modulerr] Failed to instantiate module
myApp due to: Error: [$injector:nomod] Module 'myApp' is not
available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as
the second argument.
https://www.mydomain.io/app/vendor.7240ef6a.js:4
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in d
https://www.mydomain.io/app/vendor.7240ef6a.js:4 in m
https://www.mydomain.io/app/vendor.7240ef6a.js:4 in db
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in g
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in ea
https://www.mydomain.io/app/vendor.7240ef6a.js:3 in da
https://www.mydomain.io/app/vendor.7240ef6a.js:8
https://www.mydomain.io/app/vendor.7240ef6a.js:2 in j
https://www.mydomain.io/app/vendor.7240ef6a.js:2 in fireWith
https://www.mydomain.io/app/vendor.7240ef6a.js:2 in ready
https://www.mydomain.io/app/vendor.7240ef6a.js:1 in g
I have to files: vendor.js and app.js. I have exactly the same structure on my another project (just the files are different) and it works well with the same prerender.js server.
I managed to track the problem down to jquery.js. But I get stuck at that point. Seems like prerender/phanatom.js load files in different way. A also used window.prerenderReady = true/false to no avail.
I am using generator-angular-fullstack with Angular v1.5.8 and jQuery v2.2.4
In index.html jquery is included before angular. I wonder if there are any ways to get more detailed information on what causes the problem.
I've seen this happen before if your files are being loaded in the <body>. Loading scripts in the <body> makes them load asynchronously where it's possible that the scripts load in the incorrect order. Most newer browsers handle that nicely but PhantomJS (v2.1.1) will execute the script as soon as it's loaded, no matter the ordering.
I'd suggest trying to load those scripts in the <head>.

'Module ... is not available!' error, when trying to accomplish Angular example on jsFiddle

I'm trying to make an MCVE for my question, but can't get my code working on jsFiddle and get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module carouselApp due to:
Error: [$injector:nomod] Module 'carouselApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Link to my example: https://jsfiddle.net/anatoly314/n0qfj4dk/
What am I doing wrong?
UPDATE: This answer from another SO question helped me to solve the issue: https://stackoverflow.com/a/14733670/947111
I recommend you to select values like below to deploy angularjs application on jsFiddle.
And Don't forget to remove angular.js from External Resources.
EDIT:
If there is not the version you want to use, selecting No wrap - in <body> will solve the problem.

how to remove dependency error in angular + ionicframwork?

I am try to make simple login page using require js in ionic framwork .But I am getting this error .
Uncaught Error: [$injector:nomod] Module 'app.auth' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.13/$injector/nomod?p0=app.auth
could you please tell me how to remove this error .I am using ionic framwork which is combination of angular and HTML.
here is my code
http://plnkr.co/edit/QPXDMQWDhZumeF5HGvvw?p=preview
define(['ionic','auth/controller/authCtrl'],function(){
'use strict'
angular.module("app.auth",['ionic']);
})

Mocking angular modules to pass karma testing

I recently implemented flash messages into my controller which has led to all of my karma tests failing. I saw another post suggested making a fake module and injecting that in but it does not seem best practice.
Is there a simple way of mocking 'angular-flash' from my controller?
edit:
this is the start of the stack error:
Error: [$injector:modulerr] Failed to instantiate module ShopTill due to:
Error: [$injector:modulerr] Failed to instantiate module flash due to:
Error: [$injector:nomod] Module 'flash' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.0/$injector/nomod?p0=flash
at /Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:1955
at ensure (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:1877)
at module (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:2192)
at /Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:4338
at forEach (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:336)
at loadModules (/Users/edobrien/Documents/projects/Clothing-Retailer/bower_components/angular/angular.js:4364)
at /Users/edobrien/Documents/proj
but it works when I look on localhost, so it must be an issue with the test.... any help?

i got a error when when connecting websocket with angularjs

i am trying to run this
example
i got a error mesasge like this
Error: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.14/$injector/nomod?p0=MyApp
return new Error(message);
anyone suggest how can i implement event handling in angularjs with websockets.
You have to create a module to use it... so you have to have this piece of code
angular.module('MyApp', [/*dependencies or empty array*/])
somewhere in your script - somewhere means before any other angular.module('MyApp').whatever... code

Resources