Trying to get up and running with webpack for angularjs. Trying to setup different angular modules for each folder within /webpack & then inject them into my main app module definition. What am I doing wrong?
Running into this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module webpack due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"photocropper"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
entrypoint:
var angular = require('angular');
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')
])
./webpack/photocrop/client/index.js
var angular = require('angular');
module.exports = angular.module('photocropper', [])
Remember that you need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client') //this is an object
])
You can simply require the file and just inject by name like this:
var firstModule = require('./webpack/photocrop/client')
ngModule = angular.module('webpack', [
'firstModule' // this should work
])
firstModule(ngModule)
I had the same problem and in my case it got solved by changing the assigment in:
var angular = require('angular');
To simply:
require('angular');
The reason is that this assigment is creating a new "angular" variable which is different than the one provided by Angular itself, hence, it doesn't have the 'module' property
Related
I'm attempting to inject a factory called recipesApp.recipeData into my MainController, as soon as I added it, the app broke and I have been receiving the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module recipesApp due to:
Error: [$injector:modulerr] Failed to instantiate module recipesApp.recipeData due to:
Error: [$injector:nomod] Module 'recipesApp.recipeData' 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.
My main app module is written as follows:
var app = angular.module('recipesApp', ['ngRoute', 'recipesApp.recipeData']);
My controller:
app.controller('MainController', ['$scope', '$http', '$location', '$rootScope', 'recipeData',
function($scope,$http,$location,$rootScope,recipeData) {...}]);
My recipe factory:
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
I have tried changing the file structure, the file naming convention. I have tried simply linking it onto the controller itself in the same file, I've changed the order in which it is being injected, and I've triple checked the spelling. Any suggestions would be very helpful!
You're trying to add $http as a module dependency, $http is a service, not a module. Remove it from your recipesApp.recipeData module dependencies
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
Also make sure all the .js files are present in your index.html
I wanted to rewrite my existing code, but I failed as I run into this error:
ionic.bundle.js:8900 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.routes due to:
Error: [$injector:unpr] Unknown provider:
My working snippet:
angular.module('app.routes', [])
.config(function() {});
My rewritten snippet (this one fails):
(function () {
// use strict mode to write clean code!
'use strict';
// This configures the routes
var RouteProvider = function () {
};
// init the config
angular.module('app.routes', [])
.config(['', RouteProvider]);
}());
I have created a Plunker for this: Plunker
Thanks for your help ;)
You have an empty string into your .config call - this is effectively telling Angular you want to inject a service with a blank string as the name into your config function. This doesn't exist, so you get an unknown provider error - a pretty unclear one at that, because it tries to show you the name of the service, but it's blank, so you just end up with Error: [$injector:unpr] Unknown provider: and nothing else!
Your .config call should look more like this:
// init the config
angular.module('app.routes', [])
.config(RouteProvider);
You don't need the array syntax if you're not actually injecting anything into the function.
in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' 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 confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.
I am using typescript, and I have the following value:
export var app:ng.IModule = app || angular.module('app.common.values.authToken', []);
app.value('authToken', {authToken: ''});
Then, I have something similar to this code for registering my app:
export var app:ng.IModule = angular.module('app', [
'ionic',
'templates',
'app.common.values.authToken',
'app.common.services.user'
]);
It seems to me that I have registered my value in the first code block, and I have included it as a dependency for my app in the second.
Now, I want to access this value {authToken: ''} in my service. I would like to use the injector, but it keeps returning an unknown provider error:
var injector = angular.injector(['ng']).get('$injector');
injector.get('authToken')
Error: [$injector:unpr] Unknown provider: authTokenProvider <- authToken
How should I reference the provider, or am I going about this in the wrong way?
You need to make sure to inject the module that the constant is into the injector.
Do something along the lines of this.
var injector = angular.injector(['ng','your.module.that.contains.constant']).get('$injector');
I created the modules and booted the app the document, I got the below errors. I can't figure out what is the problem with my module. Maybe I use the wrong way for module creation in angular.
Output
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.directives due to:
Error: [$injector:modulerr] Failed to instantiate module app.factories due to:
Error: [$in...<omitted>...1)
Modules
var app = angular.module('app', [
'app.templates',
'app.directives',
'app.services',
'app.factories',
]);
angular.module('app.templates', []);
angular.module('app.services', []);
angular.module('app.directives', [
'app.templates',
'app.factories'
]);
angular.module('app.factories', [
'toaster',
'ngStorage',
'app.services'
]);
angular.module('app.factories')
.factory('NotificationSvc',function($rootScope, AUTH_EVENTS, toaster){
...
});
$(function () {
angular.bootstrap(document ,['app']);
});