Problems with non-angular $!

Navigation
-6

My Angular app is not recognizing this $ character

Look at the error message that is appearing in the browser consoles; 

Uncaught ReferenceError: $ is not defined
    at novo:21

The code is relative to this one, it is found in the index.html of 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 entire 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"
      ],
    
asked by anonymous 01.10.2018 / 17:36

2 answers

1

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

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

To do this, simply include the script directly in 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><scriptsrc="../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 it has some solution that does not use jQuery and if it has, I advise the use.

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

01.10.2018 / 17:53
1

Is this script you're adding to JQuery?

You should create a new file inside your js folder and import it into your angular.json into the scripts 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 closamodal.js: 

$(document).click(function (e) {
    if ($(e.target).is('#modalLoginForm')) {
        $("#modalLoginForm .close").click()
    }
});
    
01.10.2018 / 17:50
How to delete a parent entity without excluding child entities? Basic Commands