Develop Reference

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

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?

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.

npm overhead - how to handle this?

When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.

npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.

Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.

What's the js equivalent of RailsInstaller?

I want to build a small js plugin, and I want to try that with ReactJS.
ReactJS recommends installing using npm and browserify.
In my experience with Ruby on Rails, there are always a lot of things to install, and using Windows introduces additional problems.
With Ruby it is Rails Installer. What is JS equivalent of Rails Installer? i.e. a tool that lets me install all necessary packages with one step?
I did a little bit of search, find that I need to install:
NodeJS, NPM
NVM
Webpack or Browerify
Babel
I think there may be others that I need.

To start the project you need node and npm because webpack, browserify and babel is npm packages.
The only way to install all packages in one step is to install package that actually depend on all packages you need. There is a lot of ReactJS starter kits in github like this https://github.com/kriasoft/react-starter-kit
I, personally recommend you doing such a things by yourself - its not a big deal if you understand what you want. In the root of all nodejs projects there is a file package.json every time you need a new module (package) just type npm install -S <module_name> in the root directory of your project.
This new module appears in node_modules directory and because of -S flag it name also will be stored in dependencies of your project in package.json file so that in the future you can just type npm install to install all dependencies (aka modules/packages) of your project.

bower_components not being included in yo angular

I'm using the latest yo angular generator to build an angular based app. I've bower install --save the bower_component 'angular-iscroll' which installed its dependency 'iscroll'
However, when trying to compile my project the 'iscroll' component doesn't get injected into the build.
How do I configure my project to include the component into the build?
I'm turning to a reference bug at https://github.com/mtr/angular-iscroll/issues/16
but the thing is I AM including the bower in my bower.json file but during the build process it keeps getting overlooked why is grunt not including the file?

Grunt and Bower Dependency Management

I am new to whole front-end tooling and I am trying to start a new jquery plugin project. So, with Grunt I used grunt-init-jquery to make me a boilerplate jquery plugin project and it already has unminified versions of client framework dependecies as well such as jquery and qunit.
It also generates package.json which I can edit to contain dependencies so, how does Bower fit here? or is optional and I can handle both server and client side dependencies with Grunt only?

I think you are confusing Grunt with Npm, because the Grunt cannot handle dependencies, it's "simply" a task runner. The package.json file is here because you need the devDependencies for the Grunt installation and all its plugins (like grunt-contrib-concat). This file is associated with Npm and not specifically Grunt.
Bower is solely for front-end dependencies. Even if you can handle them with Npm, it's better to use Bower since it's optimized for this purpose (no deep dependencies among other things).
So manage the things you need for the development of your plugin with Npm, and Bower for your plugin dependencies (since a jQuery plugin is usually for the front-end).