0

I'm trying to add this: https://github.com/kuhnza/angular-google-places-autocomplete module to my mean app. I used bower to install, which included the following example.

<!DOCTYPE html>
<html ng-app="example">
<head lang="en">
    <!-- Required dependencies -->
     <script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>
    <script src="/lib/angular/angular.js"></script>

    <!-- Google Places Autocomplete directive -->
    <script src="/lib/angular-google-places-autocomplete/src/autocomplete.js"></script>

    <script>
        angular.module('example', ['google.places'])

                // Setup a basic controller with a scope variable 'place'
                .controller('MainCtrl', function ($scope) {
                    $scope.place = null;
                });
    </script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Basic Usage</h1>

            <form class="form">
                <input class="form-control" g-places-autocomplete ng-model="place"/>
            </form>

            <h5>Result:</h5>
            <pre>{{place | json}}</pre>
        </div>
    </div>
</div>
</body>
</html>

When I run my app on localhost and type the url corresponding to the location of the example, everything works fine. But instead, if I copy and paste this code into view.html and follow a link to this file, the code is nonfunctional. Now, if I add 'google.places' to the var applicationModuleVendorDependencies array in config.js, I get the following error.

Uncaught Error: [$injector:modulerr] Failed to instantiate module borowr due to:
Error: [$injector:modulerr] Failed to instantiate module google.places due to:
Error: [$injector:nomod] Module 'google.places' 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.

What is the proper way to add 3rd party modules to a mean app?

Forest Hughes
  • 143
  • 1
  • 3
  • 12

2 Answers2

1

Looks like you're on the right track, did you inject the dependency into the controller for that view?

  • Not sure what you mean exactly. I copied the code exactly as it is in the example into a different file. So the controller being used is "MainCtrl." I am new to mean, so I'm not sure, but does something change when you create a file with "*.view.html" instead of just "*.html"? Before I tried injecting the module into the old view controller, which was the "itemController" using this line of code `angular.module('items').controller('ItemsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Items', 'UserItem', 'google.places',` But it didn't work. – Forest Hughes Mar 10 '16 at 21:02
  • The code in my view is \*exactly\* the same as the code I posted above. Why would the code work in one file but not the other? – Forest Hughes Mar 10 '16 at 21:18
  • So if I understand you correctly, you have a link that takes the user to the page you pasted up there? –  Mar 10 '16 at 21:26
  • I realize the code works in both files as long as I type the url, in this case `localhost:3000/modules/items/views/create-item.client.view.html` and `localhost:3000/lib/angular-google-places-autocomplete/example/basic.html` both work. But if I follow a link to my create-client.view.html inside my mean app, it doesn't work. I think it's a problem with the way I'm referring to the script directory in the – Forest Hughes Mar 10 '16 at 21:27
  • Is the new file in the same directory? If not maybe your need to change the src location to be relative to the directory it is in. –  Mar 10 '16 at 21:27
  • The script is in \public\lib\angular-google-places-autocomplete\src and the file I'm trying to access it is in \public\modules\items\views. So `` should work, right? Because I've tried and it doesn't. – Forest Hughes Mar 10 '16 at 21:31
  • Yeah, that was a typo on my part. That's what it is in my create-item.client.view.html file. I still have the same problem. – Forest Hughes Mar 10 '16 at 21:41
  • If you open up developer tools in Chrome, can you actually see the content of this file in the source tab? –  Mar 10 '16 at 21:44
  • When I look at the source tab, I can see some of the other directories in the lib directory such as angular, angular-animate, and angular-bootstrap, but I cannot see the angular-google-places-autocomplete directory. – Forest Hughes Mar 10 '16 at 21:49
  • from your clientview directory try doing cd ../../../lib/google-place... from the terminal and see if you actually end up in the correct directory. If you do then maybe you have to configure your web servers root directory. –  Mar 10 '16 at 21:53
  • The cd works just fine. I guess I need to configure the root directory? Any helpful links for doing that? – Forest Hughes Mar 10 '16 at 21:56
  • Try this for some direction http://stackoverflow.com/questions/1025587/how-do-i-make-apache-know-which-app-directory-to-use-for-different-domains –  Mar 10 '16 at 22:25
1

I had the same problem when adding a 3rd party module to my mean app. Check this link: https://stackoverflow.com/a/36032008/6044269

That is how added ngDialog to my mean app, should be the same for you, except for the CSS files.

As far as i know this is the only way i manage to add 3rd party modules.

Community
  • 1
  • 1
Luke Kroon
  • 1,016
  • 12
  • 19