GeezerVison is showing github.com — Modal unknown provider · Issue #2247 · angular-fullstack/generator-angular-fullstack
This repository was archived by the owner on Jul 29, 2026. It is now read-only.
This repository was archived by the owner on Jul 29, 2026. It is now read-only.
Modal unknown provider #2247Description
- I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.
| Item |
Version |
| generator-angular-fullstack |
4.0.4 |
| Node |
5.4.0 |
| npm |
3.10.7 |
| Operating System |
cloud9 |
| Item |
Answer |
| Transpiler |
Babel |
| Markup |
HTML |
| CSS |
SCSS |
| Router |
ui-router |
| Client Tests |
Mocha |
| DB |
MongoDB |
| Auth |
Y |
I cannot figure out why the Modal service injection is not working. I have added it as a dependency to the app.js and as well have added the dependency to the controller which I would like to use it from. Very desperate to get this working and appreciate anyone who can help me figure this out.
app.js
import _Auth from '../components/auth/auth.module';
import account from './account';
import admin from './admin';
import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import constants from './app.constants';
import util from '../components/util/util.module';
import socket from '../components/socket/socket.service';
import modal from '../components/modal/modal.service';
import './app.scss';
angular.module('camdenfirstApp', [ngCookies, ngResource, ngSanitize, 'btford.socket-io', uiRouter,
uiBootstrap, modal, _Auth, account, admin, navbar, footer, main, constants, socket, util, 'leaflet-directive'
])
.config(routeConfig)
.run(function($rootScope, $location, Auth) {
'ngInject';
// Redirect to login if route requires auth and you're not logged in
controller trying to use the Modal
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import routing from './main.routes';
export class MainController {
$http;
socket;
Modal;
awesomeThings = [];
newThing = '';
camden = {autoDiscover:true};
locFound = false;
/*@ngInject*/
constructor($http, $scope, socket, Modal) {
this.Modal = Modal;
this.$http = $http;
this.socket = socket;
$scope.$on('$destroy', function() {
socket.unsyncUpdates('thing');
});
$scope.delete = this.Modal.confirm.delete()('asdf');
$scope.events = { // or just {} //all events
markers:{
enable: [ 'dragend' ]
//logic: 'emit'
}
}
$scope.camden = {autoDiscover:true};
$scope.$on('leafletDirectiveMap.locationfound', function(event){
$scope.eventDetected = "ZoomStart";
var instancePosition = {
lat: $scope.camden.lat,
lng: $scope.camden.lng,
focus: true,
message: "Drag to Flooding Instance",
draggable: true
};
$scope.markers = {
instancePosition: angular.copy(instancePosition)
}
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args){
$scope.camden.lat = args.model.lat;
$scope.camden.lng = args.model.lng;
$scope.markers.instancePosition.lat = args.model.lat;
$scope.markers.instancePosition.lng = args.model.lng;
});
}
$onInit() {
this.$http.get('/api/things')
.then(response => {
this.awesomeThings = response.data;
this.socket.syncUpdates('thing', this.awesomeThings);
});
}
addThing() {
if(this.newThing) {
this.$http.post('/api/things', {
name: this.newThing
});
this.newThing = '';
}
}
deleteThing(thing) {
this.$http.delete('/api/things/' + thing._id);
}
}
export default angular.module('camdenfirstApp.main', [uiRouter])
.config(routing)
.component('main', {
template: require('./main.html'),
controller: MainController
})
.name;
EDIT: if you;d like to see the project itself you can find it here: https://camden-first-hopeworks.c9users.io:8081/ ActivityAwk34 commented on Sep 20, 2016 Please surround your different code blocks with triple ticks (```). Your code is quite hard to read as-is. hopeworkscamden commented on Sep 20, 2016 @Awk34 sorry about that, I have updated Awk34 commented on Sep 20, 2016 Can you provide a full stack trace as well? hopeworkscamden commented on Sep 21, 2016 thedewpoint commented on Sep 21, 2016 Can you post what's in modal.service? You're expecting the import to provide you a module name but I'm not sure that's what you're importing hopeworkscamden commented on Sep 22, 2016 'use strict';
import angular from 'angular';
export function Modal($rootScope, $uibModal) {
/**
* Opens a modal
* @param {Object} scope - an object to be merged with modal's scope
* @param {String} modalClass - (optional) class(es) to be applied to the modal
* @return {Object} - the instance $uibModal.open() returns
*/
function openModal(scope = {}, modalClass = 'modal-default') {
var modalScope = $rootScope.$new();
angular.extend(modalScope, scope);
return $uibModal.open({
template: require('./modal.html'),
windowClass: modalClass,
scope: modalScope
});
}
// Public API here
return {
/* Confirmation modals */
confirm: {
/**
* Create a function to open a delete confirmation modal (ex. ng-click='myModalFn(name, arg1, arg2...)')
* @param {Function} del - callback, ran when delete is confirmed
* @return {Function} - the function to open the modal (ex. myModalFn)
*/
delete(del = angular.noop) {
/**
* Open a delete confirmation modal
* @param {String} name - name or info to show on modal
* @param {All} - any additional args are passed straight to del callback
*/
return function() {
var args = Array.prototype.slice.call(arguments);
var name = args.shift();
var deleteModal;
deleteModal = openModal({
modal: {
dismissable: true,
title: 'Confirm Delete',
html: '<p>Are you sure you want to delete <strong>' + name + '</strong> ?</p>',
buttons: [{
classes: 'btn-danger',
text: 'Delete',
click(e) {
deleteModal.close(e);
}
}, {
classes: 'btn-default',
text: 'Cancel',
click(e) {
deleteModal.dismiss(e);
}
}]
}
}, 'modal-danger');
deleteModal.result.then(function(event) {
del.apply(event, args);
});
};
}
}
};
}
export default angular.module('workspaceApp')
.factory('Modal', Modal)
.name;
Azayzel commented on Sep 23, 2016 Your specific issue seems to be case. In your app.js you're importing with lowercase 'm' but in your controller your using it as 'M'. Try fixing it to a capital 'M' when importing and in your injection.
With that being said; i am also having trouble with this Modal. When i call $uibModal directly from my controller it works the way a Modal should. But not via this service. Azayzel commented on Sep 23, 2016 Ive created a PR that fixes this issue. #2256
The problem lies at the export of the factory. Change
export default angular.module('workspaceApp')
.factory('Modal', Modal)
.name;
to
export default angular.module('workspaceApp.Modal',[])
.factory('Modal', Modal)
.name;
Reacted by Hopeworks, Zane and Andrew Koroluk hopeworkscamden commented on Sep 26, 2016 Thanks @Azayzel ! I really appreciate it! Got my first modal to pop up today using the Modal service. Next stop is injecting the controller scope i'm calling the modal from into the modal itself. marwenlandoulsi commented on Dec 29, 2016 zaphinath commented on Apr 24, 2017 I'm seeing the same issue - angular.js:14525 Error: [$injector:strictdi] Modal is not using explicit annotation and cannot be invoked in strict mode.
Any solution? thedewpoint commented on Apr 24, 2017 zaphinath commented on Apr 24, 2017
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|