Modal unknown provider #2247

hopeworkscamden · 2016-09-20T17:50:30Z

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/

The text was updated successfully, but these errors were encountered:

Awk34 · 2016-09-20T18:43:18Z

Please surround your different code blocks with triple ticks (```). Your code is quite hard to read as-is.

hopeworkscamden · 2016-09-20T18:46:58Z

@Awk34 sorry about that, I have updated

Awk34 · 2016-09-20T18:55:13Z

Can you provide a full stack trace as well?

hopeworkscamden · 2016-09-21T13:56:42Z

here is the full error that occurs

thedewpoint · 2016-09-21T22:08:20Z

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 · 2016-09-22T14:46:55Z

'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 · 2016-09-23T02:51:00Z

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 · 2016-09-23T03:54:12Z

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;

hopeworkscamden · 2016-09-26T21:11:51Z

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 · 2016-12-29T17:35:51Z

Please i need help. i have got this bug :

Any solution ??

zaphinath · 2017-04-24T03:15:09Z

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 · 2017-04-24T12:13:13Z

Usually that happens when you forget an nginject annotation On Apr 23, 2017 11:15 PM, "Derek Carr" <[email protected]> wrote: 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? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADEBQwQISUfKiYq1nGrqXp4UtRt4xRX2ks5rzBPEgaJpZM4KB7BM> .

zaphinath · 2017-04-24T19:35:15Z

#2203 Fixed the issue.

Awk34 closed this as completed in 68b7b69 Sep 26, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal unknown provider #2247

Modal unknown provider #2247

hopeworkscamden commented Sep 20, 2016 •

edited

Loading

Awk34 commented Sep 20, 2016

hopeworkscamden commented Sep 20, 2016

Awk34 commented Sep 20, 2016

hopeworkscamden commented Sep 21, 2016

thedewpoint commented Sep 21, 2016

hopeworkscamden commented Sep 22, 2016

Azayzel commented Sep 23, 2016 •

edited

Loading

Azayzel commented Sep 23, 2016 •

edited

Loading

hopeworkscamden commented Sep 26, 2016

marwenlandoulsi commented Dec 29, 2016 •

edited

Loading

zaphinath commented Apr 24, 2017

thedewpoint commented Apr 24, 2017 via email

zaphinath commented Apr 24, 2017

Modal unknown provider #2247

Modal unknown provider #2247

Comments

hopeworkscamden commented Sep 20, 2016 • edited Loading

Awk34 commented Sep 20, 2016

hopeworkscamden commented Sep 20, 2016

Awk34 commented Sep 20, 2016

hopeworkscamden commented Sep 21, 2016

thedewpoint commented Sep 21, 2016

hopeworkscamden commented Sep 22, 2016

Azayzel commented Sep 23, 2016 • edited Loading

Azayzel commented Sep 23, 2016 • edited Loading

hopeworkscamden commented Sep 26, 2016

marwenlandoulsi commented Dec 29, 2016 • edited Loading

zaphinath commented Apr 24, 2017

thedewpoint commented Apr 24, 2017 via email

zaphinath commented Apr 24, 2017

hopeworkscamden commented Sep 20, 2016 •

edited

Loading

Azayzel commented Sep 23, 2016 •

edited

Loading

Azayzel commented Sep 23, 2016 •

edited

Loading

marwenlandoulsi commented Dec 29, 2016 •

edited

Loading