TypeError: n.chosen is not a function

[eugenevk]

Hi,

I get the above error in my angular MEAN project. Have installed via bower and included dependency:

,'public/lib/angular-chosen-js/angular-chosen.min.js'

and

,'angular.chosen'

Can you advise?

[adityasharat]

Hey @eugenevk, I remember there was some issue with bower. I recommend using the library directly. (by cloning the repo into your vendor or lib directory)

[eugenevk]

Hi @adityasharat, unfortunately that doesn't solve it. Same error. I copied the master into my lib directory.

[adityasharat]

Have you included jQuery and chosen before angular?

[eugenevk]

I have now included this:

         ...
         'public/lib/jquery/dist/jquery.min.js'
        ,'public/lib/jquery-ui/jquery-ui.min.js'  // needed by ui-sortable
        ,'public/lib/bootstrap/dist/js/bootstrap.js'
        ,'public/lib/angular-chosen/angular-chosen.min.js'
        ,'public/lib/angular/angular.js'
         ...

But that returns the following error:

Uncaught ReferenceError: angular is not defined
at angular-chosen.min.js:29

[adityasharat]

The issue is the order I suppose

...
'public/lib/jquery/dist/jquery.min.js'
,'public/lib/jquery-ui/jquery-ui.min.js'  // needed by ui-sortable
,'public/lib/bootstrap/dist/js/bootstrap.js'
,'public/lib/angular/angular.js'
,'public/lib/angular-chosen/angular-chosen.min.js' /* after angular */
...

[robe2]

I had the same issue. I didn't realize the chosen library wasn't bundled in this angular-chosen directive until I looked at the example. So to fix I had to do this.

``

<script src="lib/jquery/jquery-3.2.1.min.js"></script> <script src="lib/jquery-ui/jquery-ui.min.js"></script> <script src="lib/chosen/chosen.jquery.min.js" type="text/javascript"></script> <script src="lib/chosen/docsupport/prism.js" type="text/javascript"></script> <script src="lib/angular-chosen/angular-chosen.min.js" type="text/javascript"></script>

``
Where the chosen library you get from - https://github.com/harvesthq/chosen