Trouble with the $ at the angle!

Asked

Viewed 102 times

-6

My Angular application is not recognizing this character $

Note the error message that is appearing on the browser consoles;

Uncaught ReferenceError: $ is not defined
    at novo:21

The code refers to this below, it is in the index.html file of the angular;

  <script>
    $(function() {
      var settings = {
          type: 'json',
          filelimit: 1,
          allow: '*.(jpg|jpeg|png)'
      };

      UIkit.uploadSelect($('#upload-select'), settings);
      UIkit.uploadDrop($('#upload-drop'), settings);
    });
    </script>

The full page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kwan</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="../src/assets/css/upload.min.css"/>



</head>
<body>
  <app-root></app-root>
  <script src="../src/assets/javascript/upload.min.js"></script>
  <script src="../src/assets/javascript/upload.min.js"></script>

  <script>
    $(function() {
      var settings = {
          type: 'json',
          filelimit: 1,
          allow: '*.(jpg|jpeg|png)'
      };

      UIkit.uploadSelect($('#upload-select'), settings);
      UIkit.uploadDrop($('#upload-drop'), settings);
    });
    </script>
</body>
</html>

How do I make Angular recognize the $ ?

Angular file.cli.json

 "scripts": [
        "../node_modules/chart.js/dist/Chart.js",
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/admin-lte/bootstrap/js/bootstrap.min.js",
        "../node_modules/admin-lte/dist/js/app.min.js"
      ],
angular

2 answers

1

This script you are adding is Jquery?

You must create a new file within your js folder and import it into your angular.json within the script key:

Ex:

"scripts": [
   "./node_modules/jquery/dist/jquery.min.js",
   "src/js/fechamodal.js",
   "src/js/fileinput.js"
]

And then in this file you can use jquery:

Example of my closemodal.js:

$(document).click(function (e) {
    if ($(e.target).is('#modalLoginForm')) {
        $("#modalLoginForm .close").click()
    }
});

1


Hello the $ according to the example shown shows that it is a jQuery plugin that you want to use.

To make use of the jQuery you need to include it in your HTML.

For this you just need to include the script directly in the HTML.

Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kwan</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="../src/assets/css/upload.min.css"/>

</head>
<body>
  <app-root></app-root>
  <!-- incluindo biblioteca do jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="../src/assets/javascript/upload.min.js"></script>
  <script src="../src/assets/javascript/upload.min.js"></script>

  <script>
    $(function() {
      var settings = {
          type: 'json',
          filelimit: 1,
          allow: '*.(jpg|jpeg|png)'
      };

      UIkit.uploadSelect($('#upload-select'), settings);
      UIkit.uploadDrop($('#upload-drop'), settings);
    });
    </script>
</body>
</html>

Note: Angular is a Famework that is already popular and has several libraries. Maybe you have some solution that does not use jQuery and if you have, I advise the use.

Important: If you are not using the angularjs recommend that you install jquery with npm and include it in the angular.json scripts as shown in the @Leticia response.

  • I had already included Jquery in my application as you can see in the update of my post, but still it is presenting problems, I am not using Angularjs, I am using Angular 5

  • @wladyband do as I have shown, the jQuery of scripts will be included after the execution of your scripts. That is when they will run the script will not be available. Or create a . js and include it in the scripts after jQuery.

  • sorry for my insistence, took, worked now, thank you very much.

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.