javascript - Proper way to add jquery packages to an Angular 10+ project?

Question

I am trying to install jquery and jquery-slimscroll packages to an Angular project (version > 10), but the packages are not seems to be installed properly. So, regarding to this issue, could you please clarify me about the following issues below?

Assume that I have the following client structure:

ClientApp ---
            |--- node_modules
            |--- package.json
            |--- angular.json

1. What is the proper way to add jquery and jquery-slimscroll to the project?

Should I run npm install on the ClientApp folder? Or is there a better way for the latest Angular versions?

2. I think there are several ways to add these packages as script like the following:

in angular.json:

"scripts": [
  ".../jquery/dist/jquery.min.js",
  ".../jquery-slimscroll/jquery.slimscroll.js",
]

Is it not a good approach to add them like this? Should I add them in npm as in the 1st question?

3. What about the packages.json? Some packages are added to packages.json instead of angular.json. What is the difference and why some packages are added another?

question from:https://stackoverflow.com/questions/65870148/proper-way-to-add-jquery-packages-to-an-angular-10-project

Answer 1

First of all, you have to understand the function of angular.json and package.json.

Angular.json

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

Package.json

Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios. You add packages to package.json as your application evolves. You may even remove some.

The package.json is organized into two groups of packages:

Dependencies are essential to running applications. DevDependencies are only necessary to develop applications.

So, for the questions of the proper way to add these jquery dependencies, you can do both, the npm install jquery or add to the package.json and if needed to the angular.json.

The difference of both ways is that if you use npm install jquery it will add the dependencies automatically and download the packages to your node_modules, you add it manually, you will need to run npm install anyway, tp get the packages.