Angular fails to load one of my modules - javascript

I have the following angular module in a file:
angular.module('swagger', [])
.factory('swaggerApi', function () {
return new Swagger({
url: 'http://localhost:8081/api-docs',
usePromise: true
});
});
Afterward in another file I try to use this module as follows, where 'swagger' is the module name:
angular.module('GlobalFactoryMethodes', ['swagger'])
in my html file I load the 'swagger' module first and my 'GlobalFactoryMethodes' second. However I get the following error message:
Error: [$injector:modulerr] Failed to instantiate module swagger due to:
Error: [$injector:nomod] Module 'swagger' 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.
I am new to angular and thought this is how modules suppose to work, am I doing something wrong?

try this:
angular.module('swagger', []);
angular.module('swagger')
.factory('swaggerApi', function () {
return new Swagger({
url: 'http://localhost:8081/api-docs',
usePromise: true
});
});
And now add your new module:
angular.module('GlobalFactoryMethodes', ['swagger'])

It's good practice to declare all module dependencies in one file, that loaded first:
index.js:
angular.module('swagger', []);
angular.module('GlobalFactoryMethodes', ['swagger']);
And then just extend each with providers:
swagger.js:
angular.module('swagger')
.factory('swaggerApi', swaggerApi);

Related

Loading bundled AMD modules with SystemJS

I have a couple of AMD modules compiled using TypeScript's --outFile option into a single file:
define("partA", ["require", "exports"], function (require, exports) {
"use strict";
function partAFunc() {
console.log('partAFunc');
return 'partAFunc';
}
exports.partAFunc = partAFunc;
});
define("partB", ["require", "exports"], function (require, exports) {
"use strict";
exports.partB = 42;
});
define("partC", ["require", "exports"], function (require, exports) {
...
});
Now I want to load only the partA module and call its partAfunc() so I can do the following in Node.js:
SystemJS.config({
map: {
'main': 'my-bundle.js',
},
});
SystemJS.import('main').then((m) => {
SystemJS.import('partA').then((m) => {
m.partAFunc();
});
});
The first import SystemJS.import('main') just registers all the modules and then SystemJS.import('partA') works because module partA is already registered (or at least I guess that's what it does).
However, why I can't just use SystemJS.import('partA') and set the bundle as a dependency:
SystemJS.config({
meta: {
'partA': {
deps: [ 'my-bundle.js' ],
}
}
});
SystemJS.import('partA').then((m) => {
m.partAFunc();
});
The meta is completely ignored. The doc at https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#meta says:
Dependencies to load before this module. Goes through regular paths and map normalization. Only supported for the cjs, amd and global formats.
It looks like SystemJS first checks whether the file partA exists (which obviously doesn't) and throws an error (I tested it with an existing file and the meta config worked):
(node:60981) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/Users/.../partA'
Instantiating /Users/.../partA
Loading partA
I'd expect that also the following should work when the first variant works with two nested SystemJS.import calls.
SystemJS.config({
map: {
'partA': 'my-bundle.js',
},
});
SystemJS.import('partA').then((m) => {
// m.partAFunc();
console.log(m)
});
This prints an empty object. It looks like when there're more than one module in a single file it just registers them and doesn't load any of them?
I read all the documents in https://github.com/systemjs/systemjs/tree/master/docs but I think I'm still lost.
What you need to do is use the bundles setting and set your bundle like this:
bundles: {
'my-bundle.js': ['partA', 'partB', 'partC'],
},
Roughly, this tells SystemJS "when you look for module partA, fetch and execute the module named my-bundle.js and you'll find partA there."
Your approach using meta cannot work. Your meta setting does not say "don't try to fetch a module named partA and instead fetch my-bundle.js" it says "when you process partA, in addition to the dependencies it already has, add my-bundle.js to the list of dependencies." SystemJS will still fetch partA. There's no reason for it to wait until it has executed my-bundle.js before it tries to fetch it, so it launches the fetch immediately and it fails.

How to inject ngRoute into Jasmine / Karma AngularJS unit test?

I'm trying to get a basic unit test example working. It all works fine with this app.js
var whapp = angular.module('whapp', [])
.filter('reverse',[function(){
return function(string){
return string.split('').reverse().join('');
}
}]);
and this spec.js
describe('Filters', function(){ //describe your object type
beforeEach(module('whapp')); //load module
describe('reverse',function(){ //describe your app name
var reverse, rootScope;
beforeEach(inject(function($filter){ //initialize your filter
reverse = $filter('reverse',{});
}));
it('Should reverse a string', function(){ //write tests
expect(reverse('rahil')).toBe('lihar'); //pass
});
});
});
with this karma files config
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-mocks/angular-route/angular-route.js',
'node_modules/angular-mocks/angular-ui-router/release/angular-ui-router.js',
'app/js/*.js',
'tests/*.js'
]
The problem occurs when I try to inject ngRoute into my module in app.js like so
var whapp = angular.module('whapp', ['ngRoute'])
.filter('reverse',[function(){
return function(string){
return string.split('').reverse().join('');
}
}]);
In which case I get the following error in karma [UPDATE: this error occurs even if I don't load the angular-mock.js library into karma as shown above]
TypeError: undefined is not a constructor (evaluating 'reverse('rahil')') in tests/spec.js (line 9)
So... how do I inject ngRoute into spec.js correctly? I've tried a variety of things, none of which worked.
Apparently, you get this error because PhantomJS fails to instantiate your main Angular module whapp. One possible reason is, that the file node_modules/angular-mocks/angular-route/angular-route.js is missing.
Obviously, you are using npm to manage your dependencies. So try to replace your current file with:
node_modules/angular-route/angular-route.js
The same for the ui-route module:
node_modules/angular-ui-router/release/angular-ui-router.js
I hope this will help you.

Angular + Karma/Jasmine: Error: [$injector:nomod] Module 'md.data.table' is not available

I am using Karma and Jasmine to test my Angular application.
I have this spec below:
"use strict";
describe("SuperHeroService", function () {
var SuperHeroService, $httpBackend;
beforeEach(module('beAwesome'));
beforeEach(module("beASuperHero"));
beforeEach(function () {
inject(function (_SuperHeroService_, _$httpBackend_) {
SuperHeroService = _SuperHeroService_;
$httpBackend = _$httpBackend_;
});
});
it("should initialize correctly", function () {
expect(SuperHeroService).toBeDefined();
});
The md.data.table dependency is included in the beAwesome module, which I'm including in my beforeEach block. beAwesome module is called in beASuperHero as well.
I've also referenced the SuperHeroService, beAwesome and beASuperHero in my karma.conf file.
However, I cannot figure out why the md-data-table (Github project: https://github.com/iamisti/md-data-table) won't be instantiated and keeps breaking, no matter what I do:
Error: [$injector:modulerr] Failed to instantiate module beASuperHero due to:
Error: [$injector:modulerr] Failed to instantiate module md.data.table due to:
Error: [$injector:nomod] Module 'md.data.table' 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.
I'm sure I'm just missing some configuration or a line of code but after hours of searching, I haven't found anything that's been helpful! Any hints to get unstuck is much appreciated.
Thanks

cannot load module in angular js

I have simple problem with angularjs
Services.js
'use strict'
var restData = angular.module('ccapp.services', ['ngResource']);
restData.factory('Testcust', function ($resorce) {
return $resorce('http://localhost:8080/CallCenterRest/webresources/testcust',{},{
query:{method:'GET', isArray:true}
});
});
app.js
var app = angular.module('ccapp', [
'ngRoute',
'ccapp.services']);
app.config(function ($routeProvider) {
$routeProvider
.when('/viat',
{
controller: 'viatctrl',
templateUrl: 'pages/viat.html'
})
.otherwise({ redirectTo: 'index.html' });
});
problem is
Uncaught Error: [$injector:modulerr] Failed to instantiate module
ccapp due to: Error: [$injector:modulerr] Failed to instantiate module
ccapp.services due to: Error: [$injector:nomod] Module
'ccapp.services' 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.
somebody can help :)
Check the index.html file to ensure that Services.jsis included by a script tag like so <script src="whatever-your-path-is/Services.js"></script>.
If your project was set up such that a grunt or gulp task compiles all javascript files into one file (e.g., my-app.js) to be included in index.html by a script tag, then you need to make sure that this Service.js file is on the path to be processed by the grunt or gulp task.

'Error: Unexpected request' during Karma Angular Unit Test

When running grunt karma, a test on one of the directive fails when it tries to fetch the template. I am using ng-html2js as a preprocessor. Here is some of my karma.conf.js
plugins: ['karma-chrome-launcher',
'karma-jasmine',
'ng-html2js',
'karma-ng-html2js-preprocessor'],
preprocessors: {
'app/scripts/directives/**/*.html': 'ng-html2js'
},
ngHtml2JsPreprocessor: {
moduleName: 'templates'
}
In my test, I have the following:
'use strict';
describe('Directive: myDirective', function () {
// load the directive's module
beforeEach(module('myApp'));
beforeEach(module('templates'));
var element,
scope;
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new();
}));
it('should not show search area initially', inject(function ($compile) {
element = angular.element('<navbar></navbar>');
element = $compile(element)(scope);
scope.$digest();
expect(element.find('.myClass').hasClass('myClass')).toBe(true);
}));
});
When I run the test, I get
Error: Unexpected request: GET /scripts/directives/myDirective/myDirective.html
It seems like the preprocessor is not properly injecting the javascript version of the template.
I have also tried using the path of the template in the beforeEach(module('')); but that causes an error that reads:
Error: [$injector:modulerr] Failed to instantiate module...
How can I fix this?
I had kind of the same problem. Be sure you have the exact file match. Open the Google chrome console and check the file path is exactly the same.
In the upper exemple, I had to add a "/" string in ngHtml2JsPreprocessor.stripPrefix and it worked.
So I guess with Yeoman, you should use
ngHtml2JsPreprocessor: {
moduleName: 'templates',
stripPrefix: 'app/' //add a slash
}
Since I was using the Yeoman tool to scaffold my project, I needed to add a stripPrefix to the ngHtml2JsPreprocessor option in my karma.conf.js file:
ngHtml2JsPreprocessor: {
moduleName: 'templates',
stripPrefix: 'app'
}

Categories